ASP.NET MVC |使用jQuery對話框小部件顯示模態對話框的問題

Question

我對asp.net mvc和jQuery非常新鮮。經過一天的嘗試，我仍然不知道如何在用戶單擊鏈接時使用來自操作的數據（返回JsonResult）來彈出jQuery對話框。

任何建議或指導是欣賞。

謝謝！

Answer 1

Thx for Stuntz & RhinoDevX64的回覆，最後我解決了。

jQuery代碼：

<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" })%> 

操作代碼

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

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 3

1日使用jQuery UI按照自己的，包括CSS和JS文件文檔。

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

第二你真的應該只使用常規的ActionResult和局部視圖（*的.ascx），如果你只是抓住了一些內容; 如果你正在調用數據，我認爲你可能會加載到一個自動完成，這將是完全不同於這種情況。