通过JS到服务器端传递在客户端创建的HTML元素值(ASP.Net)

时间:2015-10-04 11:42:57

标签: javascript jquery html asp.net twitter-bootstrap

我使用ASP.NET和Bootstrap来创建网站。

在.APSX HTML文件中我有一个 JavaScript函数,它将额外的行添加到包含TextAreas的HTML表

现在的问题是 - 如何处理服务器端新创建的Rows中的TextArea数据?

正如我所研究的那样 - 客户端通过JavaScript动态创建的任何内容都不能被"看到"在服务器端。

此外,所有额外添加的行都会在asp:button Click事件中丢失。

我已经读过您可以使用JSON以某种方式将JS数据传递到服务器端,但我不熟悉其中任何一种(我使用的JS代码是在Internet上找到的)

<table id="myTable" class="table" style="width:100%;">
    <tbody>
        <tr>
            <td style="width:90%;">
                <textarea rows="2" name="name" style="width:100%;" runat="server"></textarea>
            </td>
            <td style="width:10%;"> <a class="deleteRow" style="width:100%;"></a>

            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" runat="server" />
            </td>
        </tr>
    </tfoot>
</table>
<script>
    $(document).ready(function() {
        var counter = 0;

        $("#addrow").on("click", function() {

            counter = $('#myTable tr').length - 2;

            var newRow = $("<tr>");
            var cols = "";

            cols += '<td style="width:90%;"><textarea rows="2" name="name" style="width:100%;" runat="server"></textarea></td>';

            cols += '<td style="width:10%;"><input type="button" style="width:100%;" class="ibtnDel"  value="Delete"></td>';
            newRow.append(cols);
            if (counter == 20) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
            $("table.table").append(newRow);
            counter++;
        });

        $("table.table").on("change", 'input[name^="price"]', function(event) {
            calculateRow($(this).closest("tr"));
            calculateGrandTotal();
        });

        $("table.table").on("click", ".ibtnDel", function(event) {
            $(this).closest("tr").remove();
            calculateGrandTotal();

            counter -= 1
            $('#addrow').attr('disabled', false).prop('value', "Add Row");
        });
    });

    function calculateRow(row) {
        var price = +row.find('input[name^="price"]').val();

    }
</script>

我是否可能以某种方式在服务器端请求表,然后通过它进行迭代?

任何帮助或提示都将不胜感激。

0 个答案:

没有答案