如何在视图中使用JSON数据？

我现在在flexigrid的Edit按钮中使用以下代码：

var url = '/Client/Details/' + id ; $.getJSON(url, function (data) { // setFormControls(data.Id, data.Role, data.Location, data.JobType, data.Description); alert(data); }); //location.replace(url); RunModalDialog("Edit Client: " + ClientName); 

我的表格有点像这样复杂的观点

 @model CardNumbers.Models.ClientViewModel @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" })) { 
 
Client Info
 @Html.ValidationSummary(true) @Html.HiddenFor(m => m.ClientId) @Html.EditorFor(m => m.Number, EditorTemplate.TextBox) @Html.EditorFor(m => m.Name, EditorTemplate.TextBox) @Html.EditorFor(m => m.Client.Address, EditorTemplate.EditBox) ... 

其中EditorFor是一个自定义的EditorFor。 因此，将返回的json数据手动转换为表单属性会有点困难。 我想知道可能有一些简单的方法来做这种翻译吗？ 我查看了knockout.js，但我还没有在我的项目中使用它，所以我想知道是否还有其他的东西？

在此先感谢您的帮助。

UPDATE。 只是为了让我的问题更清楚，我正在添加更多信息。

我的主要观点是：

 @model CardNumbers.Models.ClientViewModel @section scripts {  } 
 Client No:  
 Client Name:    
 
  
 
 @Html.Partial("_ClientForm", Model);  

我的js文件有以下内容：

  var $dlg = $("#sform").dialog({ autoOpen: false, show: "blind", closeOnEscape: true, resizable: true, width: 1200, height: 750, minHeight: 600, minWidth: 950 }); function RunModalDialog(title, url) { if (title) $dlg.dialog("option", {"title": title }); if (url) { $dlg.load(url).dialog("option", { "title": title }).dialog("open"); } //$dlg.load(url, function () { // var validator = $("#sform").validate(); // if (validator) // validator.resetForm(); // $dlg.dialog("option", { "title": title }).dialog("open"); //}); else { var validator = $("#sform").validate(); if (validator) validator.resetForm(); $dlg.dialog("open"); } } function add(com, grid) { $('#fntype').val('Add'); var url = '/Client/Add/' //location.replace(url); RunModalDialog("Create New Client"); // clearForm(); } function edit(com, grid) { $('.trSelected', grid).each(function () { var id = $(this).attr('id'); id = id.substring(id.lastIndexOf('row') + 3); currentId = id; $('#fntype').val('Edit'); var ClientName; ClientName =$('.trSelected td:eq(2)').text(); var url = '/Client/Edit/' + id ; $.getJSON(url, function (html) { // setFormControls(data.Id, data.Role, data.Location, data.JobType, data.Description); // alert(data); $('#editor').html(html); }); //location.replace(url); RunModalDialog("Edit Client: " + ClientName); }); } 

现在我看到添加和编辑的相同行为，例如编辑不显示数据。 我现在看到了http://sofzh.miximages.com/jquery/01562893.jpg

Answer 1

如果您想更轻松，只需将您显示的代码放在局部视图中，然后让Details控制器操作返回此局部视图。 现在，当您使用AJAX调用此操作时，它将返回您可以在DOM中直接替换的部分的更新内容。 这样您就不必费心将JSON值绑定到表单元素。

 public ActionResult Details(int id) { ClientViewModel model = ... return PartialView(model); } 

然后：

 var url = '/Client/Details/' + id ; $.getJSON(url, function (html) { $('#someContainerDiv').html(html); }); 

我的示例中使用的#someContainerDiv显然会在主视图中定义：

 
 @Html.Partial("Details", Model)  

然后，部分将包含您在问题中显示的表单。

Answer 2

随着Jazzen Chen的帮助，我们解决了这个问题。 我需要改变的是在上面使用get而不是getJSON。 现在我的表单正确地显示了数据。