Javascript JQuery单击ActionLink上的事件并附加到局部视图

我已经被这个问题困扰了两天。谢谢大家的帮助

我想从下拉列表中选择一个安全组，单击actionlink后，它会将所选安全组id作为参数发送回控制器中的操作。该操作将获取id，加载对象并传递回局部视图，并为我的表生成一个新行

在同一个查看页面上还有其他信息，它们都在一个页面中。每次点击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>

以及与一个位置链接的表，以渲染局部视图

  <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操作。由于我在Actionlink中将对象值设置为null，这会引发一个关于不可为null的字段的null条目的错误

我尝试了一些在网上找到的方法。实际上什么都不管用。请帮帮我，非常感谢

---

更新：我解决了这个问题。请参阅下面的我的解决方案

您是否尝试过用常规html或具有正确id的span替换ActionLink，并检查单击是否符合您的jquery

---

由于您没有将链接用作真正的链接，因此不需要调用ActionLink。

我不熟悉您的后端框架，但是，您可能希望尝试以下操作：

尝试一个普通的html元素，例如MarkHasper建议的 注释掉e.preventDefault行，改为在click回调函数中返回false 使用浏览器控制台进行调试。例如，尝试从控制台查询元素并查看它返回的内容

---

希望能有帮助

所以我通过给@Html.BeginForm一个id解决了这个问题

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

在脚本中，我指定了表单中发生的单击事件

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

---

这完美地解决了我的问题。

我在模型中定义了SecurityGroupList和SecurityGroupId。

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