Question

我有一个表单，我使用Jquery动态添加行。

请看一下：DEMO

现在我想在SAVE按钮的点击事件上使用Jquery Ajax调用来保存我的数据库中添加的所有行的数据。我被困的地方是......我不确定如何提取所有行的数据并将其发送到web方法。我的意思是它是c＃我可以使用DataTable存储所有行的数据，然后再将它发送到DataBase。我想我应该创建一个由逗号和管道分隔的字符串，每行包含数据并将其发送到webmethod。我不确定它是否是正确的方法以及如何完成（即创建这样的字符串）。

HTML

<table id="field">
    <tbody>
    <tr id="row1" class="row">
        <td> <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select class="myDropDownLisTId"> <input type="text" class="datepicker" /></select></td><td>
            <input type="submit"></input>
        </td>
    </tr>
    </tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>
<button type="button" id="btnsave">SAVE</button>

Answer 1

2条建议：

为了使其与您已有的一样接近，您可以将表格封装在表格标签中，然后您只需提交表单（使用类似jQuery Form plugin的内容通过阿贾克斯）。最棘手的部分是将数据绑定到动作参数。您可以以数组的形式接收它，或者您可以默认循环遍历Request.Form变量的属性。确保为这些字段生成正确的名称。
我认为最简单的方法是让一个JavaScript对象保存你的值，并使用双向绑定从该对象生成表。类似KnockoutJS的东西可以满足您的需求。这样，用户就可以输入表中的数据，您可以将其准备好进行Json序列化并发送到服务器。这是我制作的quick example。

我不推荐这种方法，但是如果你想创建自己的字符串，你可以按照这些方法做点什么：

$("#btnsave").click(function () {
    var result = "";
    $("#field tr").each(function (iRow, row) {
        $("td input", row).each(function (iField, field) {
            result += $(field).val() + ",";
        });
        result = result + "|";
    });
    alert(result);
});

如果用户输入逗号，您将遇到问题。这就是为什么我们使用众所周知的序列化格式。

Answer 2

在保存按钮事件上使用ajax调用... 像这样

$(document).ready(function () {
    $('#reqinfo').click(function () {
       // debugger;
        var emailto = document.getElementById("emailid").value;
        if (emailto != "") {


            $.ajax({

                type: "GET",

url：“/ EmailService1.svc/EmailService1/emaildata?Email=”+ emailto，

                // data: dat,
                Accept: 'application/json',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                //    debugger;


                },
                error: function (result) {
                   // debugger;

                }
            });
        }
        else {
            //your validation message goes here
            return false;
        }
    });
});

并在问题字符串中添加所有数据并将其传输到webservice ..

  url: "/EmailService1.svc/EmailService1/emaildata?Email=" + emailto + "data1=" + data1,

Answer 3

<script type="text/javascript">
var _autoComplCounter = 0;
function initialize3(_id) {
    var input_TO = document.getElementById(_id);
    var options2 = { componentRestrictions: { country: 'ID' } };
    new google.maps.places.Autocomplete(input_TO, options2);
}
google.maps.event.addDomListener(window, 'load', initialize3);

function incrementValue() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

function GetDynamicTextBox(value) {
    var _id = "AutoCompl" + _autoComplCounter;
    _autoComplCounter++;

    return '<input name = "DynamicTextBox"  type="text" id="' + _id + '" value = "' + value + '" onkeypress = "calcRoute();"  />' +
       '<input type="button" class="superbutton orange" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;

    if (document.getElementById('number').value < 3) {
        document.getElementById('number').value = value;
        var div = document.createElement('DIV');
        var _id = "AutoCompl" + _autoComplCounter;
        _autoComplCounter++;
        var ht = '<input name = "DynamicTextBox" type="text" id="' + _id + '" value = "" onkeypress = "calcRoute();" class="clsgetids" for-action="' + _id + '" />' +
       '<input type="button" class="superbutton orange" value="@Resources.SearchOfferRides.btnRemove" onclick = "RemoveTextBox(this); calcRoute();" />';
        div.innerHTML = ht;
        document.getElementById("TextBoxContainer").appendChild(div);
        setTimeout(function () {
            var input_TO = document.getElementById(_id);
            var options2 = { componentRestrictions: { country: 'ID' } };
            new google.maps.places.Autocomplete(input_TO, options2);
        }, 100);
        document.getElementById("TextBoxContainer").appendChild(div);
    }
    else {
        alert('Enter only 3 stop point. !!');
    }
}

function RemoveTextBox(div) {
    //calcStopPointRoute();
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('number').value = value;

    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

function RecreateDynamicTextboxes() {
    var values = eval('<%=Values%>');
    if (values != null) {
        var html = "";
        for (var i = 0; i < values.length; i++) {
            html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
        }
        document.getElementById("TextBoxContainer").innerHTML = html;
    }
}
  //  window.onload = RecreateDynamicTextboxes;
</script>

从文本框中获取值：

  #region stop point
        string[] textboxValues = Request.Form.GetValues("DynamicTextBox");

        if (textboxValues != null)
        {
            for (Int32 i = 0; i < textboxValues.Length; i++)
            {
                if (textboxValues.Length == 1)
                {
                    model.OptionalRoot = textboxValues[0].ToString();
                }
                else if (textboxValues.Length == 2)
                {
                    model.OptionalRoot = textboxValues[0].ToString();
                    model.OptionalRoot2 = textboxValues[1].ToString();
                }
                else if (textboxValues.Length == 3)
                {
                    model.OptionalRoot = textboxValues[0].ToString();
                    model.OptionalRoot2 = textboxValues[1].ToString();
                    model.OptionalRoot3 = textboxValues[2].ToString();
                }
                else
                {
                    model.OptionalRoot = "";
                    model.OptionalRoot2 = "";
                    model.OptionalRoot3 = "";
                }
            }
        }
        #endregion

Answer 4

简答：
javascript中的DataTable等效值为Array of custom object（不完全相同，但我们可以这么说）

或

你推出自己的DataTable js类，它将拥有.NET中DataTable类支持的所有函数和属性

答案很长：
在客户端（aspx）
您定义了一个类MyClass并将所有值存储在该类的对象数组中然后在stingyfying之后将该数组传递给web方法

JSON.stringify(myArray);

在服务器端（代码隐藏）
您只需定义Web方法以接受对象列表List<MyClass>

PS：调用web方法时，Asp.net会自动将json数组转换为List<Object>或Object[]

Loooong回答（整个解决方案）

页面aspx：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="App_Themes/SeaBlue/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function MyClass(title,option,date) {
            this.Title = title;
            this.Option = option;
            this.Date = date;
        }

        function GetJsonData() {
            var myCollection = new Array();

            $(".row").each(function () {
                var curRow = $(this);
                var title = curRow.find(".title").val();
                var option = curRow.find(".myDropDownLisTId").val();
                var date = curRow.find(".datepicker").val();

                var myObj = new MyClass(title, option, date);
                myCollection.push(myObj);
            });

            return JSON.stringify(myCollection);
        }

        function SubmitData() {
            var data = GetJsonData();

            $.ajax({
                url: "testForm.aspx/PostData",
                data: "{ 'myCollection': " + data + " }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function () {
                    alert("Success");
                }
            });
        }

        $(document).ready(function () {
            filldd();
            CreateDP();
            var rowstring = "<tr class='row'><td class='number'></td><td><input type='text' class='title'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td><td><input type='submit'></input></td></tr>";
            $("#addField").click(function (event) {
                $("#field tbody").append(rowstring);
                filldd();
                CreateDP();

                if ($("td").hasClass("number")) {
                    var i = parseInt($(".num:last").text()) + 1;
                    $('.row').last().attr("id", "row" + i);
                    $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
                }
                event.preventDefault();
            });

            $("#deleteField").click(function (event) {
                var lengthRow = $("#field tbody tr").length;
                if (lengthRow > 1)
                    $("#field tbody tr:last").remove();
                event.preventDefault();
            });

            $("#btnsave").click(function () {
                SubmitData();
            });
        });

        function filldd() {
            var data = [
                { id: '0', name: 'test 0' },
                { id: '1', name: 'test 1' },
                { id: '2', name: 'test 2' },
                { id: '3', name: 'test 3' },
                { id: '4', name: 'test 4' },
            ];

            for (i = 0; i < data.length; i++) {
                $(".myDropDownLisTId").last().append(
                    $('<option />', {
                        'value': data[i].id,
                        'name': data[i].name,
                        'text': data[i].name
                    })
                 );
            }
        }

        function CreateDP() {
            $(".datepicker").last().datepicker();
        }

        $(document).on('click', 'input[type="submit"]', function () {
            alert($(this).closest('tr')[0].sectionRowIndex);
            alert($(this).closest('tr').find('.myDropDownLisTId').val());
        });
    </script>
</head>
<body>
    <form id="frmMain" runat="server">
    <table id="field">
        <tbody>
            <tr id="row1" class="row">
                <td>
                    <span class='num'>1</span>
                </td>
                <td>
                    <input type="text" class="title"/>
                </td>
                <td>
                    <select class="myDropDownLisTId">
                    </select>
                    <input type="text" class="datepicker" />
                </td>
                <td>
                    <input type="submit"></input>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" id="addField">
        Add Field</button>
    <button type="button" id="deleteField">
        Delete Field</button>
    <button type="button" id="btnsave">
        SAVE</button>
    </form>
</body>
</html>

代码隐藏：

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

    }

    [WebMethod]
    public static void PostData(List<MyClass> myCollection)
    {
        Console.WriteLine(myCollection.Count);
    }
}

public class MyClass
{
    string title;

    public string Title
    {
        get { return title; }
        set { title = value; }
    }

    string option;

    public string Option
    {
        get { return option; }
        set { option = value; }
    }

    string date;

    public string Date
    {
        get { return date; }
        set { date = value; }
    }
}

希望这有帮助

<强>参考文献：
Json2.js file
stringify method
define a class in js

DataTable在Jquery中等效于存储数据？

4 个答案: