ASP.NET MVCのコントローラーメソッドの結果に応じてHTMLを生成するには

Question

現在ログインしているユーザーの未読メールを表示する必要があります。その上にUNREADメールの数WITH

LETTER

この画像は示さ：そこにユーザがシステムにログイン彼はいくつかの未読のメールがあり、それはこのようになります通知されます

読むべき2つのメッセージが残っているということです。

未読のメールやメッセージを表示するためにこの文字をクリックすると、ここで達成したいと思います。

これはJavaScriptが絶対に初心者として動作する方法を理解していますが、on click eventを添付する必要があります。これはjavascriptメソッドをコールして、コントローラからajaxコールを呼び出して結果を返します（データベースから未読メッセージ）私に。

しかし、私は本当にこれが実際に起こっているかわからない...私はJavaScriptで本当に悪いだから...

今私はここに私のコードを投稿（と、それはより詳細な説明）します。

<li role="presentation" class="dropdown"> 
    <a href="javascript:;" onclick="GetAllUnreadEmails('@LogedUserId') class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false" style="visibility:@visibility;"> 
     <i class="fa fa-envelope-o"></i> 
      @if (LoggedInUser != null) 
      { 
          // HERE I AM SHOWING ICON LETTER AND NUMBER OF UNREAD emails ON TOP OF 
          int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id); 
          if (unredEmails > 0) 
          { 
           <span class="badge bg-red" id="inboxunredEmails">@unredEmails</span> 
          } 
          else 
          { 
           <span class="badge bg-green">@unredEmails</span> 
          } 

         } 
     </a> 

        // HERE I AM SHOWING UNREAD MESSAGES AS DROPDOWN 
        <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu"> 
         @if (LoggedInUser != null) 
         { 
          int unredEmails = EmailController.GetNumberOfUnreadEmails(LoggedInUser.Id); 
          if (unredEmails > 0) 
          { 
           for (int i = 0; i < unredEmails; i++) 
           { 
            <li> 
             <a> 
              <span class="email"> 
               Unread Email number: @i; 
              </span> 
             </a> 
            </li> 
           } 
          } 
         } 
        </ul> 
</li> 

あなたは手紙の男はクリック見ることができるように私は、クリックイベントに貼り付け：

：ここ

onclick="GetAllUnreadEmails('@LogedUserId') 

はGetAllUnreadEmails javascriptのメソッドの定義であります

var GetAllUnreadEmails = function (loggedUserId) { 
     if (loggedUserId) { 
      $.ajax({ 
       url: "Message/GetUnreadEmails", 
       method: "GET", 
       data: {UserID : loggedUserId}, 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 

       }, 
       error: function (response, textStatus, errorThrown) { 
        alert("error: Error!"); 
       }, 
       failure: function (response) { 
        alert("failure: Error!"); 
       } 
      }); 
     } 
    } 

ここに私のコントローラと最も混乱している部分があります。なぜここに戻って何を返すのか、戻ってきた結果をどのように処理するのか分からないからです。基本的に私はここにリストを取得する必要がありますforeachアイテム私はそれが手紙をクリックしたときに未読メールを作成/表示している私のHTMLを生成する必要があります。

public ActionResult GetUnreadEmails(Guid emailId) 
    { 
    if (User.Id != null) 
    { 
     List<Emails> resultList = EmailController.GetUnreadEmailsByUserId(User.Id); 
     return View(resultList); 
    } 
    return View("Error, not found!"); 
    } 

ここにJsonを返す必要がありますか？しかし、私はそれをどう動かすべきではないのですか？私はこの部分で本当に混乱している、または多分メソッドjQuERYを使用してこのJavaScriptメソッドで結果をループする必要がありますか？私は手紙に未読メッセージ毎回ユーザーのクリックを取得する必要があり、私はできないので、本当に私は、この部分で何をすべきかを知らない、このコード

for (int i = 0; i < unredEmails; i++) 
{ 
    <li> 
     <a> 
      <span class="email"> 
        Unread Email number: @i; 
      </span> 
     </a> 
    </li> 
} 

を繰り返す方法がわからないものは何でも

一度読み込んだままにしておくと、電子メールを別のブラウザで読むことができるので（文字の値は2になりません。それは1に変更されます）、レンダリングページのない文字をクリックするとデータベースに行き、 "更新されたデータ"などを取得する必要があります

どんな種類の助けが素晴らしいだろうか？ ありがとうございました 乾杯お待ちください

Answer 1

さまざまな選択肢があります。柔軟性があるのでコントローラメソッドからJSONを返すことをお勧めしますが、JavaScriptに慣れていないのでコントローラメソッドからビューを返すようにしてください。

つまり、JavaScriptを使用してブラウザに受信トレイを表示するのではなく、c＃/ Razorを使用して受信トレイをサーバー上にレンダリングします。

1. コントローラメソッドをJavaScript（これはGetAllUnreadEmails()メソッド）で呼び出します。
2. 電子メールのリストを含むモデルを作成します。
3. 未読メールのレンダリングに必要なマークアップだけでビューを作成します。
4. 戻るPartialView()代わりのView()
5. を使用してビューになりましたページを更新するために使用することができますHTMLの素敵なフラグメントを持っています。

successコールバックには、このHTMLを必要に応じて挿入できます。受信トレイの変更に対処する

success: function (data) { 
    console.log(data); 

    $("#id-of-unread-messages-element").html(data); 
} 

はカウント

ます。また、メッセージが（おそらく別の場所に）読んでいると「未読」の値を変更することに言及します。この値を同期させておくことはこの回答の範囲を超えていますが、変更が発生したときに、接続されているすべてのブラウザに更新をプッシュするために、SignalRを調べることができます。

SignalR