Question

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

我已经使用VS 2013助手创建了Controller / View。你能解释一下这种机制吗？

由于

RouteConfig

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>

AlertTemplatesModalController

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

好的，我找到了解决方案。你的回复给了我用Firebug测试的想法......我可以看到我的错误。我在Controller / Action / View之间的url语法中混淆了。所以我创建了一个特殊的动作，一个部分视图，最后，它起作用了。

这个链接可以帮助我理解：http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html逻辑，这一个：Loading a partial view in 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>

AlertTemplatesModalController

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>

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

2 个答案: