Q&A
コードは ``` と ``` で囲ってください(``` はバッククォート 3 つ)。インデントされて見やすくなるので。
お世話になっております。
不勉強なため、記載内容に不足ありましたら
ご指摘お願い致します。
前提・実現したいこと
C#.NetのWebページで、
追加ボタンを押すとListView内に入力フォームが現れ
入力フォーム内の確定ボタンを押すと
参照用入力フォームに変化する。
（再度追加ボタンを押すと入力フォームが追加される）
という動作を実現させようとしており、凡そうまくいっているのですが
テキストエリアの挙動が以下のようにおかしい状態です。
発生している問題・エラーメッセージ
入力フォーム内のテキストエリアが、なぜか改行ができません。
改行ができない、というのは
文字を打ってEnterを押しても改行されない、ということです。
該当のソースコード
<form id="form1" runat="server" style="width:300px;"> <asp:ListView ID="LvwConsultation" runat="server" style="" OnItemDataBound="LvwConsultation_ItemDataBound" OnItemEditing="LvwConsultation_ItemEditing" OnItemUpdating="LvwConsultation_ItemUpdating" OnItemDeleting="LvwConsultation_ItemDeleting" OnItemCanceling="LvwConsultation_ItemCanceling"> <EmptyDataTemplate> <table runat="server"> <tr> <td>まだ登録されていません。</td> </tr> </table> </EmptyDataTemplate> <LayoutTemplate> <table id="itemPlaceholderContainer" runat="server"> <tr id="itemPlaceholder" runat="server"> </tr> </table> </LayoutTemplate> <ItemTemplate> <tr id="Tr1" runat="server"> <td id="Td1" runat="server" style="border:1px solid #CCCCCC;"> <table id="TblRow" runat="server" style="width:284px;"> <tr id ="Tr1_2" runat="server"> <td id="Td1_1" style="width:80px;"> <label class="input-title-right" style="height:12px">相談日</label> </td> <td id="Td1_2" style="width:150px;"> <asp:Label id="LblConsultationDate" class="uninput" runat="server" style="width:90px;" ></asp:Label> </td> <td> <asp:ImageButton ID="ImgEdit" runat="server" ImageUrl="../../Images/edit.png" title="訂正します" style="height:15px; width:15px;" CommandName="Edit" /> <asp:ImageButton ID="ImgDelete" runat="server" ImageUrl="../../Images/delete.png" title="削除します" style="height:15px; width:15px;" CommandName="Delete" /> </td> </tr> <tr id ="Tr4_2" runat="server"> <td colspan="3"> <asp:Label ID="LblConsultation" runat="server" style="width:100%;" /> </td> </tr> </table> </td> </tr> </ItemTemplate> <EditItemTemplate> <tr id="Tr1" runat="server"> <td id="Td1" runat="server" style="border:1px solid #CCCCCC;"> <table id="TblRow" runat="server" style="width:284px;"> <tr id ="Tr1_2"> <td id="Td1_1" style="width:100px;"> <label class="input-title-right" style="height:12px">日付<span style="color:red">*</span></label> </td> <td id="Td1_2" style="width:100px;"> <asp:TextBox id="CalConsultationDate" class="uninput" runat="server" style="width:90px;" ></asp:TextBox> </td> <td> <table> <tr> <td style="vertical-align:top"> <asp:Button id="BtnConfirm" runat="server" Text="確定" style="width:40px; height:20px; padding: 0px; text-align:center; margin-right:3px; margin-bottom:3px;" UseSubmitBehavior="False" OnClientClick="if(!BtnConfirm_OnClientClick(this)) {return false;};" CommandName="Update" /> </td> <td style="vertical-align:top"> <asp:Button id="BtnClose" runat="server" Text="ｷｬﾝｾﾙ" style="width:50px; height:20px; padding: 0px; text-align:center; margin-right:3px;" UseSubmitBehavior="False" CommandName="Cancel" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <asp:TextBox ID="TxtConsultation" runat="server" TextMode="MultiLine" style="width:98%;" Wrap="True" ></asp:TextBox> </td> </tr> </table> </td> </tr> </EditItemTemplate> </asp:ListView>
試したこと
ListViewの外に配置している以下のテキストエリアは
正常に改行できていたので、それをListView内に入れたとたん
改行できなくなってしまいました。
<asp:TextBox id="TxtResult" runat="server" Rows="10" TextMode="MultiLine" Width="97%" >
補足情報（FW/ツールのバージョンなど）
C#
.Net Framework4.0
ご指摘ありがとうございます。
「```」で囲みました。
最初の ``` の後と、最後の ``` の前に改行を入れてください。以下のような感じ。
```
ここにコード
```
改行を挿入致しました。
問題のテキストボックスは質問のコードの最後の方にある <asp:TextBox ID="TxtConsultation" ... TextMode="MultiLine" ... ですよね？ であれば ListView の中にあろうと外にあろうと html にレンダリングされると textarea 要素になるので、「文字を打ってEnterを押しても改行されない」ということはないはずなのですが？ 何か勘違いとか？ html ソースを見てください。
html ソースは見てもらえたでしょうか？ どうして改行できないのか自分も大変興味があります。情報共有に協力いただけると幸いです。
質問者さん、無言になってしまいましたが、上でお願いしたように html ソースは見てもらえたでしょうか？ どうして改行できないのか自分も大変興味があります。
https://teratail.com/help/question-tips に書いてありますが、Teratail は「質問と回答を通してお互いに知識や情報を交換・共有する場所」「お互いの好意の上に成り立っている助け合いの場」ということです。情報共有に協力いただけると幸いです。
回答1件
0
ベストアンサー
問題のテキストボックスは質問のコードの最後の方にある <asp:TextBox ID="TxtConsultation" ... TextMode="MultiLine" ... ですよね？
であれば ListView の中・外関係なく html にレンダリングされると textarea 要素になるので、「文字を打ってEnterを押しても改行されない」ということはないはずなのですが？
一応確認しましたが、［編集］ボタンをクリックして編集モードに入ると EmptyDataTemplate が表示され、その中の Notes 列が textarea になるので以下のように表示されます。textarea なのでもちろん改行はできるし、［更新］ボタンをクリックすると編集結果は DB に反映されます。
ただし、［更新］ボタンクリックでポストバックされ、再描画される際は ItemTemplate が表示され、その中の Notes 列は Label なので CRLF という改行コードでは改行はされません。以下のようになります。それと勘違いしているということはないですか。
確認に使ったコードを以下にアップしておきます。DB は Microsoft のサンプルデータベース Northwind の Employees テーブルを使っています。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="WebApplication1.WebForm9" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [Notes] FROM [Employees]" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title, [Notes] = @Notes WHERE [EmployeeID] = @EmployeeID"> <UpdateParameters> <asp:Parameter Name="LastName" Type="String" /> <asp:Parameter Name="FirstName" Type="String" /> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Notes" Type="String" /> <asp:Parameter Name="EmployeeID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> <asp:ListView ID="ListView1" runat="server" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <EditItemTemplate> <tr style=""> <td> <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" /> <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="キャンセル" /> </td> <td> <asp:Label ID="EmployeeIDLabel1" runat="server" Text='<%# Eval("EmployeeID") %>' /> </td> <td> <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%# Bind("LastName") %>' /> </td> <td> <asp:TextBox ID="FirstNameTextBox" runat="server" Text='<%# Bind("FirstName") %>' /> </td> <td> <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' /> </td> <td> <asp:TextBox ID="NotesTextBox" runat="server" Text='<%# Bind("Notes") %>' TextMode="MultiLine" Width="300px" Height="200px" /> </td> </tr> </EditItemTemplate> <EmptyDataTemplate> <table runat="server" style=""> <tr> <td>データは返されませんでした。</td> </tr> </table> </EmptyDataTemplate> <ItemTemplate> <tr style=""> <td> <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編集" /> </td> <td> <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' /> </td> <td> <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /> </td> <td> <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /> </td> <td> <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' /> </td> <td> <asp:Label ID="NotesLabel" runat="server" Text='<%# Eval("Notes") %>' /> </td> </tr> </ItemTemplate> <LayoutTemplate> <table runat="server"> <tr runat="server"> <td runat="server"> <table id="itemPlaceholderContainer" runat="server" border="0" style=""> <tr runat="server" style=""> <th runat="server"></th> <th runat="server">EmployeeID</th> <th runat="server">LastName</th> <th runat="server">FirstName</th> <th runat="server">Title</th> <th runat="server">Notes</th> </tr> <tr id="itemPlaceholder" runat="server"> </tr> </table> </td> </tr> <tr runat="server"> <td runat="server" style=""></td> </tr> </table> </LayoutTemplate> </asp:ListView> </div> </form> </body> </html>
投稿2020/07/16 06:28
編集2020/07/16 07:05退会済みユーザー
総合スコア0
ご回答、検証までして頂きありがとうございます。
＞<asp:TextBox ID="TxtConsultation" ... TextMode="MultiLine" ... ですよね？
はい。そのテキストエリアの事を言っておりました。（分かりにくくすみません）
＞以下のようになります。それと勘違いしているということはないですか。
いえ、勘違いではないです。
ボタンの動作云々に関係なく、テキストエリア自体の動作がおかしくなってしまいます。
他のテキストエリアはなぜ正常に動くのか、もう少し比較検討してみます。
質問のコメント欄に書きましたが html ソースを見てください。
html ソースは見てもらえたでしょうか？ どうして改行できないのか自分も大変興味があります。情報共有に協力いただけると幸いです。
質問者さん、無言になってしまいましたが、上でお願いしたように html ソースは見てもらえたでしょうか？ どうして改行できないのか自分も大変興味があります。
https://teratail.com/help/question-tips に書いてありますが、Teratail は「質問と回答を通してお互いに知識や情報を交換・共有する場所」「お互いの好意の上に成り立っている助け合いの場」ということです。情報共有に協力いただけると幸いです。
SurferOnWww様
返答が大変遅くなり申し訳ありません。（体調崩して出勤しておりませんでした）
本日改めてHTMLを確認したのですが、
結論から申し上げますと私の勘違い…と言いますか、
掲示したソース以外の箇所に問題がありました。
具体的には、javascriptに以下の記述がありました。
=====================
$("body").on("keydown", function (e) {
if ((e.which || e.keyCode) == 13
|| ((e.which || e.keyCode) == 116)) {
return false;
}
});
=====================
不要だったので削除していたはずだったので、盲点となっていました。
大変申し訳ありませんでした。
ですが、SurferOnWww様のご助言通り、HTMLを確認したら
すぐに解決できましたので、今後の対応方法に取り入れたいと思います。
ありがとうございました。
情報提供をありがとうございました。
あなたの回答
tips
プレビュー
