Question

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

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

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

任何帮助/建议表示赞赏。或者有关更好的方法来实现这一点的任何建议都是受欢迎的（jQuery？Ajax Toolkit？）。

修改：这是一些代码。我能够从JavaScript函数saveDragDropNodes填充ASP Label控件（_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。

您有两种选择：

使用ajax将HTML从客户端传递到服务器。
使用隐藏的输入字段在页面回发之前存储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;
}

希望这有帮助。

Answer 2

首先，默认情况下，HTML代码更改不会发布到服务器。要实现拖放元素，请按照以下步骤操作

唯一地命名（id）其中的Container面板和子元素。
使用jQuery / JavaScript跟踪从容器面板到另一个容器面板的子元素移动，并将元素的旧父面板和新父元素的id存储在json / dictionary对象中。
点击保存按钮，将跟踪的字典对象发布到服务器。
在服务器端，使用Page.Request获取发布的json对象。
使用存储在json对象中的id，保存列表项。

希望这会有所帮助。

Answer 3

在您需要从代码隐藏中访问的控件上指定runat="server"。另外，请记住使用ClientID引用JavaSript中的服务器控件：

var el = document.getElementById("<%=MyElement.ClientID%>");

Answer 4

首先，将jQuery lib添加到页眉中。从Google CDN添加它，因为大多数用户都应该缓存它。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

然后，在JS修改HTML之后，调用sendToServer，它会将您选择的html发布到您输入的servlet。

function sendToServer(){
    var myhtml = document.getElementById('theIdOfTheContainer').innerHTML;
    $.post("http://yoururlhere.com",myhtml,function(responseFromServer){
        //some code to handle the response from the server on the client.
    });
}
$('#buttonid').click(sendToServer);

我正在使用jQuery，因为它是一个非常强大的AJAX库。 jQuery非常好地做了三件事，其中一件是AJAX。在post方法中，第三个参数是匿名函数。这是在数据成功发送到服务器后调用的函数。是的。试一试，让我知道。

asp.net在后面的代码中获取html控件

4 个答案: