asp.netでdiv要素の値を保持したい

実現したいこと

contenteditableのdiv要素と、buttonを配置しています。
postback後も
TextBoxのようにdivの値を保持し、表示したいです。

発生している問題・エラーメッセージ

postback後も値を保持したいのですが、
保持できずに恐らく再描画にて初期化されてしまいます。

aspx
1<%@ Page Language="VB" ViewStateMode="Enabled" %>
2
3<%@ Import Namespace="System" %>
4<%@ Import Namespace="System.IO" %>
5<%@ Import Namespace="System.Web.UI.HtmlControls" %>
6<%@ Import Namespace="System.Windows.Forms" %>
7<%@ Import Namespace="System.Data" %>
8
9
10<script runat="server" lang="VB">
11    Protected Sub Page_Load(sender As Object, e As EventArgs)
12        If Session("d") IsNot Nothing Then
13            Dim content As String = Session("d")
14            d.InnerHtml = content
15            Session.Remove("d")
16        End If
17    End Sub
18
19    Protected Sub btn1_Click(sender As Object, e As EventArgs)
20        Dim content As String = d.InnerHtml
21        Session("d") = content
22    End Sub
23</script>
24
25
26<html>
27<head>
28    <title></title>
29    <style>
30        div {
31            border: 1px solid black;
32        }
33    </style>
34</head>
35<body>
36    <form runat="server">
37        <div runat="server" id="d" contenteditable="true"></div>
38        <asp:Button runat="server" ID="btn1" OnClick="btn1_Click" Text="post" />
39    </form>
40</body>
41</html>

Page_Loadに、
If Page.IsPostBack = True Then
Dim content As String = d.InnerHtml
Session("d") = content
End If
や、Page_Unloadに、
Dim content As String = d.InnerHtml
Session("d") = content
としてみても思っているように保持できずにいます。

基本的なところで躓いてしまっています。

追記開発環境

・Windows10
・Visual Studio 2019　Version 16.11.15
・ASP.NET Web Forms
・バージョン情報：Microsoft .NET Framework バージョン:4.0.30319;ASP.NET バージョン:4.8.4494.0
です。

ご教授いただけると幸いです。

退会済みユーザー

2023/05/28 22:48

開発環境を質問欄を編集して追記してください。（例: Windows 10 の Visual Studio 2022 で ASP.NET Web Forms アプリをターゲットフレームワーク .NET Framework 4.8 で作っています・・・とか）

ranra

2023/05/29 01:48

ありがとうございます。情報の追記を致しました。

行動規範の内容に同意します

回答1件

ベストアンサー

contenteditableのdiv要素と、buttonを配置しています。postback後もTextBoxのようにdivの値を保持し、表示したいです。

ASP.NET Web Forms アプリは、サーバーコントロール＋ ViewState ＋ポストバックによって、ポストバック前後で状態を維持しています。

TextBox コントロールの場合は、ポストバック時にサーバー側で以下の操作を行います。

(1) ブラウザから送信されてきた ViewState の中に Text プロパティのデータが入っている場合 (それはポストバック前の値になります)、Text プロパティを ViewState の値に設定。

(2) 次に、ブラウザからポストされてきた TextBox へのユーザー入力と、(1) で設定された Text プロパティの値を比較し、異なっていると Text プロパティをポストされた値で書き換える。

それゆえポストバック前後で状態が維持されます。

div 要素の場合は、たとえそれに runat="server" 属性を追加してサーバーコントロールにしても、上の (1), (2) の機能はないので、単独では「postback後もTextBoxのようにdivの値を保持」はできません。

質問者さんのコードを見ると、Session を使って何とかしようとしているようですが、div 要素へのユーザー入力はサーバーには送信されないのでそれでは無理です。

そこを何とかしようとすると、例えば、隠しフィールド (HiddenField コントロール) と JavaScript を使って、form を submit する (ポストバックする) 前に隠しフィールドの value に div 要素の InnerHTML を設定し、ポストバックの応答で再描画されるときに div 要素の InnerHTML に隠しフィールドの value を設定・・・というようなコードを書くことになります。

HiddenField はサーバーコントロールなので ViewState を持っていて、ポストバック前後で状態が維持されます。Value プロパティの値はポストバックの際サーバーに送信されます。　

具体例は以下の通りです。

html
1<%@ Page Language="C#" AutoEventWireup="true"
2    CodeBehind="WebForm25.aspx.cs" Inherits="WebForms1.WebForm25" %>
3
4<!DOCTYPE html>
5
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9    <title></title>
10    <style>
11        div {
12            border: 1px solid black;
13        }
14    </style>
15    <script type="text/javascript">
16        //<![CDATA[
17
18        let form, div, hidden;
19
20        // DOMContentLoaded イベントで初期設定を行う
21        window.addEventListener('DOMContentLoaded', () => {
22            form = document.getElementById("<%=form1.ClientID%>");
23            div = document.getElementById("d");
24            hidden = document.getElementById("<%=HiddenField1.ClientID%>");
25
26            // div 要素の InnerHTML に隠しフィールドの value を設定
27            div.innerHTML = hidden.value;
28
29            // form を submit する (ポストバックする) 前に隠しフィールド
30            // の value に div 要素の InnerHTML を設定
31            form.addEventListener('submit', () => {
32                hidden.value = div.innerHTML;
33            });
34        });
35
36        //]]>
37    </script>
38</head>
39<body>
40    <form id="form1" runat="server">
41
42        <div id="d" contenteditable="true"></div>
43        <asp:Button runat="server" ID="btn1" Text="post" />
44
45        <asp:HiddenField ID="HiddenField1" runat="server" />
46
47    </form>
48</body>
49</html>

サーバー側で div 要素へのユーザー入力を取得する場合は、HiddenField の Value プロパティから取得してください。

投稿2023/05/29 03:27

退会済みユーザー

総合スコア0

ranra

2023/05/29 06:01

ご丁寧にASP.NET WebFormsアプリの仕組みまで教えてくださりありがとうございます。・div要素はサーバーコントロールではない (今後、ツールボックスでサーバコントロールかどうかで判断するようにします) ・サーバーコントロールではないためrunat="server"属性をつけてもダメ・サーバーコントロールではないものの値をPostBack後に取得したい場合は、クライアントサイドの処理が必要・具体的には一度サーバーコントロールのHiddenFieldに値をsubmitで一時的に渡しておいて、Loadの際に取り出すということですね。おかげさまで無事に出来ました。ありがとうございます！ひとつ気になったことなのですが… SurferOnWww様からご回答頂く前に海外サイトで、この件について調べていました。その際、サーバーコントロールのPanelはレンダリングの際に、divに変換されるという情報を得て、値を保持できるのではと思い、divではなく、panelに書き換えました。しかし、結果はダメでした。 divの元々の性質上、要素をグループ化するためのだから、 runat属性をつけても、そもそも値を保持するといった役割ではないため、たとえサーバーコントロールであっても値を保持出来るものと出来ないものがあり、panel(レンダリング時div)にはその機能がないため出来なかったということかなと感じたのですが、そういうことでしょうか？しかし、 PanelにもViewStateModeというものがあるのが気になります… Panelを起点に、子要素のものに反映されるということなのでしょうか。

退会済みユーザー

2023/05/29 08:55 編集

HTML の基本的なことを勉強することをお勧めします。 TextBox が ASP.NET によって html に変換されると、input type="text" 要素にになります。ちなみに、HiddenFiled は input type="hidden" に、Button は input type="submit" になります。 input 要素はブラウザから送信されてくるデータを受け取るためのもので、input 要素が form 要素に含まれている場合、form を submit する（ポストバックする）と、それら input 要素の value 属性の値がサーバーに送信されます。なので、Button クリックでポストバックされると、それらの input 要素の value 属性の値がサーバーに送信され、上の回答の (1), (2）に書いたようになりますので、TextBox の場合 Text プロパティから値を取得できます。一方、そもそも div 要素は input 要素のようなサーバーにデータを送信する機能は持ちません。 div 要素に runat="server" 属性を追加してサーバーコントロールにすることはできますが、そうするとサーバー側の C# または VB.NET のプログラムでアクセスできるようになるというだけで、やはりサーバーにデータを送信する機能は持たないことに変わりありません。なので、 > ・div要素はサーバーコントロールではないその通りです。でも、そこは今回の話の本質ではありません。 > ・サーバーコントロールではないためrunat="server"属性をつけてもダメ上に書いたように、runat="server" 属性をつければサーバーコントロールにはなります。ダメなのは、div 要素はサーバーにデータを送信する機能は持たないというところです。 > ・サーバーコントロールではないものの値をPostBack後に取得したい場合は、クライアントサイドの処理が必要サーバーコントロールでなくても、input 要素であれば「クライアントサイドの処理」は不要で、単にポストバックするだけで値が送信され、サーバー側で値を取得できます。 div がダメなのは上に書いたようにサーバーにデータを送信する機能は持たないからで、div 要素の innerHTML の値をサーバーに送るためには何らかのクライアント側での処理が必要ということです。 > ・具体的には一度サーバーコントロールのHiddenFieldに値をsubmitで一時的に渡しておいて、Loadの際に取り出すということですね。必ずしもサーバーコントロールである必要はありません。普通の HTML の input type="hidden" でもサーバーに値を送信し、サーバー側で値を取得することはできます。サンプルコードで HiddenField を使った理由は、サーバーコントロールなので自動的に ViewState に Value プロパティの値が保持されるからです。 > Panelを起点に、子要素のものに反映されるということなのでしょうか。違います。Panel の ViewState は Panel 自身のプロパティの値に反映されます。子要素には関係ありません。

ranra

2023/05/29 09:48

ひとつひとつ教えてくださりありがとうございます！

行動規範の内容に同意します