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

asp.net-mvc-4, jquery, razor

Solution

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.

Problem

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.

Original source