ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget

Question

I am very fresh to asp.net mvc and jQuery. After one day trying, I still don't know how to pop up a jQuery dialog using data from a action(return JsonResult) while user click a link.

Any suggest or guideline is appreciate.

Thanks!

Answer 1

var ph = $("#idOfPlaceHolderInPage");
ph.load(/Controller/SomeActionWhichReturnsPartialView, function() {
    // this callback will be called after your partial view loaded into placeholder
    ph.dialog({
        // pass options here to customize dialog
    });
});

Answer 2

1st use jQuery UI follow their documentation for including the css and js files.

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   $(document).ready(function(){
     $("#idOfModalPlaceholder").dialog({autoOpen: false, title:"MODAL TITLE"});
   });

  function OpenModalGetContent(){
        $("#idOfModalPlaceHolder").load("/Controller/View");
             $("#idOfModalPlaceHolder").dialog('open');
        }
</script>
<a href="#" onclick="OpenModalGetContent()">CLICK HERE FOR MODAL</a>

2nd You should really just use a regular ActionResult and a Partial View (*.ascx), if you are just grabbing some content; if you are calling data I presume you may be loading into an autocomplete which would be completely different than this scenario.

Answer 3

Thx for Stuntz & RhinoDevX64 's reply, finally I work it out.

jQuery Code:

<script type="text/javascript">
    $(function() {
        $('.newsitem').click(function() {
            var $thisLink = $(this);

            $('#dialog').empty();

            $.getJSON($thisLink.attr("href"), function(data) {
                $('#dialog').html(data.content);

                $("#dialog").dialog({
                    autoOpen: false,
                    title: data.title,
                    bgiframe: true,
                    modal: true,
                    height: 450,
                    width: 540,
                    buttons: {
                        '关闭': function() {
                            $(this).dialog('close');
                        }
                    }
                });

                $('#dialog').dialog('open');
            });

            return false;
        });
    });

ActionLink

<%= Html.ActionLink(item.Title, "GetByJs", "Article", new { id = item.ID }, new { @class = "newsitem" })%>

Action Code

public ActionResult GetByJs(Guid id)
    {
        var item = Article.SingleOrDefault(a => a.ID == id && a.AtFront == true);

        var jsonData = new { title = item.Title, content = item.BodyContent };

        return new JsonResult
        {
            Data = jsonData
        };
    }