点击ActionLink上的event，并添加到一个局部视图中

本文关键字：一个 局部 视图 上的 ActionLink event 添加 点击 | 更新日期: 2023-09-27 18:10:42

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

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

在同一个视图页面上还有其他信息，它们都在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>

和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动作。由于我在Actionlink中将对象值设置为空，这就给我抛出了一个关于不可空的文件的空条目的错误。

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

Update:我解决了这个问题。

点击ActionLink上的event，并添加到一个局部视图中

您是否尝试过将ActionLink替换为具有正确id的常规html(或span)并检查是否点击它会命中您的jquery

因为你不使用链接作为一个真正的链接ActionLink调用是不需要的

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

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

希望有帮助。

所以我通过给出@Html来解决这个问题。BeginForm id。

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

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

中
$(function () {
        $('#FormId').on('click', '#ddUserSecGrpRelate', function (e) {...}
相关文章：