1

我希望将各种 MVC 表单动态加载到页面上的任意面板中，但在回发更改时保持当前 URL（即不离开父页面）。

为了方便 MVC 创作和验证，我需要每个表单都像在自己的页面上一样工作，但在提交后不会在子表单页面上结束。

负载的硬连线示例（在实际版本中，目标是数据驱动的）可能是：

that.element.children(".tilepanel").click(function () {
    $(this).load('/form/personaldetails .main-content');
});

这会从 views/form/personaldetails.cshtml 中提取.main-content部分，包括标题和表单，并将其插入到单击的面板中。

不幸的是，表单提交的基本行为要么尝试回发到当前控制器（它不知道PersonalDetails模型），要么回发到controllers/formscontroller.cs（到PersonalDetails方法）并在views/form/personaldetails.cshtml页面上结束。

我愿意接受任何建议（更新面板、服务器端重定向、JQuery 回发、切换到 SPA 模型等等），但我正在寻找不需要对单个页面进行重大更改并停止当前页面更改的最优雅的解决方案.

可能的解决方案 #1（Ajax 帖子） - 这有效：

$(this).load('/form/personaldetails .main-content', function () {
    _connectFormSubmit($(this), '/form/personaldetails');
});

_connectFormSubmit: function (panel, url) {
    panel.find('form').submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: url,
            type: "post",
            data: panel.find('form').serialize(),
            success: function (data, status, xhr) {
                panel.html($(data).find('.main-content'));
                _connectFormSubmit(panel, url);
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });
        return false;
    });

我用这种方法遇到的最初问题是，当每个帖子上的整个表单被替换时，需要重新连接提交处理程序，所以它有点递归。在有人想出更好的方法之前，这个方法有效并且会一直有效。如果没有人提出更好的方法，我会将其移至答案。

为半对象声明道歉，但我不得不从一个工作项目中删除它

4

1 回答 1

0

这是一个完整的解决方案，允许您将来自其他 MVC 4 页面的表单动态插入到面板中，并在这些页面上执行任何内联 Javascript。

只需致电：

_loadFormIntoPanel(panel, url, true);

将表单获取（或发布）到面板（例如 div）中的功能：

_loadFormIntoPanel: function(panel, url, getit){
    var that = this;
    var re = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
    var scripts = "";
    var match;

    // Do an async AJAX get or post
    $.ajax({
        url: url,
        type: getit ? "get" : "post",
        data: getit ? null : panel.find('form').serialize(),
        success: function (data, status, xhr) {
            while (match = re.exec(data)) {
                if (match[1] != "") {
                    scripts += match[0];
                }
            }

            // Replace the entire panel
            panel.html($(data).find('.main-content'));

            // Add the scripts - will evaluate immediately
            panel.append(scripts);

            // Connect the post of the new form back to here
            panel.find('form').submit(function (event) {
                event.preventDefault();
                that._loadFormIntoPanel(panel, url, false);
            });
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });
}

这代表了一整天的研究、试验和错误，所以如果你使用它，请注明来源:)

于 2013-04-23T09:02:25.497 回答