在 ASP.NET Web 表单中一般添加控件并发布到服务器答案

【问题标题】：Generically add controls and post to server in ASP.NET web forms在 ASP.NET Web 表单中一般添加控件并发布到服务器
【发布时间】：2014-02-16 10:05:28
【问题描述】：

我有一种情况，用户必须在一个订单中输入多个订单行。可以是 1，也可以是 100。应通过单击小 (+) 号来添加更多订单行，这会在没有回发的情况下即时添加更多文本框。

我仅限于 ASP.NET 网络表单，最新版本。

我的初始代码：

我曾希望我能写出这样的脚本：

<script>
    var count = 0;
    $(document).ready(function() {
        $('#moreBtn').click(function() {
            addNewControl();
        });
    });

    function addNewControl() {

        var orderLineDivId = "orderlinesDiv" + count;
        var orderLineTitleId = "orderlines_title" + count;
        var orderLineValueId = "orderlines_value" + count;

        var parent = $('#<%=OrderLinesPnl.ClientID %>');

        var newCtl = '<div id="'+orderLineDivId+'">' +
            '<div id="' + orderLineTitleId + '"><input type="text" /></div>' +
            '<div id="' + orderLineValueId + '"><input type="text" /></div>' +
            '</div>';

        parent.append(newCtl);
    }

</script>

然后是后面的代码：

OrderLinesPnl.FindControl("orderlinesDiv1");

不过FindControl好像需要找个控件，我加了简单的HTML元素。

我的代码：

   <h3>Orderlines</h3>

    <a id="moreBtn" href="#">(+)</a>

    <asp:Panel runat="server" ID="OrderLinesPnl">

    </asp:Panel>

    <asp:Button runat="server" ID="SubmitBtn" Text="Create product" OnClick="SubmitBtn_Click"/>

所以基本上：在服务器端，我需要一种方法来迭代所有添加的控件，并检索它们的内容。

编辑：我的工作代码

<script>
        var count = 0;
        $(document).ready(function() {
            $('#moreBtn').click(function() {
                addNewControl();
            });
        });

        function addNewControl() {

            var orderLineDivId = "orderlinesDiv" + count;
            var orderLineTitleId = "orderlines_title" + count;
            var orderLineValueId = "orderlines_value" + count;

            var parent = $('#<%=OrderLinesPnl.ClientID %>');

            var newCtl = '<div id="'+orderLineDivId+'">' +
                '<div><input id="' + orderLineTitleId + '" name="' + orderLineTitleId + '" type="text" /></div>' +
                '<div><input id="' + orderLineValueId + '" name="' + orderLineValueId + '" type="text" /></div>' +
                '</div>';

            parent.append(newCtl);
            count++;
        }

    </script>

然后我可以从this.Request.Form;获取值

【问题讨论】：

标签： c# asp.net webforms postback

【解决方案1】：

无需映射到不存在的控件，您只需阅读裸露的 POST：

this.Request.Form

这为您提供了一个可以迭代的低级键值集合。 Web 表单的唯一小问题是 Web 表单在安全性方面是个偏执狂，发布到不存在的控件可能会引发验证异常。只需关闭页面验证或编写自定义请求验证器：

http://msdn.microsoft.com/en-us/library/system.web.util.requestvalidator(v=vs.110).aspx

编辑：至于您的评论，您的控件缺少 name 属性，因此它们的值不会发送到服务器。只是让他们有名字。

【讨论】：

嗯，我在 POST 中没有看到我动态添加的输入控件，因为它是 Web 表单？
@LarsHoldgaard：POST 中不包含缺少 name 属性的控件，这就是浏览器的工作方式。这与asp.net 无关。您的控件似乎有 id 而不是名称。
我关闭了验证，给了他们一个名字，但他们仍然没有出现在 'this.Request.Form' 中。有过滤器吗？
你给输入或 div 命名了吗？
不，我是个白痴，我应该感到难过。谢谢！现在一切正常

【解决方案2】：

在您的情况下，我建议您将要发送到服务器的所有值放入 json 中，然后使用 Ajax 将它们发送到您在 Code Behind 中的函数。

您可以像下面这样序列化表单数据：

 var frm = $(document.myform);
 var data = JSON.stringify(frm.serializeArray());

您将发布的网址将是

url: "Default.aspx/OnSubmit"

在后面的代码中，您必须将函数装饰为 Web 方法，以便 Ajax 发布到此函数。

    [WebMethod]
    public static string OnSubmit(string datafilds)
    {
        //parse the json
        //save to the database
        return "OK";
    }

【讨论】：