在jquery.dialog中加载一个局部视图

我是一个全新的mvc，并试图创build一个虚拟的应用程序来学习mvc 3.我已经通过音乐商店的例子，现在我试图将其稍微扩展到一个更真实的世界的应用程序的方式。 随着例子，每当你想任何新的项目，你被redirect到创build视图这是罚款，但我希望而不是做一个完整的页面回发我想使用jquery.dialog打开一个模式popup，这将允许用户插入一个新的项目。

到目前为止我有

<script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: "hi there", modal: true, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { $('#dialog').dialog('open'); });}); </script> <div id="dialog" title="Create Album" style="overflow: hidden;"> @Html.Partial("_CreateAlbumPartial")</div> 

这个问题是每次加载的partial view不是通过ajax，我真的不知道应该放置哪个部分视图。 Shoukld它是在共享位置还是在与其他视图的文件夹？ 如何更新控制器类来迎合局部视图？

对不起，如果这些很容易做到，即时通讯3天进入MVC 🙂

Answer 1

尝试这样的事情：

 <script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: 'hi there', modal: true, open: function(event, ui) { //Load the CreateAlbumPartial action which will return // the partial view _CreateAlbumPartial $(this).load("@Url.Action("CreateAlbumPartial")"); }, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { $('#dialog').dialog('open'); }); }); </script> <div id="dialog" title="Create Album" style="overflow: hidden;"> 

我们使用了打开对话框时触发的open函数，在这里我们向一个控制器动作发送一个AJAX请求，控制器动作将返回部分：

 public ActionResult CreateAlbumPartial() { return View("_CreateAlbumPartial"); } 

Answer 2

为了提高Darin答案，我们可以在button点击事件中移动div加载代码。 这样，对话框中的所有位置的algorithm都在新文本上工作，所以对话框被正确放置。

 <script type="text/javascript"> $(function () { $('#dialog').dialog({ autoOpen: false, width: 400, resizable: false, title: 'hi there', modal: true, buttons: { "Close": function () { $(this).dialog("close"); } } }); $('#my-button').click(function () { //Load the CreateAlbumPartial action which will return // the partial view _CreateAlbumPartial $('#dialog').load("@Url.Action("CreateAlbumPartial")", function (response, status, xhr) { $('#dialog').dialog('open'); }); }); }); </script> <div id="dialog" title="Create Album" style="overflow: hidden;">