質問編集履歴

2

class 属性の使用用途

2020/08/19 01:53

投稿

hayato208
hayato208

スコア19

test CHANGED
File without changes
test CHANGED
@@ -16,292 +16,298 @@
16
16
 
17
17
  です。
18
18
 
19
- 最終的にはQUestionID(連番),SubjectID,question,Answer,Isdelete(最後3つはユーザーによる入力、下記コードには載せていない)を「Questions」テーブルに保存したいと考えております。
19
+ 最終的にはQUestionID(連番),SubjectID(),question,Answer,Isdelete(最後3つはユーザーによる入力、下記コードには載せていない)を「Questions」テーブルに保存したいと考えております。
20
20
 
21
21
  ###### 修正依頼に対する追記
22
22
 
23
+ ・タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。
24
+
25
+ 例えば大カテゴリの選択(今回の「カテゴリ」)によって中カテゴリ(今回の「教科名」)の内容を変更する処理のことを指します。
26
+
27
+ ・class属性を用いて2つのプルダウンを連動したいと考えております。
28
+
29
+ 現状では2つのプルダウンを<option value=>にて連動しておりますが、これでは教科名のID(SubjectID)が取得できません。
30
+
31
+ なのでclass属性でプルダウン連動、option属性の値をSubjectIDに追加したいと考えております。
32
+
33
+
34
+
35
+ ### 現状
36
+
37
+ 「カテゴリ」「教科名」ドロップダウンリストにてともにCategoryIDを用いて連動しているため連動自体はうまく行っている。
38
+
39
+ ただ、SubjectIDをどうやって関連付けるかが分からない。
40
+
41
+
42
+
43
+ 根本的にViewBagではclass属性は付与できないのか(jsのコードを修正しないとダメなのか)すら分かっていないので、違う方法等あれば教えていただきたいです。
44
+
45
+ ### 発生している問題
46
+
47
+ ViewBagにてvalue属性は設定できるが、class属性が設定できない。
48
+
49
+ 例えば[【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた](https://nodoame.net/archives/4593)にあるような
50
+
51
+ ```
52
+
53
+ <option value="4" class="p1">
54
+
55
+ ```
56
+
57
+ としたい。
58
+
59
+ 下記コードのViewBagにて渡せているのは
60
+
61
+ ```
62
+
63
+ <option value="4">
64
+
65
+ ```
66
+
67
+ のみである。
68
+
69
+ ### 該当のソースコード
70
+
71
+
72
+
73
+ ```Controller
74
+
75
+ // GET: Question/Create
76
+
77
+ public ActionResult Create()
78
+
79
+ {
80
+
81
+ // ドロップダウンリスト用
82
+
83
+ ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
84
+
85
+ ViewBag.SubjectID = new SelectList(db.subjects, "CategoryID", "SubjectName"); // CategoryIDとSubjectIDを渡したい
86
+
87
+ return View();
88
+
89
+ }
90
+
91
+
92
+
93
+ // POST: Question/Create
94
+
95
+ // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
96
+
97
+ // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
98
+
99
+ [HttpPost]
100
+
101
+ [ValidateAntiForgeryToken]
102
+
103
+ public ActionResult Create([Bind(Include = "QuestionID,SubjectID,question,Answer,Isdelete")] questions questions)
104
+
105
+ {
106
+
107
+ if (ModelState.IsValid)
108
+
109
+ {
110
+
111
+ db.questions.Add(questions);
112
+
113
+ db.SaveChanges();
114
+
115
+ return RedirectToAction("Index");
116
+
117
+ }
118
+
119
+
120
+
121
+ return View(questions);
122
+
123
+ }
124
+
125
+ ```
126
+
127
+
128
+
129
+ ```View
130
+
131
+ <div class="editor-field">
132
+
133
+ @Html.DropDownList("CategoryID", null, "カテゴリを選択して下さい。", new { id = "CategoryName" })
134
+
135
+ </div>
136
+
137
+ <div class="editor-label">
138
+
139
+ 課題名
140
+
141
+ </div>
142
+
143
+ <div class="editor-field">
144
+
145
+ @Html.DropDownList("SubjectID", null, "教科名を選択して下さい。", new { id = "SubjectName" })
146
+
147
+ </div>
148
+
149
+ }
150
+
151
+ <script type="text/javascript">
152
+
153
+ $(function () {
154
+
155
+ // カテゴリ名
156
+
157
+ var SubjectNam = $("#SubjectName");
158
+
159
+
160
+
161
+ // 教科名のoption内容をコピー
162
+
163
+ var pd2 = $("#SubjectName option").clone();
164
+
165
+
166
+
167
+ // カテゴリドロップダウンリストが変更されたら作動
168
+
169
+ $("#CategoryName").change(function () {
170
+
171
+ // 教科名をeabled
172
+
173
+ SubjectNam.removeAttr('disabled');
174
+
175
+
176
+
177
+ // カテゴリ名のvalue取得
178
+
179
+ var lv1val = $("#CategoryName").val();
180
+
181
+
182
+
183
+ // 一旦、カテゴリ名のoption削除
184
+
185
+ $("#SubjectName option").remove();
186
+
187
+
188
+
189
+ // コピー元のカテゴリを表示
190
+
191
+ $(pd2).appendTo("#SubjectName");
192
+
193
+
194
+
195
+ // 選択値以外のoption削除
196
+
197
+ $("#SubjectName option[value != " + lv1val + "]").remove();
198
+
199
+
200
+
201
+ // カテゴリドロップダウンリストを2回目以降操作時、カテゴリ名が未選択なら教科をdisabledにする
202
+
203
+ if ($("#CategoryName").val() == "") {
204
+
205
+ SubjectNam.attr('disabled', 'disabled');
206
+
207
+ }
208
+
209
+ });
210
+
211
+
212
+
213
+ // カテゴリ名が未選択なら教科をdisabledにする
214
+
215
+ if ($("#CategoryName").val() == "") {
216
+
217
+ SubjectNam.attr('disabled', 'disabled');
218
+
219
+ }
220
+
221
+ });
222
+
223
+
224
+
225
+ </script>
226
+
227
+
228
+
229
+ ```
230
+
231
+
232
+
233
+ ```CategoriesModel
234
+
235
+ namespace QuestionManager.Models
236
+
237
+ {
238
+
239
+ using System;
240
+
241
+ using System.Collections.Generic;
242
+
243
+
244
+
245
+ public partial class Categories
246
+
247
+ {
248
+
249
+ public int CategoryID { get; set; }
250
+
251
+ public string CategoryName { get; set; }
252
+
253
+ public bool IsDelete { get; set; }
254
+
255
+ }
256
+
257
+ }
258
+
259
+ ```
260
+
261
+
262
+
263
+ ```SubjectsModel
264
+
265
+ namespace QuestionManager.Models
266
+
267
+ {
268
+
269
+ using System;
270
+
271
+ using System.Collections.Generic;
272
+
273
+
274
+
275
+ public partial class subjects
276
+
277
+ {
278
+
279
+ public int SubjectID { get; set; }
280
+
281
+ public string SubjectName { get; set; }
282
+
283
+ public Nullable<int> CategoryID { get; set; }
284
+
285
+ }
286
+
287
+ }
288
+
289
+ ```
290
+
291
+
292
+
293
+
294
+
295
+
296
+
297
+ ### 開発環境
298
+
299
+ ASP.NET MVC5.2.4
300
+
301
+ Entity Framework 6.2.0
302
+
303
+ jQuery 3.3.1
304
+
305
+ Identity.Entity.Framework 2.2.2
306
+
307
+ DB:SQL Sever
308
+
309
+
310
+
311
+ ### 補足
312
+
23
313
  タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。
24
-
25
- 例えば大カテゴリの選択(今回の「カテゴリ」)によって中カテゴリ(今回の「教科名」)の内容を変更する処理のことを指します。
26
-
27
-
28
-
29
- ### 現状
30
-
31
- 「カテゴリ」「教科名」ドロップダウンリストにてともにCategoryIDを用いて連動しているため連動自体はうまく行っている。
32
-
33
- ただ、SubjectIDをどうやって関連付けるかが分からない。
34
-
35
-
36
-
37
- 根本的にViewBagではclass属性は付与できないのか(jsのコードを修正しないとダメなのか)すら分かっていないので、違う方法等あれば教えていただきたいです。
38
-
39
- ### 発生している問題
40
-
41
- ViewBagにてvalue属性は設定できるが、class属性が設定できない。
42
-
43
- 例えば[【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた](https://nodoame.net/archives/4593)にあるような
44
-
45
- ```
46
-
47
- <option value="4" class="p1">
48
-
49
- ```
50
-
51
- としたい。
52
-
53
- 下記コードのViewBagにて渡せているのは
54
-
55
- ```
56
-
57
- <option value="4">
58
-
59
- ```
60
-
61
- のみである。
62
-
63
- ### 該当のソースコード
64
-
65
-
66
-
67
- ```Controller
68
-
69
- // GET: Question/Create
70
-
71
- public ActionResult Create()
72
-
73
- {
74
-
75
- // ドロップダウンリスト用
76
-
77
- ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName");
78
-
79
- ViewBag.SubjectID = new SelectList(db.subjects, "CategoryID", "SubjectName"); // CategoryIDとSubjectIDを渡したい
80
-
81
- return View();
82
-
83
- }
84
-
85
-
86
-
87
- // POST: Question/Create
88
-
89
- // 過多ポスティング攻撃を防止するには、バインド先とする特定のプロパティを有効にしてください。
90
-
91
- // 詳細については、https://go.microsoft.com/fwlink/?LinkId=317598 を参照してください。
92
-
93
- [HttpPost]
94
-
95
- [ValidateAntiForgeryToken]
96
-
97
- public ActionResult Create([Bind(Include = "QuestionID,SubjectID,question,Answer,Isdelete")] questions questions)
98
-
99
- {
100
-
101
- if (ModelState.IsValid)
102
-
103
- {
104
-
105
- db.questions.Add(questions);
106
-
107
- db.SaveChanges();
108
-
109
- return RedirectToAction("Index");
110
-
111
- }
112
-
113
-
114
-
115
- return View(questions);
116
-
117
- }
118
-
119
- ```
120
-
121
-
122
-
123
- ```View
124
-
125
- <div class="editor-field">
126
-
127
- @Html.DropDownList("CategoryID", null, "カテゴリを選択して下さい。", new { id = "CategoryName" })
128
-
129
- </div>
130
-
131
- <div class="editor-label">
132
-
133
- 課題名
134
-
135
- </div>
136
-
137
- <div class="editor-field">
138
-
139
- @Html.DropDownList("SubjectID", null, "教科名を選択して下さい。", new { id = "SubjectName" })
140
-
141
- </div>
142
-
143
- }
144
-
145
- <script type="text/javascript">
146
-
147
- $(function () {
148
-
149
- // カテゴリ名
150
-
151
- var SubjectNam = $("#SubjectName");
152
-
153
-
154
-
155
- // 教科名のoption内容をコピー
156
-
157
- var pd2 = $("#SubjectName option").clone();
158
-
159
-
160
-
161
- // カテゴリドロップダウンリストが変更されたら作動
162
-
163
- $("#CategoryName").change(function () {
164
-
165
- // 教科名をeabled
166
-
167
- SubjectNam.removeAttr('disabled');
168
-
169
-
170
-
171
- // カテゴリ名のvalue取得
172
-
173
- var lv1val = $("#CategoryName").val();
174
-
175
-
176
-
177
- // 一旦、カテゴリ名のoption削除
178
-
179
- $("#SubjectName option").remove();
180
-
181
-
182
-
183
- // コピー元のカテゴリを表示
184
-
185
- $(pd2).appendTo("#SubjectName");
186
-
187
-
188
-
189
- // 選択値以外のoption削除
190
-
191
- $("#SubjectName option[value != " + lv1val + "]").remove();
192
-
193
-
194
-
195
- // カテゴリドロップダウンリストを2回目以降操作時、カテゴリ名が未選択なら教科をdisabledにする
196
-
197
- if ($("#CategoryName").val() == "") {
198
-
199
- SubjectNam.attr('disabled', 'disabled');
200
-
201
- }
202
-
203
- });
204
-
205
-
206
-
207
- // カテゴリ名が未選択なら教科をdisabledにする
208
-
209
- if ($("#CategoryName").val() == "") {
210
-
211
- SubjectNam.attr('disabled', 'disabled');
212
-
213
- }
214
-
215
- });
216
-
217
-
218
-
219
- </script>
220
-
221
-
222
-
223
- ```
224
-
225
-
226
-
227
- ```CategoriesModel
228
-
229
- namespace QuestionManager.Models
230
-
231
- {
232
-
233
- using System;
234
-
235
- using System.Collections.Generic;
236
-
237
-
238
-
239
- public partial class Categories
240
-
241
- {
242
-
243
- public int CategoryID { get; set; }
244
-
245
- public string CategoryName { get; set; }
246
-
247
- public bool IsDelete { get; set; }
248
-
249
- }
250
-
251
- }
252
-
253
- ```
254
-
255
-
256
-
257
- ```SubjectsModel
258
-
259
- namespace QuestionManager.Models
260
-
261
- {
262
-
263
- using System;
264
-
265
- using System.Collections.Generic;
266
-
267
-
268
-
269
- public partial class subjects
270
-
271
- {
272
-
273
- public int SubjectID { get; set; }
274
-
275
- public string SubjectName { get; set; }
276
-
277
- public Nullable<int> CategoryID { get; set; }
278
-
279
- }
280
-
281
- }
282
-
283
- ```
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
- ### 開発環境
292
-
293
- ASP.NET MVC5.2.4
294
-
295
- Entity Framework 6.2.0
296
-
297
- jQuery 3.3.1
298
-
299
- Identity.Entity.Framework 2.2.2
300
-
301
- DB:SQL Sever
302
-
303
-
304
-
305
- ### 補足
306
-
307
- タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。

1

リンクの張り付け、実現したい内容の追記

2020/08/19 01:53

投稿

hayato208
hayato208

スコア19

test CHANGED
File without changes
test CHANGED
@@ -4,13 +4,9 @@
4
4
 
5
5
  ・「カテゴリ」ドロップダウンリストが初期状態だと「教科名」ドロップダウンリストは選択できない。
6
6
 
7
-
8
-
9
-
10
-
11
7
  下記サイトを参考にDB Firstにて作成をしています。
12
8
 
13
- https://kazunori-kimura.github.io/how-to-develop-dot-net-apps/asp-101.html
9
+ [.NET アプリケーション開発入門](http://kazunori-kimura.github.io/how-to-develop-dot-net-apps/asp-101.html)
14
10
 
15
11
 
16
12
 
@@ -22,6 +18,12 @@
22
18
 
23
19
  最終的にはQUestionID(連番),SubjectID,question,Answer,Isdelete(最後3つはユーザーによる入力、下記コードには載せていない)を「Questions」テーブルに保存したいと考えております。
24
20
 
21
+ ###### 修正依頼に対する追記
22
+
23
+ タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。
24
+
25
+ 例えば大カテゴリの選択(今回の「カテゴリ」)によって中カテゴリ(今回の「教科名」)の内容を変更する処理のことを指します。
26
+
25
27
 
26
28
 
27
29
  ### 現状
@@ -38,7 +40,7 @@
38
40
 
39
41
  ViewBagにてvalue属性は設定できるが、class属性が設定できない。
40
42
 
41
- 例えばク先にあるような
43
+ 例えば[【jQuery】3つのプルダウを連動させるプラグイン『jquery.tgHierSelect』を作ってみた](https://nodoame.net/archives/4593)にあるような
42
44
 
43
45
  ```
44
46
 
@@ -297,3 +299,9 @@
297
299
  Identity.Entity.Framework 2.2.2
298
300
 
299
301
  DB:SQL Sever
302
+
303
+
304
+
305
+ ### 補足
306
+
307
+ タイトルにある「HierSelect」ですが、2つの連動したプルダウンのことを指しております。