Показать шаблон JQuery в диалоговом окне JQuery в частичном представлении

Question

Что я здесь делаю, это загрузить JQuery-шаблон с данными в диалоговом окне JQuery в частичном представлении. Im совершенно новый для 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() к чему-то лучшему.