mvc4.0 html.actionlink comfired,MVC 4 Bootstrap Modal Edit \\ Detail

I think that I have a solution to your problem. To make your MVC application work as you want it to you should make some changes to the code you provided:

1. Add a div representing a modal for editing an item at the bottom of your layout page:

Notice that this modal is strictly connected to the controller action responsible for editing an EquipmentClass item.

2. Add a jQuery function to your custom javaScript:

function showModal(modalContainerId, modalBodyId, id) {

var url = $(modalContainerId).data('url');

$.get(url, { id: id }, function (data) {

$(modalBodyId).html(data);

$(modalContainerId).modal('show');

});

}

As you can see this function takes id as one of its parameters. In general its purpose is to replace the empty modal body with what we will put in a separate partial view and than display whole container as a modal page.

3. Put your modal div in a separate partial view, and call it Edit (has to be the same as your controller action name). You will have to change your Edit partial name to sth else, for example EditBody.

The Edit partial view should now look sth like this:

@model EquipmentClass

×

Modal header

@Html.Partial("EditBody", Model)

Close

Save changes

4. Change the controller action so that it returns the partial view created in the previous step:

public PartialViewResult Edit(int id)

{

return PartialView(equipmentclassRepository.Find(id));

}

5. Change the edit 'a' anchor so that it calls created jQuery function:

@model IEnumerable

....

@foreach (var item in Model)

{

@item.ClassId

@item.ClassName

}

This way each time an 'a' anchor with edit icon is clicked the showModal function (with related id being passed) is fired and a bootstrap modal with related data is displayed.

I'm sure there is a better way to do it, but this way worked for me just fine :)

Hope this helps you a bit :)