将动态表单字段添加到数据库

Question

我有一些解决这个问题的想法，但这一定是一个相对常见的事情，我想知道是否有一个“标准”的方法来解决它。

基本上，我在 HTML 页面上有一个表单，它使用 jQuery AJAX 发布到 ASP.NET 页面，然后获取表单字段并将它们放入数据库。

表单本身包含一些标准字段，例如文章标题、文章内容和日期。但是，该表格还允许添加许多作者详细信息，包括作者姓名、作者电子邮件地址、作者年龄。所以在表单上，​​用户填写表单标题和内容字段，并可以添加一个或多个作者，这些字段是使用 jQuery.clone() 动态构建的。

所以作者的数量未知，因此接受表单帖子的 .NET 控件不知道它应该接收哪些字段。

标准表单详细信息被添加到一个称为“文章”的表中。每个作者都被单独添加到不同的表中，称为“作者”。

所以问题是，处理这类事情的最佳方法是什么？

在这里感谢您的任何建议。

编辑：

要添加我最初的想法...首先，我可以用递增的数字命名每个作者表单字段，如下所示：

<fieldset>
  Author 1 name: <input name="name-1" /><br />
  Author 1 email: <input name="email-1" /><br />
  Author 1 age: <input name="age-1" />
</fieldset>
<fieldset>
  Author 2 name: <input name="name-2" /><br />
  Author 2 email: <input name="email-2" /><br />
  Author 2 age: <input name="age-2" />
</fieldset>

还有一个名为“作者数量”的隐藏字段，当 jQuery 脚本添加/删除新作者字段集时，该字段会递增/递减。然后在接收表单帖子的 .NET 代码中，我可以遍历从 0 到 x 的每个表单字段（其中 x 是“作者数”的值。这里的困难是我必须重新索引删除字段集时的每个表单字段，以防用户删除第一个字段集。

我的第二个想法是，我可以使用 jQuery 序列化将表单字段值序列化为单个字符串，然后将该字符串处理回 .NET 代码中的对象。虽然我真的不知道该怎么做，但我相信这是可能的。

在这种情况下人们的建议是什么？

Answer 1

由于您无法在回发时读取动态表，因此我通常将所有行读取到对象中，然后通过 WebMethod 或 WCF 服务将它们传递回服务器。我对 Ajax 表单和传统回发表单都使用了相同的技术。

以下是我所做工作的简要总结。

HTML

<table class="mediumTable" id="PartTable">
    <thead>
        <tr class="rowHeader">
            <th>Part </th>
            <th>Price </th>
            <th>UOM </th>
            <th>Apply Date </th>
            <th>Remarks </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Part12345</td>
            <td>0.298</td>
            <td>1</td>
            <td>5/31/2012</td>
            <td></td>
        </tr>
    </tbody>
</table>

JavaScript

    // Read a row in View Mode into a Cross Object
    function GetRowAsObject(rowNum) {
        var row = $('#PartTable tbody tr').eq(rowNum);

        var cross = {};

        cross.Part = row.find('td:eq(1)').text();
        cross.Price = row.find('td:eq(2)').text();
        cross.UOM = row.find('td:eq(3)').text();
        cross.ApplyDate = row.find('td:eq(4)').text();
        cross.Remarks = row.find('td:eq(5)').text();

        return cross;
    }

    // Read all rows into Cross Object Array
    function GetAllViewRowsAsCrossObjects() {
        var parts = [];

        $('#PartTable tbody tr').each(function (index, value) {
            var part = GetRowAsObject(index);
            parts.push(row);
        });

        return parts;
    }

    // Post all rows to the server and put into Cache
    function PostTable() {
        var batchId = getParameterByName('id');
        var jsonRequest = { crosses: GetAllViewRowsAsCrossObjects(), batchId: batchId};

        $.ajax({
            type: 'POST',
            url: 'PartsForm.aspx/SaveParts',
            data: JSON.stringify(jsonRequest),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function (data, text) {
                // Do Something
            },
            error:function (request, status, error){
                // Do Something
            } 
        });

代码背后

public partial class Part3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    /// <summary>
    /// This is a Ajax WebMethod that can be called via jQuery.
    /// </summary>
    /// <param name="crosses">Array of Cross Objects</param>
    /// <param name="batchId">Batch number to apply to all parts</param>
    /// <returns></returns>
    [WebMethod]
    public static bool SaveParts(List<Cross> crosses, int batchId)
    {
        // Save Parts to the DB

        return true;
    }
}

// Data Transfer Object, must match the object sent from the client
public class Cross
{
    public string Part { get; set; }
    public double Price { get; set; }
    public int UOM { get; set; }
    public DateTime ApplyDate { get; set; }
    public string Remarks { get; set; }
}