如何在 MVC4 ASP.NET JqueryUI 对话框中显示分部视图

Question

当我在DeskAlert创建页面上时，我希望在对话框中打开一个包含警报模板列表的部分视图。所以我放了一个链接来打开一个 JqueryUI 对话框，我正在尝试将我的模板部分视图与它链接。但。。。我不明白为什么视图没有显示在对话框中。

我已经创建了带有VS 2013助手的控制器/视图。你能给我解释一下这种机械主义吗？

谢谢

路由配置

routes.MapRoute("Index",
"AlertTemplatesModal/Index/",
new { controller ="AlertTemplatesModal",action="Index"},
new[] {"WebAppDeveloppement.Controllers"});

Create.cshtml

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        $('#myDialogContent').dialog("open");
    });
    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        open:function () {
            $.ajax({
                url:"@(Url.RouteUrl("Index"))",
                type:"GET",
                succes:function(data)
                {
                    $('#myDialogContent').html("");
                    $('#myDialogContent').html(data);
                },
                error:function(xhr,ajaxOptions, thrownError){
                    alert("error");
                }
            });
        },
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});
</script>
<div id="myDialogContent"></div>

警报模板模态控制器

private DSdatabaseEntities db = new DSdatabaseEntities();
public ActionResult Index()
{
    var alertTempalte = db.AlertTemplate.Include(a=>a.AlertMode).Include(a=>a.AlertPriority).Include(a=>a.RecipientMap);
    return View(alertTemplate.ToList());
}

Index.cshtml

@model IEnumerable<WebAppDeveloppment.AlertTemplate>
<div id="myDialogContent">
...
</div>

Answer 1

好的，我已经找到了解决方案。你的回答给了我用火虫测试的想法......我可以看到我的错误。我在控制器/操作/视图之间的 url 语法中混淆了。所以我创建了一个特殊操作，一个局部视图，最后，它起作用了。

这个链接帮助我理解：http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html 逻辑，这个：在jquery.dialog中加载分部视图如何调用分部视图。我的解决方案：

Create.cshtml

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        $('#myDialogContent').dialog("open");
    });
    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        open:function () {
            $(this).load("/AlertTemplatesModal/TemplateView/");
        },
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});
</script>
<div id="myDialogContent"></div>

警报模板模态控制器

public ActionResult TemplateView()
{
    ViewBag.AlertTemplateTitle = new SelectList(db.AlertTemplate,"AlertTemplateID","AlertTemplateTitle");
    return PartialView("Index");
}

Answer 2

我已经稍微更改了代码。创建了一个函数来加载div 中的部分视图，并为回调函数创建了一个参数，以便在加载部分视图时，您可以在该div 上应用 jquery 对话框。试一试，让我知道。

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        loadPartialView(function(){
            $('#myDialogContent').dialog("open");
        });
    });
    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});

function loadPartialView(callback){
$.ajax({
    url:"€(Url.RouteUrl("Index")}",
    type:"GET",
    succes:function(data)
    {
        $('#myDialogContent').html("");
        $('#myDialogContent').html(data);
        callback();
    },
    error:function(xhr,ajaxOptions, thrownError){
        alert("error");
    }
});
}
</script>