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>

还有一个名为'authors-of-authors'的隐藏字段，当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; }
}

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

1 个答案: