0

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

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" }))

 {    
  <fieldset>
    <legend>Client Info</legend>

    @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，但我还没有在我的项目中使用它，所以我想知道是否还有其他内容？

提前感谢您的帮助。

更新。为了让我的问题更清楚，我添加了更多信息。

我的主要观点是：

@model CardNumbers.Models.ClientViewModel

   @section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
    }

   <form id="frmClientsSearch">
    <label for="clientNo">Client No: </label>
    <input type="number" name="searchClientNo" class="numericOnly" /><br />
    <label for="clientName">Client Name: </label>
    <input type="search" size="25" value="Please enter the search value"      class="SelectOnEntry"
        name="searchClientName" />

       <input type="button" id="btnClientsSearch" value="Find / Refresh" />
    </form>
    <div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;"    id="ClientsResults">
    <table id="flexClients" style="display: none">
       </table>
    </div>

    <div id="editor" style="visibility:hidden">
       @Html.Partial("_ClientForm", Model);
    </div>

我的 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://www.universalthread.com/Thread%20photos/2013/01562893.jpg

4

2 回答 2

2

如果您想让它变得更简单，只需将您显示的代码放在局部视图中，然后让 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我的示例中使用的显然将在您的主视图中定义：

<div id="someContainerDiv">
    @Html.Partial("Details", Model)
</div>

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

于 2013-01-15T21:51:13.350 回答
0

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

于 2013-01-22T13:59:15.353 回答