javascript - asp.net 在代码后面获取 html 控件

Question

如果我使用 JavaScript 更改页面上的 html，我如何在后面的 ASP.NET 代码中访问这些更改？

我在网上找到了一些 dhtml“拖放”代码(http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo2.html)，但是在将列表项从一个控件移动到另一个控件之后，我不知道如何在后面的代码中“访问”每个控件，所以我可以在每个控件中保存列表项。

我尝试使用 HTML Agility 包，但似乎我只能访问未更改的 html - 这意味着所有控件都是空的。

如有任何帮助/建议，我们将不胜感激。欢迎提出任何有关更好的实现方法的建议(jQuery？Ajax 工具包？)。

编辑:这是一些代码。我能够从 JavaScript 函数 saveDragDropNodes 填充一个 ASP 标签控件 (_saveContent)，其中包含“ul”ID 和我拖放的相应“li”控件。但是，当单击保存按钮时，我的 Label 控件不再包含任何文本...

function saveDragDropNodes() {
        var saveString = "";
        var uls = dragDropTopContainer.getElementsByTagName('UL');
        for (var no = 1; no < uls.length; no++) {   // LOoping through all <ul>
            var lis = uls[no].getElementsByTagName('LI');
            for (var no2 = 0; no2 < lis.length; no2++) {
                if (saveString.length > 0) saveString = saveString + ";";
                saveString = saveString + uls[no].id + '|' + lis[no2].id;
            }
        }
        document.getElementById("<%=_saveContent.ClientID %>").innerHTML = saveString.replace(/;/g, ';<br>');
    }
  <div id="dhtmlgoodies_dragDropContainer">
    <div id="dhtmlgoodies_listOfItems">
        <div>
            <p>
                Available Items</p>
            <ul id="allItems" runat="server">
            </ul>
        </div>
    </div>
    <div id="dhtmlgoodies_mainContainer">
        <div>
            <p>
                Group 1</p>
            <ul id="_ul1">
            </ul>
        </div>
        <div>
            <p>
                Group 2</p>
            <ul id="_ul2">
            </ul>
        </div>
    </div>
    <asp:Label ID="_lSave" runat="server" ForeColor="Red" EnableViewState="false" />
</div>
<div id="footer">
<span onmouseover="saveDragDropNodes()">
    <asp:Button ID="_btnSave" runat="server" Text="Save Groups" OnClick="_btnSave_OnClick" /></span>
</div>
<ul id="dragContent">
</ul>
<div id="dragDropIndicator"></div>
<asp:Label ID="_saveContent" runat="server" />

代码隐藏:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
    If Not Page.IsPostBack Then
        GetItems()
    End If
End Sub
Private Sub GetItems()
    Dim dt As DataTable = DbHelper.GetDataTableForSP("GetListOptions")
    Dim index As Integer = 1
    For Each _row As DataRow In dt.Rows
        Dim _li As New HtmlGenericControl("li")
        _li.ID = _row("ClassId")
        _li.Attributes.Add("runat", "server")
        _li.InnerHtml = String.Format("{0}) {1} {2}", index, _row("ClassId"), _row("ClassDescription1"))
        allItems.Controls.Add(_li)
        index += 1
    Next
End Sub
Private Sub SaveGroups()

    Dim str As String = _saveContent.Text /*No text here */
    _lSave.Text = "Groups Saved!"
    GetItems()
End Sub

Answer 1

唯一回发到服务器的内容是来自表单字段的值。请参阅:Form submission .

你有两个选择:

1. 使用 ajax 将 HTML 从客户端传递到服务器。
2. 使用隐藏的输入字段在页面回发之前存储 HTML。

这是后者的一个例子:

标记

<div id="content"></div>
<asp:HiddenField ID="hiddenContentField" runat="server" />
<asp:Button ID="button1" runat="server" Text="Post back" OnClick="button1_Click" OnClientClick="storeContent();" />

脚本

function storeContent() {
    $('#<%= hiddenContentField.ClientID %>').val($('#content').html());
}

内容元素中的任何更改都将存储在隐藏的输入元素中，并在回发时发送到服务器。

然后在后面的代码中，您可以像这样访问传递过来的 HTML:

protected void button1_Click(object sender, EventArgs e)
{
    string html = hiddenContentField.Value;
}

希望这对您有所帮助。