Событие JQuery click on ActionLink и добавление частичного представления

Question

Я застрял в этой проблеме в течение двух дней. Спасибо за помощь всем.

Я хотел бы выбрать группу безопасности из раскрывающегося списка и один раз щелкнуть по ссылке action, она отправит выбранный идентификатор группы безопасности в качестве параметра в действие в моем контроллере. Действие примет идентификатор, загрузит объект и вернется к частичному представлению и сгенерирует новую строку для моей таблицы.

На одной странице просмотра есть другая информация, и все они находятся внутри начала. Каждый щелчок по actionlink должен просто обновлять частичный вид (который здесь является сеткой).

Мой контроллер:

public ActionResult NewUserSecurityGroupRow(ulong securityGrpId) 
    { 
    var relate = OspreyCommon.SecurityGroup.Load(securityGrpId); 
    return PartialView("~/Views/Shared/DisplayTemplates/SecurityGroupPartial.cshtml", relate); 
    } 

Вид:

Мой Выпадающий Список

<div class="form-group"> 
     <small>@Html.Label("Security Group List", htmlAttributes: new { @class = "control-label col-md-3" })</small> 
      <div class="col-md-6"> 
       @Html.DropDownListFor(model => model.SecurityGroupId, Model.SecurityGroupList, new { @class = "text-box single-line required form-control" }) 
       @Html.ValidationMessageFor(model => model.SecurityGroupId, "", new { @class = "text-danger" }) 
      </div> 
    </div> 

и ActionLink

@Html.ActionLink("Add Security Group", "NewUserSecurityGroupRow", null, new { @id = "addUserSecGrpRelate" }) 

и таблицы, связанной с местом для визуализации частичный vi РЭБ

<div class="table-responsive"> 
     <table class="table table-striped table-bordered"> 
       <thead> 
        <tr> 
         <th> 
          <small>Security Group ID</small> 
         </th> 
         <th> 
          <small>Security Group</small> 
         </th> 
         <th> 
          <small>Description</small> 
         </th> 
         <th> 
          <small>Action</small> 
         </th> 
        </tr> 
      </thead> 

      <tbody id="securityGroup"> 
        @foreach (OspreyCommon.SecurityGroup item in Model.SecurityGroups){ 
         @Html.DisplayFor(m => item, "SecurityGroupPartial") 
       } 
      </tbody> 
    </table> 
    </div> 

Наконец мой JQuery:

<script> 
    $(function() { 
     $('#addUserSecGrpRelate').on('click', function (e) { 
      e.preventDefault(); 

      $.post($(this).prop('href'), { securityGrpId: $('#SecurityGroupId').val() }) 
       .done(function (html) { 
        $('#securityGroup').append(html); 
       }); 
     }); 
    }); 
</script> 

Когда я нажимаю на моем ActionLink, он даже не попадает в щелчок событие JQuery. Он просто перенаправляется на действие ~/NewUserSecurityGroupRow. И так как я установил значение объекта null в Actionlink, это выдает мне ошибку в отношении нулевой записи для файла с нулевым значением.

Я пробовал некоторые методы, которые я нашел в Интернете. Ничего на самом деле не работает. Пожалуйста, помогите мне, спасибо большое!

Обновление: Я решил проблему. Пожалуйста, см. Мое решение ниже

Answer 1

Вы пробовали заменить ActionLink на обычный html (или span) с правильным идентификатором и проверять, будет ли щелчок на вашем jquery.

Поскольку вы не используете ссылку в качестве реальной ссылки, вызов ActionLink не нужен.

Answer 2

Я не знаком с вашими рамками бэкэнд, однако, вы можете попробовать следующее:

1. Попробуйте простой HTML элемент, например <span> (как это было предложено Марк Каспер)
2. Комментарий out e.preventDefault(), верните false в функцию обратного вызова щелчка
3. Используйте консоль браузера для отладки. Например, попробуйте запросить элемент с консоли и посмотреть, что он возвращает

Надеюсь, это поможет.

Answer 3

Поэтому я решил эту проблему, предоставив @ Html.BeginForm id.

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @id = "FormId" })) 

И в сценарии я указать событие щелчка, что происходит внутри этой формы

$(function() { 
     $('#FormId').on('click', '#ddUserSecGrpRelate', function (e) {...} 

это решить мою проблему полностью.