Toach with foreach loop

Question

我希望有人知道如何解决我的问题。 所以，我已经安装Toastr在我的ASP.NET MVC应用程序中显示通知。 和我有什么是有桌子和foreach循环视图从控制器传递的每一个元素：

@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> 

的观点之后有一个脚本部分看起来是这样的：

@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循环的第一个元素。目的是，如果用户登录课程，他会收到他已经签名的祝酒词。我认为问题可以在所有foreach循环中都是相同的id，但我不确定。我不知道如何创建多个ID，然后以某种方式在JS脚本中使用它，而无需刷新页面，但只能接收Toast。

Answer 1

您当前的代码正在生成具有多个具有相同ID（myLink）的锚标记的标记。这不是有效的HTML标记。你的ID应该是唯一的。

你可以做的是给一个css类，并使用它作为jQuery选择器来连接click事件。

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

现在听元素的click事件与CSS类

$(function(){ 

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

}); 

现在，您可以编写代码，使一个AJAX调用它做了服务器的方法和返回响应。假设您的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数据的状态属性值，做任何你不得不这样做。

$(function(){ 

    $("a.myLink").click(function(e){ 
     e.preventDefault(); 
     var url=$(this).attr("href"); 
     $.post(url,function(data){ 
     if(data.status==="success") 
     { 
      toastr.success(data.message, 'Success'); 
     } 
     else 
     { 
      toastr.warning(data.message, 'Warning'); 
     } 
     }); 
    }); 

});