ASP.NET MVC Submitting Form Using ActionLink

Question

I am trying to use link to submit a form using the following code:

 function deleteItem(formId) {

           // submit the form

           $("#" + formId).submit(); 

       }

Basically I have a grid and it displays a number of items. Each row has a delete button which deletes the item. I then fire the following function to remove the item from the grid.

 function onItemDeleted(name) {

           $("#" + name).remove();                       

       }

It works fine when I use a submit button but when I use action link the JavaScript from the controller action is returned as string and not executed.

 public JavaScriptResult DeleteItem(string name)
        {
            var isAjaxRequest = Request.IsAjaxRequest(); 

            _stockService.Delete(name);
            var script = String.Format("onItemDeleted('{0}')", name);
            return JavaScript(script); 
        }

And here is the HTML code:

 <td>

    <% using (Ajax.BeginForm("DeleteItem",null, new AjaxOptions() { LoadingElementId = "divLoading", UpdateTargetId = "divDisplay" },new { id="form_"+stock.Name }))
       { %>

    <%=Html.Hidden("name", stock.Name)%>
   <a id="link_delete" href="#" onclick="deleteItem('form_ABC')">Delete</a>

    <% } %>

    </td>

My theory is that submit button does alter the response while the action link simply returns whatever is returned from the controller's action. This means when using submit the JavaScript is added to the response and then executed while in case of action link it is simply returned as string.

If that is the case how can someone use action links instead of submit buttons.

UPDATE:

Seems like I need to perform something extra to make the action link to work since it does not fire the onsubmit event.

http://www.devproconnections.com/article/aspnet22/posting-forms-the-ajax-way-in-asp-net-mvc.aspx

Answer 1

Try without the UpdateTargetId property in the AjaxOptions (don't specify it)

new AjaxOptions() { LoadingElementId = "divLoading" }

Answer 2

My guess is the MS Ajax form knows how to handle a JavaScriptResponse and execute the code whereas your plain old Action link, with no relationship to the AjaxForm, does not. I'm pretty sure the MS ajax library essentially eval()s the response when it sees the content type of javascript being sent back.

Since you have no callback in your deleteItem() method there is no place for the script to go. To fix you'll have to manually eval() the string sent back which is considered a bad practice.

Now I'm not familiar with the MS Ajax library to be certain of any of this but what your doing is possible. I'd do things differently but don't want to answer with a "my way is better" approach ( especially because your blog has helped me before ) but I'd like to show this can be easier.

I'd ditch the form entirely and use unobtrusive javascript to get the behavior you want. IN psuedo jqueryish ( don't know ms ajax ) code:

function bindMyGrid() {
    $('.myDeleteLink').onclicksyntax( function() {

         //find the td in the row which contains the name and get the text
         var nameTdCell = this.findThisCellSibling();

         //do an ajax request to your controller
         ajax('myUrl/' + nameTdCell.text(), function onSuccessCallback() {

              //get the tr row of the name cell and remove it
              nameTdCell.parent().remove();                 
         });

    });
}

This also gains the benefit of not returning javascript from your controller which some consider breaking the MVC pattern and seperation of concerns. Hope my psuedo code helps.

Answer 3

What about just change look of a standard or using some css class? It'll look like a link and you'll avoid some problems you get with anchors - user will be able to click on it by a mouse wheel and open that link in a new tab/window.