JQueryダイアログを部分ビューで表示する

Question

私がここで試しているのは、JQueryテンプレートのデータを部分ビューでJQueryダイアログに読み込むことです。 MVC 3、JQuery、JSONにかなり新しいので、これが正しいかどうかは分かりません。

<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> 

ユーザモデルが持っている非常にシンプルなものです：

私は、このような部分的なビューへの単純な呼び出しを持ってIndex.cshtmlを持っていますこれらの特性。

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()からより良いものに変更してください。