用 foreach 循环吐司

Question

我希望有人知道如何解决我的问题。因此，我安装了 Toastr 以在我的 ASP.NET MVC 应用程序中显示通知。我所拥有的是 table 的视图和从控制器传递的每个元素的 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 class 并将其用作 jQuery 选择器来连接点击事件。

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

现在监听css元素的点击事件 class

$(function(){

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

});

现在您可以编写代码来 ajax 调用执行某些操作的服务器方法并 return 响应。假设您的 SignIntoCourse 操作方法 return 是这样的响应。

[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');
         }
      });
   });

});

用 foreach 循环吐司

Toast with foreach loop

javascript

asp.net-mvc

toastr