如何使用JSON数据的看法？ [英] How to use JSON data in a view?

问题描述

我现在使用以下在flexigrid我的编辑按钮code：

I am using now the following code in my Edit button in the 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);

和我的形式是这样一个有点复杂视图

And my form is a bit complex view like this

@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但我没有在我的项目（​​但）使用它，所以我想知道，如果有什么事吗？

where EditorFor is a custom EditorFor. So, it will be a bit hard to manually translate returned json data into forms properties. I am wondering may be there is some simple method to do this kind of translation? I looked into knockout.js but I am not using it in my project (yet), so I am wondering if there is anything else?

预先感谢帮助。

更新。只是为了让我的问题更清楚，我增加了一点信息。

UPDATE. Just to make my question clearer I am adding a bit more info.

我的主要观点是：

@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文件有以下几点：

And my js file has the following:

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

    }

而现在我看到添加和编辑，例如相同的行为编辑不显示的数据。

And now I see the same behavior for Add and Edit, e.g. Edit does not show data.

推荐答案

如果你想让它更简单，只需把code你在一个局部视图显示，然后让详情控制器动作返回这个局部视图。现在，当你调用这个动作与AJAX它将返回部分的更新内容，你可以直接在DOM替换。这样，您就不需要用JSON值绑定到你的表单元素困扰着。

If you want to make it easier, simply put the code you have shown in a partial view and then have the Details controller action return this partial view. Now when you invoke this action with AJAX it will return the updated contents of the partial that you could directly replace in your DOM. This way you don't need to be bothering with binding the JSON values to your form elements.

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

和则：

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

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

#someContainerDiv used in my example will obviously be defined in your main view:

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

的部分，然后将包含你已经在你的问题中所示的形式。

The partial will then contain the form you have shown in your question.

这篇关于如何使用JSON数据的看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！