Question

在下面的代码中，我有带有文本框和下拉列表的html表，我正在动态添加新行，我想使用ajax存储所有值，但是当我单击“提交”按钮时，行会消失。请帮我解决这个问题。

使用Javascript：

function MyFunction() {
    $.ajax({
        type: "POST",
        url: "New.aspx/InsertData",
        data: "{'Quantity':'" + $("#<%=txtQty.ClientID%>").val() + "','ProductID':'" + $("#<%=ddlProduct.ClientID%>").val() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: "true",
        cache: "false",
        success: function(msg) {
            alert("Success");
            // On success                 
        },
        Error: function(x, e) {
            alert("Fail");
            // On Error
        }
    });
}

HTML：

<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<table id="dataTable" width="350px" border="1" runat="server">
    <tr>
        <td>
            <input id="checkbox" type="checkbox" name="chk" runat="server" />
        </td>
        <td>
            <input type="text" name="txt" id="txtQty" runat="server" />
        </td>
        <td>
            <asp:DropDownList ID="ddlProduct" runat="server" Style="width: 100%; height:23px"></asp:DropDownList>


        </td>
    </tr>
</table>

<asp:Button ID="Button1" Text="Save New" type="submit" OnClientClick="MyFunction()" runat="server"></asp:Button>

C＃：

[WebMethod]
public static void InsertData(string Quantity, string ProductID)
{
        MastersClient Uinsert = new MastersClient();


        Dictionary<string, string> UnitVal = new Dictionary<string, string>();
        UnitVal.Add("Quantity", Quantity.ToString());
        UnitVal.Add("Product", ProductID.ToString());

        Uinsert.InsertUnitTypeDetails(UnitVal); 
}

Answer 1

试试这个 -

<asp:Button ID="Button1" Text="Save New" type="submit" ClientIDMode="Static" runat="server"></asp:Button>

像这样的JavaScript-

 $(function () {
       $("#Button1").click(function (event) {

            // Prevents Form Submission as you want to save data via AJAX
            event.preventDefault();

            $.ajax({
                type: "POST",
                url: "New.aspx/InsertData",
                data: "{'Quantity':'" + $("#<%=txtQty.ClientID%>").val() + "','ProductID':'" + $("#<%=ddlProduct.ClientID%>").val() + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               async: "true",
               cache: "false",
               success: function (msg) {
                   alert("Success");
                   // On success                 
               },
               Error: function (x, e) {
                   alert("Fail");
                   // On Error
               }
           });
       });
   })

并确保按动态控制ID提取动态数据 -

data: "{'Quantity':'" + $("#<%=txtQty.ClientID%>").val() + "','ProductID':'" + $("#<%=ddlProduct.ClientID%>").val() + "'}",

Answer 2

尝试像这样的java脚本。这将在表中存储所有数据行。

$("#Button1").click(function (event) {

            // Prevents Form Submission as you want to save data via AJAX
            event.preventDefault();

            // loop each data row and send insert request
            $("#dataTable tbody > tr").each(function () {

                var quantity = $(this).find("input[id='<%=txtQty.ClientID%>']").val();
                var productID = $(this).find("select[id='<%=ddlProduct.ClientID%>']").val();

                $.ajax({
                    type: "POST",
                    url: "New.aspx/InsertData",
                    data: "{'Quantity':'" + quantity + "','ProductID':'" + productID + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: "true",
                    cache: "false",
                    success: function (msg) {
                        alert("Success");
                        // On success                 
                    },
                    Error: function (x, e) {
                        alert("Fail");
                        // On Error
                    }
                        });
            });
        });

将动态添加的行插入数据库

2 个答案: