ActionLink 上的 JQuery 单击事件并附加到部分视图答案

【问题标题】：JQuery click event on ActionLink and append to a partial viewActionLink 上的 JQuery 单击事件并附加到部分视图
【发布时间】：2015-09-01 19:33:36
【问题描述】：

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

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

同一个view page还有其他信息，都在beginform里面。每次点击 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>

和操作链接

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

当我点击我的 actionlink 时，它甚至没有点击 jQuery click 事件。它只是重定向到 ~/NewUserSecurityGroupRow 操作。而且由于我在 Actionlink 中将对象值设置为 null，这会引发关于不可为 null 字段的 null 条目的错误。

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

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

【问题讨论】：

我的模型中定义了一个 SecurityGroupList 和一个 SecurityGroupId。

标签： javascript c# jquery partial-views actionlink

【解决方案1】：

您是否尝试将 ActionLink 替换为具有正确 id 的常规 html（或 span），并检查点击是否会命中您的 jquery。

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

【讨论】：

【解决方案2】：

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

尝试使用普通的 html 元素，例如 <span>（由 Mark Hasper 建议）
注释掉e.preventDefault()这一行，改为在点击回调函数中返回false
使用浏览器控制台进行调试。例如，尝试从控制台查询元素并查看它返回的内容

希望对您有所帮助。

【讨论】：

【解决方案3】：

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

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

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

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

这完美解决了我的问题。

【讨论】：