回答編集履歴

1

具体例追記

2016/10/08 01:55

投稿

退会済みユーザー
test CHANGED
@@ -11,3 +11,235 @@
11
11
 
12
12
 
13
13
  それでうまくいかなかったら連絡ください。その際に、具体的にどのようにしたのかを上の質問欄に追記してください。
14
+
15
+
16
+
17
+ 【2016/10/8 10:55 追記】
18
+
19
+
20
+
21
+ 上の回答で書いた「ASP.NET AJAX Extensions の ScriptManager と UpdatePanel を利用し・・・」という案を検証してみました。検証に使ったコードをアップしておきます。このコードで、modal 部分を表示したまま GridView に検索結果を表示できます。ご参考まで。
22
+
23
+
24
+
25
+ (以下のサンプルで使用しているデータベースは Microsoft が提供しているサンプルデータベース Northwind の Products テーブルを使っています)
26
+
27
+
28
+
29
+ ```
30
+
31
+ <%@ Page Language="C#" %>
32
+
33
+
34
+
35
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
36
+
37
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
38
+
39
+
40
+
41
+ <script runat="server">
42
+
43
+ // 2016/10/8 teratail の検証用
44
+
45
+ // https://teratail.com/questions/50621
46
+
47
+
48
+
49
+ // 以下の Bootstrap Modal の枠組みはデモのコードほとんどそのまま
50
+
51
+ // http://getbootstrap.com/javascript/
52
+
53
+ </script>
54
+
55
+
56
+
57
+ <html xmlns="http://www.w3.org/1999/xhtml">
58
+
59
+ <head runat="server">
60
+
61
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
62
+
63
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
64
+
65
+ <title>Bootstrap Modal Demo</title>
66
+
67
+
68
+
69
+ <!-- Bootstrap -->
70
+
71
+ <link href="/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
72
+
73
+ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
74
+
75
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
76
+
77
+ <!--[if lt IE 9]>
78
+
79
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
80
+
81
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
82
+
83
+ <![endif]-->
84
+
85
+
86
+
87
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
88
+
89
+ <script src="/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
90
+
91
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
92
+
93
+ <script src="/bootstrap-3.2.0-dist/js/bootstrap.js" type="text/javascript"></script>
94
+
95
+ </head>
96
+
97
+ <body>
98
+
99
+ <form id="form1" runat="server">
100
+
101
+
102
+
103
+ <asp:ScriptManager ID="ScriptManager1" runat="server">
104
+
105
+ </asp:ScriptManager>
106
+
107
+
108
+
109
+ <input id="Button1" type="button" class="btn btn-primary btn-lg"
110
+
111
+ value="Launch demo modal" onclick="$('#myModal').modal('show');"/>
112
+
113
+
114
+
115
+ <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
116
+
117
+ aria-labelledby="myModalLabel" aria-hidden="true">
118
+
119
+ <div class="modal-dialog">
120
+
121
+ <div class="modal-content">
122
+
123
+ <div class="modal-header">
124
+
125
+ <button type="button" class="close" data-dismiss="modal">
126
+
127
+ <span aria-hidden="true">&times;</span>
128
+
129
+ <span class="sr-only">Close</span>
130
+
131
+ </button>
132
+
133
+ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
134
+
135
+ </div>
136
+
137
+ <div class="modal-body">
138
+
139
+ Category ID (1 - 8) を入力
140
+
141
+
142
+
143
+ <asp:UpdatePanel ID="UpdatePanel1" runat="server">
144
+
145
+ <ContentTemplate>
146
+
147
+ <asp:TextBox ID="TextBox1" runat="server">
148
+
149
+ </asp:TextBox>
150
+
151
+ <asp:Button ID="Button2" runat="server" Text="Button" />
152
+
153
+ <asp:SqlDataSource ID="SqlDataSource1" runat="server"
154
+
155
+ ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>"
156
+
157
+ SelectCommand="SELECT [ProductID], [ProductName],
158
+
159
+ [CategoryID], [UnitPrice] FROM [Products]
160
+
161
+ WHERE ([CategoryID] = @CategoryID)">
162
+
163
+ <SelectParameters>
164
+
165
+ <asp:ControlParameter ControlID="TextBox1"
166
+
167
+ DefaultValue="0" Name="CategoryID"
168
+
169
+ PropertyName="Text" Type="Int32" />
170
+
171
+ </SelectParameters>
172
+
173
+ </asp:SqlDataSource>
174
+
175
+ <asp:GridView ID="GridView1" runat="server"
176
+
177
+ AutoGenerateColumns="False" DataKeyNames="ProductID"
178
+
179
+ DataSourceID="SqlDataSource1">
180
+
181
+ <Columns>
182
+
183
+ <asp:BoundField DataField="ProductID"
184
+
185
+ HeaderText="ProductID"
186
+
187
+ InsertVisible="False" ReadOnly="True"
188
+
189
+ SortExpression="ProductID" />
190
+
191
+ <asp:BoundField DataField="ProductName"
192
+
193
+ HeaderText="ProductName"
194
+
195
+ SortExpression="ProductName" />
196
+
197
+ <asp:BoundField DataField="CategoryID"
198
+
199
+ HeaderText="CategoryID"
200
+
201
+ SortExpression="CategoryID" />
202
+
203
+ <asp:BoundField DataField="UnitPrice"
204
+
205
+ HeaderText="UnitPrice"
206
+
207
+ SortExpression="UnitPrice" />
208
+
209
+ </Columns>
210
+
211
+ </asp:GridView>
212
+
213
+ </ContentTemplate>
214
+
215
+ </asp:UpdatePanel>
216
+
217
+
218
+
219
+ </div>
220
+
221
+ <div class="modal-footer">
222
+
223
+ <button type="button" class="btn btn-default" data-dismiss="modal">
224
+
225
+ Close
226
+
227
+ </button>
228
+
229
+ </div>
230
+
231
+ </div>
232
+
233
+ </div>
234
+
235
+ </div>
236
+
237
+
238
+
239
+ </form>
240
+
241
+ </body>
242
+
243
+ </html>
244
+
245
+ ```