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

隠し入力を追加し、隠し入力の値にコンテンツを入力します。あなたが値をHtmlEncodeしたいと思うのセキュリティエラーを回避するには

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

：

[... 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; 
} 

は、その後、あなたのボタンクリックサーバハンドラにあなたは値にアクセスすることができ、サーバ上で

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マークアップが制限されているなど、ページがロードされた後、ユーザーが入力したテキストの属性ない値財産のdivのinnerHTMLのを得ています。最初に行う必要があるのは、value属性= valueプロパティを設定するためのクライアントサイドスクリプトを使用することです。その後、innerHTMLを取得してWebMethodを使用してコードビハインドに渡すことができます。ここで

は、入力の属性値を設定するコードのsnippitでinnerHTMLプロパティをつかんでWebメソッドに渡し：ここ

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" />

はあなたのcurrentPageにでWebMethodのためのマークアップです.aspxクラス。私はinnerHTMLの結果を解析するためにHtmlAgilityPackを使用します。

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"; 
    } 
} 

そこからあなたが必要なものを行うには、それを配線することができるはずです。私はこれが助けて欲しい！