加载中jquery.dialog局部视图 [英] Loading a partial view in jquery.dialog

问题描述

我是一个完全新的MVC和试图创建一个虚拟应用来学习MVC 3。
我曾我的方式，通过音乐商店的例子，现在我试图把它稍微延伸到更实际的应用程序。
有了这个例子，只要你愿意，你将被重定向到创建视图这是很好的任何新项目，但是我想，而不是做一个整版后回来，我想用jquery.dialog打开一个模式弹出，这将允许用户插入一个新项目。

I am a completely new to mvc and trying to create a dummy application to learn mvc 3. I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application. With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.

到目前为止，我有

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

这个问题是局部视图不会通过AJAX加载每次和我真的不知道我应该放置局部视图。 Shoukld它是在共享位置或其他意见的文件夹中？
如何更新控制器类，以应付局部视图？

Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views? How do I update the controller class to cater for the partial view?

很抱歉，如果这些都容易做到，即时通讯3天到MVC：）

Sorry if these are easy to do, im 3 days into mvc :)

推荐答案

尝试是这样的：

<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请求到一个控制器动作这将使该部分：

We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:

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

这篇关于加载中jquery.dialog局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！