ASP.NET MVC | Problem about showing modal dialog u

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

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;
      });
    });
</script>

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
 };
}

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

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
    });
});