级联下拉菜单不触发

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

Cascade Dropdown not trigger

问题

我正在使用asp.net core。我有以下的控制器：

  1. public async Task<IActionResult> Edit(string id, string nomor)
  2. {
  3.     if (id == null || nomor == null || _context.Mfbnkcoms == null)
  4.     {
  5.         return NotFound();
  6.     }
  8.     //var model = await _context.Mfbnkcoms.FindAsync(id);
  9.     var model = await _context.Mfbnkcoms.Where(x => x.MfbnkcomBankId == id && x.MfbnkcomNoRekening == nomor).SingleOrDefaultAsync();
  10.     if (model == null)
  11.     {
  12.         return NotFound();
  13.     }
  15.     var glaccountselect =
  16.         _context.Mfcoas
  17.             .Select(s => new
  18.             {
  19.                 AccId = s.MfcoaAccount,
  20.                 AccDescription = $"{s.MfcoaAccount} -- &#163;{s.MfcoaDes}"
  21.             })
  22.             .ToList();
  23.     return View(model);
  24. }
  26. public IActionResult GetSubAccount(string sid)
  27. {
  28.     //var SubAccountList = _context.Mfsoas.Where(s => s.MfsoaAcc == sid).Select(c => new { Id = c.MfsoaAccount, Name = c.MfsoaAccount }).ToList();
  29.     var SubAccountList = _context.Mfsoas.Where(s => s.MfsoaAcc == sid).Select(c => new { Id = c.MfsoaAccount, Name = string.Format("{0}-- &#163;{1}", c.MfsoaAccount, c.MfsoaDes) }).ToList();
  30.     return Json(SubAccountList);
  31. }

在视图中：

  1. <div class="form-group row">
  2.     <label for="GLAccount" class="col-md-2 col-form-label">GL Account</label>
  3.     <div class="col-md-6">
  4.         <select asp-for="MfbnkcomAccount" asp-items="ViewBag.Glaccount" class="form-control select2" name="GLAccount" id="GLAccount" data-live-search="true" data-size="11">
  5.             <option value="">-- Select Account --</option>
  6.         </select>
  7.     </div>
  9.     <label for="SubAccount" class="col-md-2 col-form-label">Sub Account</label>
  10.     <div class="col-md-6">
  11.         <select asp-for="MfbnkcomSubAcc" class="form-control select2" name="SubAccount" id="SubAccount" data-live-search="true" data-size="11">
  12.             <option value="">-- Select SubAccount --</option>
  13.         </select>
  14.     </div>
  15. </div>
  17. <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  18. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" integrity="sha512-CbQfNVBSMAYmnzP3IC+mZZmYMP2HUnVkV4+PwuhpiMUmITtSpS7Prr3fNncV1RBOnWxzz4pYQ5EAGG4ck46Oig==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  21. <script>
  22.     $('.select2').select2({
  23.         theme: "bootstrap"
  24.     });
  25. </script>
  27. <script>
  28.     $(function () {
  29.         $("select#GLAccount").change(function () {
  30.             var sid = $(this).val();
  32.             $("select#SubAccount").empty();
  34.             $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
  35.                 //console.log(data);
  36.                 $.each(data, function (i, item) {
  37.                     $("select#SubAccount").append(`<option value="${item.id}">${item.name}</option>`);
  38.                 });
  39.             });
  40.         })
  41.     });
  42. </script>

我有一个Index页面，显示数据列表。当我点击表格上的Edit按钮时，它会重定向到Edit页面。编辑页面将显示所选数据的详细信息。

所有数据都显示正常，只有SubAccount选择框中的数据没有显示。为什么会这样？请提供建议。

谢谢。

英文:

I am using asp.net core. I have the following controller:<br>

  1. public async Task&lt;IActionResult&gt; Edit(string id, string nomor)
  2. {
  3. if (id == null || nomor == null || _context.Mfbnkcoms == null)
  4. {
  5. return NotFound();
  6. }
  7. //var model = await _context.Mfbnkcoms.FindAsync(id);
  8. var model = await _context.Mfbnkcoms.Where(x =&gt; x.MfbnkcomBankId == id &amp;&amp; x.MfbnkcomNoRekening == nomor).SingleOrDefaultAsync();
  9. if (model == null)
  10. {
  11. return NotFound();
  12. }
  13. var glaccountselect =
  14. _context.Mfcoas
  15. .Select(s =&gt; new
  16. {
  17. AccId = s.MfcoaAccount,
  18. AccDescription = $&quot;{s.MfcoaAccount} -- &#163;{s.MfcoaDes}&quot;
  19. })
  20. .ToList();
  21. return View(model);
  22. }
  23. public IActionResult GetSubAccount(string sid)
  24. {
  25. //var SubAccountList = _context.Mfsoas.Where(s =&gt; s.MfsoaAcc == sid).Select(c =&gt; new { Id = c.MfsoaAccount, Name = c.MfsoaAccount }).ToList();
  26. var SubAccountList = _context.Mfsoas.Where(s =&gt; s.MfsoaAcc == sid).Select(c =&gt; new { Id = c.MfsoaAccount, Name = string.Format(&quot;{0}-- &#163;{1}&quot;, c.MfsoaAccount, c.MfsoaDes) }).ToList();
  27. return Json(SubAccountList);
  28. }

On the View:<br>

  1. &lt;div class=&quot;form-group row&quot;&gt;
  2. &lt;label for=&quot;GLAccount&quot; class=&quot;col-md-2 col-form-label&quot;&gt;GL Account&lt;/label&gt;
  3. &lt;div class=&quot;col-md-6&quot;&gt;
  4. &lt;select asp-for=&quot;MfbnkcomAccount&quot; asp-items=&quot;ViewBag.Glaccount&quot; class=&quot;form-control select2&quot; name=&quot;GLAccount&quot; id=&quot;GLAccount&quot; data-live-search=&quot;true&quot; data-size=&quot;11&quot;&gt;
  5. &lt;option value=&quot;&quot;&gt;-- Select Account --&lt;/option&gt;
  6. &lt;/select&gt;
  7. &lt;/div&gt;
  8. &lt;label for=&quot;SubAccount&quot; class=&quot;col-md-2 col-form-label&quot;&gt;Sub Account&lt;/label&gt;
  9. &lt;div class=&quot;col-md-6&quot;&gt;
  10. &lt;select asp-for=&quot;MfbnkcomSubAcc&quot; class=&quot;form-control select2&quot; name=&quot;SubAccount&quot; id=&quot;SubAccount&quot; data-live-search=&quot;true&quot; data-size=&quot;11&quot;&gt;
  11. &lt;option value=&quot;&quot;&gt;-- Select SubAccount --&lt;/option&gt;
  12. &lt;/select&gt;
  13. &lt;/div&gt;

</div>

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
  2. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css&quot; integrity=&quot;sha512-CbQfNVBSMAYmnzP3IC+mZZmYMP2HUnVkV4+PwuhpiMUmITtSpS7Prr3fNncV1RBOnWxzz4pYQ5EAGG4ck46Oig==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot; /&gt;
  3. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js&quot;&gt;&lt;/script&gt;
  4. &lt;script&gt;
  5. $(&#39;.select2&#39;).select2({
  6. theme: &quot;bootstrap&quot;
  7. });
  8. &lt;/script&gt;
  9. &lt;script&gt;
  10. $(function () {
  11. $(&quot;select#GLAccount&quot;).change(function () {
  12. var sid = $(this).val();
  13. $(&quot;select#SubAccount&quot;).empty();
  14. $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
  15. //console.log(data);
  16. $.each(data, function (i, item) {
  17. $(&quot;select#SubAccount&quot;).append(`&lt;option value=&quot;${item.id}&quot;&gt;${item.name}&lt;/option&gt;`);
  18. });
  19. });
  20. })
  21. });
  22. &lt;/script&gt;

I have an Index page which is the list of the data. When I click Edit button on the table. It will redirect to Edit page. The edit page will show with the detail of the selected data.<br>

All data appears, only data on SubAccount select is not shown. How this is happen? <br>
Advice please.

Thank you.

答案1

得分: 1

I test your code and set breakpoint at GetSubAccount, but it won't execute the GetSubAccount method. Try to change your code:

  1. $(&quot;select#GLAccount&quot;).on(&quot;change&quot;, function () { 
  2.     var sid = $(this).val();
  4.     $(&quot;select#SubAccount&quot;).empty();
  6.     $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
  7.         //console.log(data);
  8.         $.each(data, function (i, item) {
  9.             $(&quot;select#SubAccount&quot;).append(`&lt;option value=&quot;${item.id}&quot;&gt;${item.name}&lt;/option&gt;`);
  10.         });
  11.     });
  12. })

Update

Add the following code in your edit action:

  1. ViewBag.SubAccountList = _context.Mfsoas
  2.     .Select(s =&gt; new SelectListItem() { Text =  $&quot;{s.MfcoaAccount} -- &#163;{s.MfcoaDes}&quot;, Value = s.MfcoaAccount.ToString()  })
  3.     .ToList();

And add asp-items=&quot;ViewBag.SubAccountList&quot; to your HTML:

  1. <label for=&quot;SubAccount&quot; class=&quot;col-md-2 col-form-label&quot;&gt;Sub Account&lt;/label&gt;
  2. <div class=&quot;col-md-6&quot;&gt;
  3.     <select asp-for=&quot;MfbnkcomSubAcc&quot; asp-items=&quot;ViewBag.SubAccountList&quot; class=&quot;form-control select2&quot; name=&quot;SubAccount&quot; id=&quot;SubAccount&quot; data-live-search=&quot;true&quot; data-size=&quot;11&quot;&gt;
  4.         <option value=&quot;&quot;&gt;-- Select SubAccount --&lt;/option&gt;
  5.     </select&gt;
  6. </div&gt;

Result:

级联下拉菜单不触发

英文:

I test your code and set breakpoint at GetSubAccount ,but it won't excute the GetSubAccount method. Try to change your code :

  1. $(function () {
  2. $(&quot;select#GLAccount&quot;).change(function () {
  3. var sid = $(this).val();
  4. $(&quot;select#SubAccount&quot;).empty();
  5. $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
  6. //console.log(data);
  7. $.each(data, function (i, item) {
  8. $(&quot;select#SubAccount&quot;).append(`&lt;option value=&quot;${item.id}&quot;&gt;${item.name}&lt;/option&gt;`);
  9. });
  10. });
  11. })
  12. });

into( remove $(function () {):

  1. $(&quot;select#GLAccount&quot;).on(&quot;change&quot;, function () { 
  2. // or 
  3. //$(&quot;select#GLAccount&quot;).change(function () {
  4. var sid = $(this).val();
  5. $(&quot;select#SubAccount&quot;).empty();
  6. $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
  7. //console.log(data);
  8. $.each(data, function (i, item) {
  9. $(&quot;select#SubAccount&quot;).append(`&lt;option value=&quot;${item.id}&quot;&gt;${item.name}&lt;/option&gt;`);
  10. });
  11. });
  12. });

result:
级联下拉菜单不触发

Update

Add below in your edit action:

  1.  ViewBag.SubAccountList = _context.Mfsoas
  2. .Select(s =&gt; new SelectListItem() { Text =  $&quot;{s.MfcoaAccount} -- &#163;{s.MfcoaDes}&quot;, Value = s.MfcoaAccount.ToString()  })
  3. .ToList();

And add asp-items=&quot;ViewBag.SubAccountList&quot; :

  1. &lt;label for=&quot;SubAccount&quot; class=&quot;col-md-2 col-form-label&quot;&gt;Sub Account&lt;/label&gt;
  2. &lt;div class=&quot;col-md-6&quot;&gt;
  3. &lt;select asp-for=&quot;MfbnkcomSubAcc&quot; asp-items=&quot;ViewBag.SubAccountList&quot; class=&quot;form-control select2&quot; name=&quot;SubAccount&quot; id=&quot;SubAccount&quot; data-live-search=&quot;true&quot; data-size=&quot;11&quot;&gt;
  4. &lt;option value=&quot;&quot;&gt;-- Select SubAccount --&lt;/option&gt;
  5. &lt;/select&gt;
  6. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年6月19日 15:13:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/76504375.html
  • ajax
  • asp.net-core
  • c#
  • jquery
匿名

发表评论

匿名网友

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

确定