0

我在这里尝试的是在局部视图的 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 对话框与模板一起显示其中的数据。

谢谢。

4

1 回答 1

0

该代码将不起作用，因为您在单击调用按钮时正在定义 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()更好的名称。

于 2012-04-29T09:46:20.343 回答