Question

我已经坚持了两天这个问题。谢谢大家的帮助。

我想从下拉列表中选择一个安全组，一旦单击actionlink，它会将选定的安全组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>

和actionlink

@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点击事件。它只是重定向到〜/ NewUserSecurityGroupRow Action。因为我在Actionlink中将对象值设置为null，所以这会引发一个关于不可为空的字段的空条目错误。

我尝试过在网上找到的一些方法。什么都没有。请帮帮我，非常感谢！

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

Answer 1

您是否尝试使用具有正确ID的常规html（或span）替换ActionLink，并检查点击该命中是否会触及您的jquery。

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

Answer 2

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

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

希望它有所帮助。

Answer 3

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

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

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

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

这完全解决了我的问题。

ActionLink上的JQuery click事件并附加到部分视图

3 个答案: