Тост с петлей foreach

Question

Я надеюсь, что кто-то знает, как решить мою проблему. Итак, я установил Toastr для отображения уведомлений в моем приложении ASP.NET MVC. А что у меня есть вид со столом и цикл по каждому элементу для каждого элемента передается от контроллера:

@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, но я не уверен. И я не знаю, как создать несколько идентификаторов, а затем использовать их в сценариях JS таким образом, не обновляя страницу, но получая только тост.

Answer 1

Ваш текущий код генерирует разметку с более чем одним тегом привязки с тем же идентификатором (myLink). Это недопустимая разметка HTML. Идентификатор должен быть уникальным.

Что вы можете сделать, это дать класс 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" }); 
    }  
} 

Теперь в успех обратного вызова вашего АЯКС»Call, вы просто проверить статус значение свойства 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'); 
     } 
     }); 
    }); 

});