Open jQuery dialog box on click on Html.ActionLink + MVC4

Question

I have a view that shows list of parties. every party has an ActionLink.

@Html.ActionLink("Edit", "Edit", new { id = 234 })

My action link goes to the edit action and renders an editor view.

The main idea is, on click of the ActionLink, a jQuery dialog box should appear with editor view and any edits in the view should be saved to database.

My problem is, I don't know how open a view in a jQuery dialog. So how would you open a view in a jQuery dialog?

If the same can be achieved without using ActionLink, that is also helpful.

Answer 1

You could have your action return a partial view instead of full view, then read the documentation of the jQuery UI dialog and finally write the necessary code.

Start by giving your anchor a class:

@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })

define a placeholder for your dialog:

<div id="my-dialog"></div>

make sure your controller action is returning a partial view:

public ActionResult Edit(int id)
{ 
    MyViewModel model = ...
    return PartialView(model);    
}

and finally write the javascript to make it live:

<script type="text/javascript">
    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });

        $('.modal').click(function() {
            $('#my-dialog').load(this.href, function() {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>

Needless to say that you need to include the jQuery ui script after jquery as well as the necessary stylesheets.

Answer 2

you can do like this simple

formatter: function (cellvalue, options, rowObject) {
                    var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                    return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name);
                }, sortable: true, align: 'left', width: 200, editable: true