我正在使用jQuery动态添加和删除行，现在我希望输入的值使用 ASP.NET 存储到数据库中

本文关键字：ASP NET 数据库 输入 存储 动态 jQuery 添加 删除行 我希望 | 更新日期: 2024-10-30 16:05:31

下面是jQuery的代码，它可以帮助我动态添加和删除行，但现在我想将输入到这些动态行中的数据添加到数据库中，特别是使用 ASP.NET。我对 ASP.NET 没有任何想法和新手。并且有 2 个接受日期的字段。请帮帮我！

$(document).ready(function () {
        var lastChar = 1, newRow;
        get_lastID = function () {
            var id = $('#experience_table tr:last-child td:first-child input').attr("name");
            lastChar = parseInt(id.substr(id.length - 2), 10);
            lastChar = lastChar + 1;
            newRow = "<tr> '
        <td><input type='text'  name='company_name_0" + lastChar + "' maxlength='255' /></td> '
        <td><input type='text' class='datePicker' name='from_0" + lastChar + "'  /></td> '
        <td><input type='text'  class='datePicker' name='to_0" + lastChar + "'  /></td> '
        <td><input type='number' name='Total_exp_0" + lastChar + "' maxlength='11' /></td> '
                <td><input type='button' value='Delete' class = 'del_ExperienceRow' /></td> '
            </tr>"
        }
        $("#add_ExperienceRow").on("click", function () {
            if ($('#experience_table tr').size() <= 9) {
                get_lastID();
                $('#experience_table tbody').append(newRow);
            } else {
                alert("Reached Maximum Rows!");
            };
            $('.datePicker').datepicker();
        });
            $('.datePicker').datepicker();
        $(document).on('click', '.del_ExperienceRow', function () {
            $(this).closest('tr').remove();
            lastChar = lastChar - 2;
        });

        });
    });

我正在使用jQuery动态添加和删除行，现在我希望输入的值使用 ASP.NET 存储到数据库中

您必须创建一个保存按钮，该按钮将所有行和输入的数据存储在数组中，并将数据发送到服务器，如下所示：

function saveRows() {
    var data = []; // Creates an array
    // Create a foreach loop over all rows
    $("#experience_table tr").each(function() { 
        var row = $(this);
        // This adds an element to the array for the current row, containing an 
        // anonymous object with the data of the current row
        data.push({ someData: $(row).find("td.experience").val() }); 
    });
    $.ajax( { ... } ) // Create ajax call to your server (webservice)
}

然后，您将需要在服务器端使用Web服务。这是 ASP.NET 部分。我建议您设置 WCF 服务。在这里查看教程：
http://www.codeproject.com/Articles/627082/How-to-Consume-WCF-Service-using-JavaScript-Proxy

如果您还有其他问题，请随时提问！

下面是如何使用ASP和jQuery发送电子邮件的示例。原理是相同的，因此您将能够很好地适应它。

jQuery 

function sendEmail() {
   $("#email").dialog({
       modal: true,
       width: 550,
       buttons: {
            "Send": function () {
                var btn = document.getElementById("<%=lbSend.ClientID %>");
                if (btn) btn.click();
                $(this).dialog("close");
             },
             Cancel: function () {
                $(this).dialog("close");
             }
          }
        });
        jQuery("#email").parent().appendTo(jQuery("form:first"));//this is key as it makes sure it finds the textboxes within the dialog. Without this, you will insert blank values. 
        }

.ASP

<div class="popUpStyle" title="Send Email" id="email" style="display: none">
     <asp:Label ID="lblTo" runat="server" Text="To: " Font-Bold="true"></asp:Label><asp:Label runat="server" ID="lblSendTo" Text=""></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="lblFrom" Font-Bold="true" runat="server" Text="From: "></asp:Label><asp:Label runat="server" ID="lblSendFrom" Text="Training.Registration@JeffWyler.com"></asp:Label>
     <br />
     <asp:Label ID="lblSubject" Font-Bold="true" runat="server" Text="Subject: "></asp:Label><asp:TextBox ID="tbSubject" runat="server" Width="200px"></asp:TextBox>
     <br />
      <asp:Label ID="lblBody" Font-Bold="true" runat="server" Text="Message:"></asp:Label>
     <br />
     <asp:TextBox ID="tbMessage" runat="server" Width="515px" TextMode="MultiLine" Height="150px"></asp:TextBox>
     <asp:LinkButton ID="lbSend" runat="server" Text="" Width="50px" Font-Size="smaller" OnClick="lbSend_Click"></asp:LinkButton>
 </div>

C# 背后的代码

protected void lbSend_Click(object sender, EventArgs e)
{
    //code to your database
}

所以有了你的，你将不得不稍微改变一下。您必须创建一个调用隐藏"div"的函数。如您所知，在 ASP 标记中，我使用的是 asp 控件，因此我可以从后面的代码调用它们。我还使用没有文本的链接按钮（如果将 visible 设置为 false，则无法触发该按钮）。在我的jQuery中，我创建了自己的"发送"按钮并在div中搜索链接按钮，一旦单击"发送"按钮，就会触发链接按钮事件。就像我之前说的，这是发送电子邮件，因此您的按钮单击事件会有所不同。如果您需要帮助写信给数据库，请告诉我！

希望这有帮助！

相关文章：