foreachループのトースト

Question

私の問題を解決する方法を誰かが知っていることを願っています。 私はToastrをインストールして、ASP.NET MVCアプリケーションに通知を表示しました。 そして、私が持っているコントローラから渡されたすべての要素のためのテーブルとforeachループを持つビューです：

@section scripts { 

<script type="text/javascript"> 
     $(document).ready(function() { 
      toastr.options = { 
       "closeButton": false, 
       "debug": false, 
       "newestOnTop": false, 
       "progressBar": false, 
       "positionClass": "toast-top-center", 
       "preventDuplicates": false, 
       "onclick": null, 
       "showDuration": "300", 
       "hideDuration": "1000", 
       "timeOut": "5000", 
       "extendedTimeOut": "1000", 
       "showEasing": "swing", 
       "hideEasing": "linear", 
       "showMethod": "fadeIn", 
       "hideMethod": "fadeOut" 

      }; 
      $('#alert').click(function() { 
       toastr.warning('Already signed!') 
      }); 
     }); 

     $('#myLink').click(function (e) { 

      e.preventDefault(); 
      $.ajax({ 
       url: $(this).attr("href"), 
      }); 

     }); 
     </script> 
} 

そして最後の場合：

@foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.CategoryName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.StartDate) 
      </td> 
      <td> 
       @{ 
        Html.RenderAction("_CourseQuantityCount", "Course", new { item.CourseID }); 
       } 
       /@Html.DisplayFor(modelItem => item.MaximumQuantity) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Price) 
      </td> 
      <td id="alert"> 
       @Html.ActionLink("SignIn", "SignIntoCourse", new { item.CourseID }, new { id = "myLink" }) 
      </td> 
     </tr> 
        } 
</table> 

ビューした後、このように見えるスクリプトセクションがあります私はそれが正常に動作する私のアプリケーションをロードするが、foreachループからの最初の要素のみ。目標は、ユーザーがコースにサインインした場合、既に彼が署名したトーストを受け取ることです。問題はすべてのforeachループの中で同じIDになると思いますが、わかりません。そして、私は複数のIDを作成し、それをページをリフレッシュせずにトーストを受け取るだけの方法でJSスクリプトで使用する方法を知らない。

Answer 1

あなたの現在のコードでは、同じID（myLink）を持つ複数のアンカータグを含むマークアップが生成されています。これは有効なHTMLマークアップではありません。あなたのIDは一意でなければなりません。

あなたができることは、cssクラスを与え、それをクリックイベントの配線のためのjQueryセレクタとして使用することです。

<td> 
    @Html.ActionLink("SignIn", "SignIntoCourse", new { courseId= item.CourseID }, 
                  new { class = "myLink" }) 
</td> 

は、今すぐあなたが何かをサーバーメソッドへのAJAX呼び出しを行い、応答を返すようにコードを書くことができCSSクラス

$(function(){ 

    $("a.myLink").click(function(e){ 
     e.preventDefault(); 
     //do something here, may be make an ajax call. 
    }); 

}); 

を持つ要素のクリックイベントに耳を傾けます。 SignIntoCourseアクションメソッドがこのような応答を返すと仮定します。

[HttpPost] 
public ActionResult SignIntoCourse(int courseId) 
{ 
    //do your code to check and return either one of the response 
    if(alreadySignedUp) // your condition here 
    { 
    return Json(new { status="failed",message = "Already Signed into course" }); 
    } 
    else 
    { 
    return Json(new { status="success",message = "Signed into course" }); 
    }  
} 

あなたのajax 'コールの成功コールバックでは、単にjsonデータのステータスプロパティ値をチェックし、必要なものを実行します。