Question

这个问题是以下问题Add JSON data to the view的延续，但不幸的是，这个问题尚未解决。

在我的主视图中，它有一个带有2个控件和flexigrid占位符的表单，我在底部添加了以下内容

<div id="add-edit-dialog" style="display: none" title="Add / Edit Client"> 
    @Html.Partial("_ClientForm", Model)
</div>

flexigrid pluglin在运行时实例化并添加3个按钮：添加，编辑，删除。对于编辑按钮，我需要从服务器获取当前行信息，然后在表单中显示它。对于添加按钮，我不需要去服务器（我认为）。

这是我目前编辑按钮的代码：

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);
            $($dlg).html(html);
        });
        //location.replace(url);
        RunModalDialog("Edit Client: " + ClientName);
    });

因此，它将编辑控制器操作并返回相同的部分视图_ClientForm，并将正确的信息作为模型传递。如果我查看FireBug中返回的响应结果，我可以看到返回的HTML是正确的，并且所有文本框的值都包含正确的信息。

但是，打开的对话框看起来与“添加”按钮的对话框完全相同 - 换句话说，所有表单控件都是空白的。我无法弄清楚出了什么问题以及为什么它没有按照我想要的方式工作。

这就是我对RunModalDialog的所作所为：

var validator = $("#add-edit-form").validate();

var $dlg = $("#add-edit-dialog").dialog({
    autoOpen: false,
    show: "blind",
    closeOnEscape: true,
    resizable: true,
    width: 1200,
    height: 750,
    minHeight: 600,
    minWidth: 950,
    buttons: {
        "Save": function () {

            if ($("#add-edit-form").valid()) {
                // jobPost.setVals(txtId.val(), txtRole.val(), 
                    // txtLocation.val(), txtJobType.val(), 
                    // txtDescription.val());

                $.ajax({
                    type: 'POST',
                    //data: JSON.stringify(clientInformation),
                    url: '/Client/Save',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (result) {
                        // insert new list into grid
                        $('#flexClients').flexAddData(result);
                    }
                });
                $(this).dialog('close');
            } else return false;
        },
        Cancel: function () {
            $(this).dialog("close");
            clearForm();
            if (validator)
                validator.resetForm();
        }
    },
    close: function () {
        clearForm(); 
    },
    open: function () {
        //$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
    }
});

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 {
        $dlg.dialog("open");
    }
}

带有加载（和注释代码）的代码是解决此问题的另一种尝试。那种工作（与信息一起显示的表单），但主客户端视图也重新加载，所以我看到双网格。

您是否看到我应该在代码中更改哪些内容以使其正常工作？

提前多多感谢。

Answer 1

来自MS的Jazzen Chen帮助解决了这个问题。我需要做的就是正确显示数据是将getJSON更改为只获取jquery函数。现在我的表单正确填充了数据，下一个挑战是保存数据。

Answer 2

我发布了一篇博文，其中包含了我迄今为止所拥有的内容 - 希望它可以提供帮助

http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with

从服务器获取数据并显示在编辑表单中

2 个答案: