In MVC Javascript function is not getting triggered using Ajax.ActionLink

Question

Problem Statement: Not able to trigger the Java-script Function from Ajax Action Link,but i'm able to trigger the same Java-script function using html.actionlink

What i'm doing: Actually i'm having grid of details and link for delete on each row,on-click of delete i want to pass value to an action result called Delete by using Javascript/Jquery function.

What i'm trying to avoid: On click of delete it should not navigate to new url as it happens with html.actionlink,so i'm using ajax.actionlink for this:

Please find the image for your reference:

enter image description here

View:

<table class="table">
        <tr>

             <th>
                @Html.DisplayNameFor(model=> model.RequestedBy)
            </th>
             <th>
                @Html.DisplayNameFor(model=> model.Description)
            </th>
            <th>
                @Html.DisplayNameFor(model=> model.Name)
            </th>
             <th>
                @Html.DisplayNameFor(model=> model.FromDate)
            </th>
             <th>
                @Html.DisplayNameFor(model => model.ToDate)
            </th>

        </tr>
        @if (Model!= null)
        {
            foreach (var item in Model)
            {
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.RequestedBy,new { id="lstRequestedBy"})
                    @Html.Hidden("#RequestedBy") 
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FromDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ToDate)
                </td>
                <td>    

                     @Ajax.ActionLink("Delete","Delete","Request",
                     new AjaxOptions 
                     {
                         OnBegin="return DeleteAsset()",
                         HttpMethod = "POST"
                     })
                     @*@Html.ActionLink("Delete","Delete","Request", new { onclick="DeleteAsset()"})*@
                </td>
            </tr>
            }
        }

    </table>

Javascript:

<script type='text/javascript'>

    function DeleteAsset() {
        var RequestedBy= $('#lstRequestedBy').val();
        $('#RequestedBy').val(RequestedBy);

    }
</script>

Controller:

  public ActionResult Delete(string RequestedBy)
  {
      //Want to perform some action here based on RequestedBy
   }

What i'm doing wrong here??

Why java-script function is not getting triggered with ajax.actionlink,which is getting triggered using html.actionlink??

It is also fine if any one provides alternative for this????

Change onclick="DeleteAsset()" to onclick="return DeleteAsset()" and inside the DeleteAsset function add return false; This will stop the browser from navigating to the URL. — Nigel Ellis

Mathieu Labrie Parent Mathieu Labrie Parent · Accepted Answer · 2014-10-30T14:32:07

Personnaly, i like to do my own ajax call.

<td>    
    // prevent the link from doing something. You can also use evet.preventDefault in the click event.
    <a href="javascript:void(0)" data-requestedby="@item.RequestedBy" >Delete</a>

</td>


$("[data-requestedby]").click(function () {
    var row = $(this).closest("tr");
    $.ajax({
         url: "Delete/Delete",
         data : { RequestedBy : $(this).attr("data-requestedby")  } ,
         success:function(result){
             // probably remove the row;
             $(row).remove();
         }
    });

});

Code not tested but i hope you get the idea.

In MVC Javascript function is not getting triggered using Ajax.ActionLink

1 Answers