在局部视图的 JQuery 对话框中显示 JQuery 模板

Question

我在这里尝试的是在局部视图的 JQuery 对话框中加载带有数据的 JQuery 模板。 我对 MVC 3、JQuery 和 JSON 很陌生，所以不太确定这是否正确。

我有一个 Index.cshtml，我可以像这样简单地调用局部视图：

<div id="userList">
@Html.Partial("UserList", new Mvc3Application.Models.User{ Name = "ABC"})
</div>

用户列表.cshtml

@model Mvc3Application.Models.User

@{
ViewBag.Title = "UserList";
}

<div id="edit-popup">
<input type="button" onclick="Call();" id="bnt" /> 
</div>

<script id="edit-template" type="text/x-jquery-tmpl">

<input id="edit-id" type="hidden" value="@Model.Id" />
<label>Name</label><input id="edit-name" type="text" value="@Model.Name" />

</script>

<script type="text/javascript">
 function Call() {

var data = {};
data.Id = "1";
data.Name = "XXX";

alert(data.Name);

$("#edit-popup").html($("#edit-template").render(data));

$("#edit-popup").dialog({
modal: true,
autoOpen: true
});
}
</script>

用户模型是具有这些属性的非常简单的模型。

    public string Id { get; set; }
    public string Name { get; set; }

谁能指出我在这里出错的地方。我需要 JQuery 对话框与模板一起显示其中的数据。

谢谢。

Answer 1

代码不起作用，因为您在单击调用按钮时定义了 jQuery UI 对话框。这是完全错误的。理想情况下，您应该这样做。

在onDOMReady 等事件上定义对话框，然后在单击按钮时打开对话框。

$(document).ready(function() {
    //render the dialog
    $("#edit-popup").dialog({
        modal: true,
        autoOpen: false
    });
});

function Call() {

    var data = {};
    data.Id = "1";
    data.Name = "XXX";

    alert(data.Name);

    $("#edit-popup").html($("#edit-template").render(data));
    //now open the dialog
    $("#edit-popup").dialog("open");
}​

注意：请将函数名称从 Call() 更改为更好的名称。