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.

Darin Dimitrov · Accepted Answer · 2013-07-12 10:54:32Z

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.

I found this post helpful as well. However, note that it is important to ensure a different class name than simply 'modal' if using libraries such as bootstrap, for you'll find yourself losing sanity. This happened to me, and upon changing the name (I include bootstrap), the solution works.

Aravind Kb · Accepted Answer · 2015-05-08 12:17:32Z

1

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

answered May 8, 2015 at 12:17

Aravind Kb

352 silver badges11 bronze badges

Comments

Mr Lister · Accepted Answer · 2014-01-16 13:14:58Z

You don't need to do all that messing around, try something like:

@Html.ActionLink("Open Dialog", null, null, null, 
      new { data_role = "button", data_inline = true, data_rel = "dialog", 
            data_transition = "pop", href="#dialogId" })

The key cheat here is the href attribute.

Also bear in mind you can add the dialog to your desired page as follows:

@section dialogPages {
    &lt;div data-role="page" id="dialogId"&gt;
        &lt;div data-role="header"&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
       &lt;/div&gt;
        &lt;div data-role="footer"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
}

And then include the following in your _Layout.cshtml:

@if (IsSectionDefined("dialogPages"))
{
    @RenderSection("dialogPages")
}

Works for me :)

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related