asp.net - 如何獲取動態更改的div塊的內容

Question

我對asp.net相當陌生，我試圖獲取div塊的內容，它的內容在運行時會發生變化。當用戶點擊Button1（asp：button）時，我希望它檢索frm_div的全部內容（不僅僅是默認內容）並將其顯示在frm_div2中。任何建議表示讚賞。

protected void Button1_Click(object sender, EventArgs e) 
     { 
      //WOuld like to get the content of frm_div not just default content and put it in frm_div2 
      frm_div2.InnerHtml = frm_div.InnerHtml; 
    string buf = TextBox1.Text; 
    changed_text.InnerHtml = buf.ToUpper(); 
} 

    <form id="form1" runat="server"> 
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager> 
    <div> 

     <asp:TextBox ID="TextBox1" runat="server" style="width:224px"> 
     </asp:TextBox> 
     <br /> 
     <br /> 
     <asp:Button ID="Button1" runat="server" Text="Enter..." style="width:85px" onclick="Button1_Click" /> 
     <hr /> 

     <h3> Results: </h3> 
     <span runat="server" id="changed_text" /> 

    </div> 

     <button id="ClickFunc" type="button" value="Hello" onclick="func();">Click</button> 

     <div id="frm_div" runat="server"> 
      ----- 
     </div> 
     <div id="frm_div2" runat="server"> 
     </div> 

    </form> 

    <script type="text/javascript"> 
     function func() { 
     document.getElementById('frm_div').innerHTML = '<p>' + document.getElementById('frm_div').innerHTML + ' <b>client side added</b> </p>'; 
     } 
    </script> 

Answer 1

添加一個隱藏的輸入，並在func（）中填充隱藏的輸入值與內容。

[... snip ...] 
<asp:Hidden id="myhidden" runat="server" /> 

[... snip ...] 
function func() { 
    document.getElementById('frm_div').innerHTML = 
     '<p>' + 
     document.getElementById('frm_div').innerHTML + 
     ' <b>client side added</b> </p>'; 

    document.getElementById('myhidden').value = 
     document.getElementById('frm_div').innerHTML; 
} 

然後在你點擊按鈕服務器處理程序可以訪問該值：

protected void Button1_Click(object sender, EventArgs e) 
{ 
    string v = myhidden.value; 
} 

爲了避免安全錯誤，你要的HTMLEncode值：

function HtmlEncode(str) { 
    return str 
     .replace(/&/g, '&') 
     .replace(/"/g, '"') 
     .replace(/'/g, ''') 
     .replace(/</g, '&lt;') 
     .replace(/>/g, '&gt;'); 
} 

function func() { 
    document.getElementById('frm_div').innerHTML = 
     '<p>' + 
     document.getElementById('frm_div').innerHTML + 
     ' <b>client side added</b> </p>'; 

    document.getElementById('myhidden').value = 
     HtmlEncode(document.getElementById('frm_div').innerHTML); 
} 

在服務器你可能想要HtmlDecode（）這個值。

Answer 2

我終於想出了這一個，但花了一些時間才能工作。

當你得到的股利它僅包括您的HTML標記值的限制屬性，而不是價值財產這是用戶加載頁面後輸入的文本的的innerHTML。你必須首先使用客戶端腳本來設置值屬性=值屬性。然後，您可以使用WebMethod獲取innerHTML並將其傳遞給代碼隱藏。

這裏是一個代碼片段，設定的屬性值輸入，抓住的innerHTML並將其傳遞給一個WebMethod：

function updateInputsValueAttribute() { 
 
    var div = document.getElementById('DivContainer').getElementsByTagName('input'); 
 
    for (var i = 0; i < div.length; i++) { 
 
     // set attribute value to property value 
 
     div[i].setAttribute("value", div[i].value); 
 
    } 
 

 
    var dataValue = HtmlEncode(document.getElementById('DivContainer').innerHTML); 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: "CurrentPage.aspx/MethodToPassResult", 
 
     data: "{sendData: '" + dataValue + "'}", 
 
     contentType: "application/json; charset=utf-8", 
 
     //dataType: 'json', 
 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
 
      //alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
 
     }, 
 
     success: function (result) { 
 
      if (result.d == "failed") { 
 

 
      } 
 
      else { 
 
       //result.d contains the resulting string from the code behind C# method 
 
      } 
 
     } 
 
    }); 
 
} 
 
function HtmlEncode(str) { 
 
    return str 
 
     .replace(/&/g, '&amp;') 
 
     .replace(/"/g, '&quot;') 
 
     .replace(/'/g, '&#39;') 
 
     .replace(/</g, '&lt;') 
 
     .replace(/>/g, '&gt;'); 
 
}

After you update the text in the input and press the button <br/>the attribute value will be updated and the Ajax method will be called <br/>passing the contents of the div to the WebMethod in the C# codebehind class. Please note the Html Encoding and Decoding using the custom function from the other answer provided and HttpUtility is used to prevent security errors. 
 
<hr/> 
 

 
<div id="DivContainer" runat="server"> 
 
<input type="text" value="Value Attribute"/> 
 
</div> 
 
<input type="button" onclick="updateInputsValueAttribute();" value="Do Something" />

這裏是您的當前頁爲將WebMethod標記.aspx類。我用HtmlAgilityPack通過innerHTML的結果來分析：

using HtmlAgilityPack; 
using System.Web.Services; 

public partial class CurrentPage : System.Web.UI.Page 
{ 
    [WebMethod(EnableSession = true)] 
    public static string MethodToPassResult(string sendData) 
    { 
     String currentHtml = HttpUtility.HtmlDecode(sendData); 
     byte[] byteArray = Encoding.UTF8.GetBytes(currentHtml); 
     MemoryStream stream = new MemoryStream(byteArray); 
     HtmlDocument html = new HtmlDocument(); 
     html.Load(stream); 
     HtmlDocument HTMLDocument = html; 
     HtmlDocument HTMLDocumentDiv = new HtmlDocument(); 
     //Do something here such as iterate through all divs 
     var itemList = HTMLDocument.DocumentNode.SelectNodes("//div") 
       .Select(p => p) 
       .ToList(); 
     return "result string from code behind"; 
    } 
} 

從那裏，你應該能夠電線它達到你所需要的。我希望這有幫助！