Pass ID in Html.ActionLink via ajax to get partial view

Question

I have an MVC View page, strongly-typed to an enumerated product list. Each list item has an Html.ActionLink with a unique id. In my jquery file, I have an $.ajax function which should process the link with the corresponding id . The intent is to load a partial view on the same page, with that item's information, to allow editing for whatever item has been clicked. I don't want the actionr to result in a separate page, or generate a post to the server.

// here is the MVC stuff

@model IEnumerable<SimpleAjax.Models.Product>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
              @Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { id = "btnShowEdit" + item.Id, @class= ".button_action"})
       |

        </td>
    </tr>
}


<div id="showEditProd">
</div>

//inside controller
    public ActionResult ShowEdit(int id)
    {

        Product prod = db.Product.Find(id);

        ProductViewModel viewModel = new ProductViewModel
        {
            EditProduct = prod
        };

        return PartialView(viewModel);
    }

//inside a separate partial view page
@model SimpleAjax.Models.ProductViewModel


@using (Html.BeginForm("Index_AddItem", "Home", FormMethod.Post, new { id = "fid" }))
{
    <div>
        @Html.LabelFor(model => model.EditProduct.Name)
        @Html.EditorFor(model => model.EditProduct.Name)
    </div>

     <div>
        @Html.LabelFor(model => model.EditProduct.Price)
        @Html.EditorFor(model => model.EditProduct.Price)
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
}

now below works as expected, when I have hardcoded IDs:

    $('#btnShowEdit1,#btnShowEdit2,#btnShowEdit3').click(function () {

            $.ajax({
                url: this.href,
                contentType: 'application/html; charset=utf-8',
                type: 'GET',
                success: function (result) {

                    $('#showEditProd').html(result);
                }
            });
        return false;
    });

The above jquery works as desired. The partial view gets loaded on the same page as enumerated list. But obviously I don't want to hardcode variables. I may have x number of #btnShowEdit. I want to utilize a class, correct? So I have ".button_action" class that will enumerate the Id. But when I do that, as below, the link navigates to a separate page.

these go to a separate page, not what I want

$('.button_action').click(function (index) {

          $.ajax({
            url: this.href,
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            success: function (result) {

                $('#showEditProd').html(result);
            }
        });
        return false;
    });

});


//also tried this...

    $('.button_action').each(function (index) {


    $('#btnShowEdit' + index).click(function () {

        $.ajax({
            url: this.href,
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            success: function (result) {

                $('#showEditProd').html(result);
            }
        });
        return false;
    });

});

I know there's gotta be a simple solution.Thanks for your help in advance.

Answer 1

In case anyone else needs the solution to the above... It was too simple to believe.The jquery ajax code does not need an id htmlattribute from the Html.ActionLink. In fact, this extra attribute is what was causing the trouble. The jquery ajax recognizes the id from the "this.href' as that is the route controller along with the id parameter. Therefore I removed the id from htmlattributes in the actionlink. Now it's working as expected.

@Html.ActionLink("Edit", "ShowEdit", "Home", new { id=item.Id } ,new { @class= ".button_action"})

in js file

$('.button_action').click(function (index) {

      $.ajax({
        url: this.href,
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        success: function (result) {

            $('#showEditProd').html(result);
        }
    });
    return false;
});

});

Answer 2

Any specific reason for not using the Ajax HTML-helper?

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx

You can use it as an actionlink, but it is done async and the result can be placed in your showEditProd.

@Ajax.ActionLink("Action", 
                 "Controller", 
                 _YOURID_, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "showEditProd", 
                 OnComplete = "your_js_function();" })

Answer 3

Check this:

$('.button_action').click(function (e) {
    e.preventDefault() // this prevent default behavior for hyperlink on 'click' event