JQuery 对话框 - 访问部分表单值答案

【问题标题】：JQuery dialog - accessing partial form valuesJQuery 对话框 - 访问部分表单值
【发布时间】：2011-05-13 07:41:33
【问题描述】：

您好，我加载了一个 JQuery 对话框，其中包含一个带有（目前）一个输入字段的表单。

我正在使用 MVC 3 和 JsonValueProviderFactory 来支持将 JSON 传递给我的操作方法。但我无法访问我的表单字段，因为对话框正在加载部分内容。

有谁知道用于访问加载到对话框中的表单字段的 JQuery。对话框代码是：

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                $.ajax({
                    url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });

如您所见，我使用 JSON.stringify(data) 但尚未定义数据，因为我需要从表单值构造类型。顺便说一句，当我这样做时它可以工作，因为数据变量代表我的操作方法接收到的类型，但是我想从表单字段构造它

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                var data = { Name: "Blah" }; 

                $.ajax({
                    url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(test),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });

任何人都可以提供任何帮助将不胜感激。

【问题讨论】：

标签： jquery json forms dialog

【解决方案1】：

好的，如何在 DOM 上执行，而不显示表单，例如：

var clone =  $('form .partial').clone().wrap('<form />').parent();    
var data = clone.serialize();
clone.remove();//remove the clone from the dom, dispose of it as soon as we gathered the data.
//this will stop any ID duplication as @redsquare pointed out.

$.ajax({ 
   url: '[url]',
   'data':data,
   //...success,error, type, etc ... 
})

【讨论】：

【解决方案2】：

我建议您在加载到对话框中的部分中创建一个表单标签。然后，您可以使用 jquery serialize 方法创建帖子值以发送到您的操作方法。

例如

var data = $('#formId').serialize();

【讨论】：

感谢您的建议，但这并不能解决问题。我最初是这样做的，编写了一个自定义模型绑定器来获取表单集合并从表单集合创建我的类型。但它没有用。模型活页夹没有触发。应该有吗？成功地失败了，我去了上面的 JSON 实现。还有什么想法吗？
@user287079 ASP.NET MVC 3 现在可以自动将传入的 JSON post 值绑定到 .NET 类型，您使用的是 mvc3 吗？如果您使用 2，那么您必须编写模型绑定器以将 json 序列化为 .NET 类型 - 请参阅 stackoverflow.com/questions/560575/…
谢谢，是的，我开始使用 MVC 3 和 JSON 值提供程序，但是，在对话框中查找表单值、构造类型、转换为 JSON、验证、并解决表格清理等。最后我们选择了一些肮脏的把戏，我不喜欢它，但它让我们现在开始行动。不过感谢您的建议。
好的，在 DOM 上做这件事怎么样，而不显示表单，例如：$('form .partial').clone().wrap('<form />').parent().serialize() 不确定这会起作用，但你明白要点了吗？
@val - 但你最终会得到重复的 id 等（如果你使用 id）。