ASP.NET Core MVC从单个表格创建级联下拉列表（Razor）

huangapple
go评论117阅读模式
英文:

ASP.NET Core MVC create cascading dropdown lists from single table (Razor)

问题

我首先填充IdDegree下拉列表，根据选择填充DegreeTitle下拉列表。例如，对于IdDegree = 2，列表中有2个选项以及多个DegreeTitle（test1，test2，...，test5）的数据。因此，当用户选择IdDegree = 2时，DegreeTitle下拉列表应该被填充为test1，test2，...test5。

SQL数据库

ID_Degree Degree_Title
spic manger
1 Exm1
1 Exm2
1 Exm3
2 Test1
2 Test2
2 Test3
2 Test4
2 Test5

模型类：

  1. public partial class DegreeName
  2. {
  3.     public int Id { get; set; }
  4.     public string IdDegree { get; set; }
  5.     public string DegreeTitle { get; set; }
  6.     public string DegreeName1 { get; set; }
  7. }

控制器：

  1. public async Task<IActionResult> Create([Bind("Id,IdDegree,DegreeTitle,DegreeName1")] DegreeName degreeName)
  2. {
  3.     if (ModelState.IsValid)
  4.     {
  5.         // List<DegreeName> IdDegree = new List<DegreeName>;
  7.         ViewBag.IdDegree = db.DegreeName.ToList();
  9.         return View();
  10.     }
  12.     db.Add(degreeName);
  13.     await db.SaveChangesAsync();
  15.     return RedirectToAction(nameof(Index));
  17.     return View(degreeName);
  18. }

这是Razor视图：

  1. <form asp-action="Create">
  2.     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  3.     <div class="form-group">
  4.         <label asp-for="IdDegree" class="control-label"></label>
  5.         <input asp-for="IdDegree" class="form-control" />
  6.         <span asp-validation-for="IdDegree" class="text-danger"></span>
  7.     </div>
  9.     <div class="form-group">
  10.         <label asp-for="DegreeTitle" class="control-label"></label>
  11.         <input asp-for="DegreeTitle" class="form-control" />
  12.         <span asp-validation-for="DegreeTitle" class="text-danger"></span>
  13.     </div>
  15.     <div class="form-group">
  16.         <label asp-for="DegreeName1" class="control-label"></label>
  17.         <input asp-for="DegreeName1" class="form-control" />
  18.         <span asp-validation-for="DegreeName1" class="text-danger"></span>
  19.     </div>
  21.     <div class="form-group">
  22.         <input type="submit" value="Create" class="btn btn-primary" />
  23.     </div>    
  24. </form>

很多YouTube视频都没有解决我的问题，涉及单表级联。

英文:

I'm first filling IdDegree dropdownlist, based on the selection fills the DegreeTitle dropdownlist. For example for IdDegree = 2, there are 2 in list and multiple DegreeTitle (test1, test2,..., test5) of data. So when the user selects IdDegree = 2, the DegreeTitle dropdownlist should be populated with test1, test2,...test5.

SQL database

ID_Degree Degree_Title
spic manger
1 Exm1
1 Exm2
1 Exm3
2 Test1
2 Test2
2 Test3
2 Test4
2 Test5

Model class:

  1. public partial class DegreeName
  2. {
  3.     public int Id { get; set; }
  4.     public string IdDegree { get; set; }
  5.     public string DegreeTitle { get; set; }
  6.     public string DegreeName1 { get; set; }
  7. }

Controller:

  1. public async Task&lt;IActionResult&gt; Create([Bind(&quot;Id,IdDegree,DegreeTitle,DegreeName1&quot;)] DegreeName degreeName)
  2. {
  3.     if (ModelState.IsValid)
  4.     {
  5.         // List&lt;DegreeName&gt; IdDegree = new List&lt;DegreeName&gt;;
  7.         ViewBag.IdDegree = db.DegreeName.ToList();
  9.         return View();
  10.     }
  12.     db.Add(degreeName);
  13.     await db.SaveChangesAsync();
  15.     return RedirectToAction(nameof(Index));
  17.     return View(degreeName);
  18. }

This is the Razor view:

  1. &lt;form asp-action=&quot;Create&quot;&gt;
  2.     &lt;div asp-validation-summary=&quot;ModelOnly&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
  3.     &lt;div class=&quot;form-group&quot;&gt;
  4.         &lt;label asp-for=&quot;IdDegree&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  5.         &lt;input asp-for=&quot;IdDegree&quot; class=&quot;form-control&quot; /&gt;
  6.         &lt;span asp-validation-for=&quot;IdDegree&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  7.     &lt;/div&gt;
  9.     &lt;div class=&quot;form-group&quot;&gt;
  10.         &lt;label asp-for=&quot;DegreeTitle&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  11.         &lt;input asp-for=&quot;DegreeTitle&quot; class=&quot;form-control&quot; /&gt;
  12.         &lt;span asp-validation-for=&quot;DegreeTitle&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  13.     &lt;/div&gt;
  15.     &lt;div class=&quot;form-group&quot;&gt;
  16.         &lt;label asp-for=&quot;DegreeName1&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  17.         &lt;input asp-for=&quot;DegreeName1&quot; class=&quot;form-control&quot; /&gt;
  18.         &lt;span asp-validation-for=&quot;DegreeName1&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  19.     &lt;/div&gt;
  21.     &lt;div class=&quot;form-group&quot;&gt;
  22.         &lt;input type=&quot;submit&quot; value=&quot;Create&quot; class=&quot;btn btn-primary&quot; /&gt;
  23.     &lt;/div&gt;    
  24. &lt;/form&gt;

A lot of YouTube video and didn't fix my problem with single table cascading

答案1

得分: 0

从您的问题中，我认为当您创建DegreeName项时，您想要使用级联下拉列表来填充IdDegree和DegreeTitle。我创建了一个演示来展示如何实现它，希望它可以帮助您解决问题。

我创建了一个模型来保存您想要在下拉列表中选择的值

  1. public class DropDownData
  2. {
  3.     public int Id { get; set; }
  4.     public string IdDegree { get; set; }
  5.     public string DegreeTitle { get; set; }
  6. }

控制器动作：

  1. public IActionResult CreateDegreeName()
  2. {
  3.     var data = _context.dropDownDatas.Select(x => x.IdDegree).Distinct().ToList();
  4.     var selectlist = new List<SelectListItem>();
  5.     var selectlistTitle = new List<SelectListItem>();
  6.     foreach (var item in data)
  7.     {
  8.         selectlist.Add(new SelectListItem() { Text = item, Value = item });
  9.     }
  11.     ViewBag.selectlist = selectlist;
  13.     return View();
  14. }
  16. [HttpPost]
  17. public IActionResult CreateDegreeName(DegreeName model)
  18. {
  19.     //..........将DegreeName保存到数据库中....
  20.     //..............
  21.     
  22. }
  24. public IActionResult addItem(string IdDegree)
  25. {
  26.     var title = _context.dropDownDatas.Where(y => y.IdDegree == IdDegree).Select(x => x.DegreeTitle).ToList();
  27.     return Json(title);
  28. }

视图：

  1. @model DegreeName
  3. <form method="post">
  4.     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  5.     <div class="form-group">
  6.         <label asp-for="IdDegree" class="control-label"></label>
  7.         <select asp-for="IdDegree" asp-items="@ViewBag.selectlist" class="form-control" onchange="Test(this)">
  8.             <option value="">请选择 IdDegree</option>
  9.         </select>
  10.         <span asp-validation-for="IdDegree" class="text-danger"></span>
  11.     </div>
  13.     <div class="form-group">
  14.         <label asp-for="DegreeTitle" class="control-label"></label>
  15.         <select asp-for="DegreeTitle" class="form-control" disabled></select>
  16.         <span asp-validation-for="DegreeTitle" class="text-danger"></span>
  17.     </div>
  19.     <div class="form-group">
  20.         <label asp-for="DegreeName1" class="control-label"></label>
  21.         <input asp-for="DegreeName1" class="form-control" />
  22.         <span asp-validation-for="DegreeName1" class="text-danger"></span>
  23.     </div>
  25.     <div class="form-group">
  26.         <input type="submit" value="创建" class="btn btn-primary" />
  27.     </div>
  28. </form>
  30. @section Scripts{
  31.     <script>
  32.         function Test(a){
  33.             var postData = {
  34.                 'IdDegree': a.value,
  35.             };
  36.             var items = '';
  37.             $.ajax({
  38.                 type: 'Get',
  39.                 url: '/Test/addItem/',
  40.                 data: postData,
  41.                 contentType: "application/json",
  42.                 success: function (data) {
  43.                     $('#DegreeTitle').prop('disabled', false);
  44.                    
  45.                     for (var i = 0; i < data.length; i++){
  46.                         items += "<option value = '" + data[i] + "'>" + data[i] + " </option>";
  47.                     }
  49.                     $('#DegreeTitle').html(items);
  50.                 },
  51.                 
  52.             })
  53.         }
  54.     </script>
  55. }

演示：

ASP.NET Core MVC从单个表格创建级联下拉列表（Razor）

英文:

From your question, I think when you create DegreeName item, you want to use cascading dropdown lists to fill IdDegree and DegreeTitle. I create a demo to show how to achieve it, hope it can help you solve the issue.

I create Model to save the value which you want to select in dropdownlist

  1. public class DropDownData
  2. {
  3. public int Id { get; set; }
  4. public string IdDegree { get; set; }
  5. public string DegreeTitle { get; set; }
  6. }

ASP.NET Core MVC从单个表格创建级联下拉列表（Razor）

Controller Action:

  1. public IActionResult CreateDegreeName()
  2. {
  3. var data = _context.dropDownDatas.Select(x=&gt;x.IdDegree).Distinct().ToList();
  4. var selectlist = new List&lt;SelectListItem&gt;();
  5. var selectlistTitle = new List&lt;SelectListItem&gt;();
  6. foreach (var item in data)
  7. {
  8. selectlist.Add(new SelectListItem() { Text = item, Value = item });
  9. }
  10. ViewBag.selectlist = selectlist;
  11. return View();
  12. }
  13. [HttpPost]
  14. public IActionResult CreateDegreeName(DegreeName model)
  15. {
  16. //..........save DegreeName into database....
  17. //..............
  18. }
  19. public IActionResult addItem(string IdDegree)
  20. {
  21. var title = _context.dropDownDatas.Where(y =&gt; y.IdDegree == IdDegree).Select(x =&gt; x.DegreeTitle).ToList();
  22. return Json(title);
  23. }

View

  1. @model DegreeName
  2. &lt;form  method=&quot;post&quot;&gt;
  3. &lt;div asp-validation-summary=&quot;ModelOnly&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
  4. &lt;div class=&quot;form-group&quot;&gt;
  5. &lt;label asp-for=&quot;IdDegree&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  6. &lt;select asp-for=&quot;IdDegree&quot; asp-items=&quot;@ViewBag.selectlist&quot; class=&quot;form-control&quot; onchange=&quot;Test(this)&quot;&gt;
  7. &lt;option value=&quot;&quot;&gt;Please Select IdDegree&lt;/option&gt;
  8. &lt;/select&gt;
  9. &lt;span asp-validation-for=&quot;IdDegree&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;form-group&quot;&gt;
  12. &lt;label asp-for=&quot;DegreeTitle&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  13. &lt;select asp-for=&quot;DegreeTitle&quot;  class=&quot;form-control&quot; disabled&gt;&lt;/select&gt;
  14. &lt;span asp-validation-for=&quot;DegreeTitle&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  15. &lt;/div&gt;
  16. &lt;div class=&quot;form-group&quot;&gt;
  17. &lt;label asp-for=&quot;DegreeName1&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
  18. &lt;input asp-for=&quot;DegreeName1&quot; class=&quot;form-control&quot; /&gt;
  19. &lt;span asp-validation-for=&quot;DegreeName1&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;form-group&quot;&gt;
  22. &lt;input type=&quot;submit&quot; value=&quot;Create&quot; class=&quot;btn btn-primary&quot; /&gt;
  23. &lt;/div&gt;
  24. &lt;/form&gt;
  25. @section Scripts{
  26. &lt;script&gt;
  27. function Test(a){
  28. var postData = {
  29. &#39;IdDegree&#39;: a.value,
  30. };
  31. var items = &#39;&#39;;
  32. $.ajax({
  33. type: &#39;Get&#39;,
  34. url: &#39;/Test/addItem/&#39;,
  35. data: postData,
  36. contentType: &quot;application/json&quot;,
  37. success: function (data) {
  38. $(&#39;#DegreeTitle&#39;).prop(&#39;disabled&#39;, false);
  39. for (var i = 0; i &lt; data.length; i++){
  40. items += &quot;&lt;option value = &#39;&quot; + data[i] + &quot;&#39;&gt;&quot; + data[i] + &quot; &lt;/option&gt;&quot;;
  41. }
  42. $(&#39;#DegreeTitle&#39;).html(items);
  43. },
  44. })
  45. }
  46. &lt;/script&gt;
  47. }

Demo:

ASP.NET Core MVC从单个表格创建级联下拉列表（Razor）

huangapple
  • 本文由 发表于 2023年3月9日 12:37:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/75680481.html
  • asp.net-core
  • asp.net-core-mvc
  • c#
  • razor
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定