如何使用JSON数据的看法?(How to use JSON data in a view?)

2019-08-07 00:24发布

我现在使用下面的代码在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但我没有在我的项目(还)使用它,所以我想知道,如果有什么事吗?

预先感谢帮助。

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

我的主要观点是:

@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

Answer 1:

如果你想更轻松,简单地说你在一个局部视图中显示的代码,然后有详细的控制器动作返回这个局部视图。 现在,当你调用这个动作与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>

这有限的必然后包含你已经在你的问题所示的形式。



Answer 2:

随着Jazzen陈帮我们解决了这个问题。 所有我需要改变的就是用得到的,而不是在的getJSON以上。 现在我的表格显示正确的数据。



文章来源: How to use JSON data in a view?