Open jQuery dialog box on click on Html.ActionLink

问题:

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.

回答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.

回答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

回答3:

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 {
    <div data-role="page" id="dialogId">
        <div data-role="header">
        </div>
        <div data-role="content">
       </div>
        <div data-role="footer">
       </div>
    </div>
}

And then include the following in your _Layout.cshtml:

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

Works for me :)