JQuery click event on ActionLink and append to a partial view

Question

I've been stuck with this issue for two days.Thanks for everyone's help ahead.

I would like to select a security group from the dropdown list and once click the actionlink, it will send the selected security group id back as a parameter to an action in my controller. The action will take the id, load the object and pass back to the partial view and generate a new row for my table.

There are other information on the same view page, and they are all inside a beginform. Every click on the actionlink should just refresh the partial view(which is the grid here).

My controller:

public ActionResult NewUserSecurityGroupRow(ulong securityGrpId)
  {
     var relate = OspreyCommon.SecurityGroup.Load(securityGrpId);
     return PartialView("~/Views/Shared/DisplayTemplates/SecurityGroupPartial.cshtml", relate);
  }

View:

My Dropdown List

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

and the actionlink

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

and the table linked with a place to render a partial view

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

Finally my jQuery:

<script>
    $(function () {
        $('#addUserSecGrpRelate').on('click', function (e) {
            e.preventDefault();

            $.post($(this).prop('href'), { securityGrpId: $('#SecurityGroupId').val() })
                .done(function (html) {
                    $('#securityGroup').append(html);
                });
        });
    });
</script>

When I click on my actionlink, it not even hits the jQuery click event. It just redirects to the ~/NewUserSecurityGroupRow Action. And since I set the object value to null in the Actionlink, this throws me a error about null entry for a un-nullable filed.

I've tried some methods I found online. Nothing actually works. Please help me out, thanks a lot!

Update : I solved the problem. Please see my solution below

Answer 1

Have you tried replacing the ActionLink with a regular html (or span) with the correct id and checking if clicking that hits your jquery.

Since you're not using the link as a real link the ActionLink call is not needed.

Answer 2

I am not familiar with your backend framework, however, you might want to try the following:

1. Try a plain html element, for example a <span> (as suggested by Mark Hasper)
2. Comment out the e.preventDefault() line, return false in the click callback function instead
3. Use the browser console for debugging. For example, try querying the element from the console and see what it returns

Hope it helps.

Answer 3

So I solved this problem by give the @Html.BeginForm an id.

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

And in the script, I specify the click event that happens inside this form

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

this solved my problem perfectly.