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类并将其用作jQuery选择器来连接click事件。

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

现在使用css类

监听元素的click事件

$(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＆＃39;呼叫成功回调，你只需检查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循环进行吐司

1 个答案: