jQuery在ActionLink上单击事件并附加到局部视图

Question

我已经在这个问题上停留了两天。感谢大家的帮助。

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

在同一视图页面上还有其他信息，它们都在beginform中。 每次点击动作链接都应刷新局部视图（此处为网格）。

我的控制器：

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>

和动作链接

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

并且表格与位置链接以呈现局部视图

  <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>

当我单击动作链接时，它甚至没有命中jQuery click事件。 它只是重定向到〜/ NewUserSecurityGroupRow操作。 并且由于我在Actionlink中将对象值设置为null，这引发了关于不可空字段的null输入的错误。

我尝试了一些在网上找到的方法。 没有任何实际效果。 请帮帮我，非常感谢！

更新 ：我解决了问题。 请在下面查看我的解决方案

Answer 1

您是否尝试过用具有正确ID的常规html（或跨度）替换ActionLink，并检查是否单击了击中您的jquery。

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

Answer 2

我不熟悉您的后端框架，但是，您可能需要尝试以下方法：

1. 尝试使用简单的html元素，例如<span> （由Mark Hasper建议）
2. 注释掉e.preventDefault()行，在click回调函数中返回false
3. 使用浏览器控制台进行调试。 例如，尝试从控制台查询元素并查看其返回的内容

希望能帮助到你。

Answer 3

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

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

然后在脚本中，指定此表单内发生的click事件

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

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