用 foreach 循环吐司答案

【问题标题】：Toast with foreach loop用 foreach 循环吐司
【发布时间】：2017-01-01 16:16:57
【问题描述】：

我希望有人知道如何解决我的问题。因此，我安装了 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。

【问题讨论】：

id 值必须在文档中是唯一的，所以这是第一个问题：您有多个带有 id="alert" 的元素。当您想要识别一组元素时，通常需要一个类。

标签： javascript asp.net-mvc toastr

【解决方案1】：

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

您可以做的是，提供一个 css 类并将其用作连接点击事件的 jQuery 选择器。

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

现在用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');
         }
      });
   });

});

【讨论】：