Question

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

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

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

UserList.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");
}

N.B：请将函数名称从Call()更改为更好的内容。

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

1 个答案: