0

这个问题是以下问题的延续，将JSON 数据添加到视图中，不幸的是尚未解决。

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

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

flexigrid 插件在运行时实例化并添加 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");
    }
}

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

你知道我应该在我的代码中改变什么来让这个东西工作吗？

提前非常感谢。

4

2 回答 2

0

我发布了一篇博客文章，其中包含到目前为止的内容 - 希望它可能会有所帮助

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

于 2013-01-28T14:15:56.747 回答
0

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

于 2013-01-22T13:51:55.320 回答