选择标签助手选定的值未在视图中呈现答案

【问题标题】：Select tag helper selected value not rendered in view选择标签助手选定的值未在视图中呈现
【发布时间】：2019-04-02 11:07:28
【问题描述】：

我需要一些关于我的选择标签助手的帮助。

我有一个带有 select 2 控件的 asp.net MVC 视图，如下所示：

<div class="col-md-3">
     <div class="form-group">
         <label asp-for="NumberingType.Type" class="control-label" data-toggle="popover" data-placement="right" data-trigger="click" title="Field Help" data-content="Select the Numbering Scheme type that you want to create">Number Scheme Type *</label>
               <select asp-for="NumberingType.TenantNumberingTypeId" asp-items="Model.NumberingType.NumberingTypeList" class="form-control select2">
                    <option></option>
                </select>
          <span asp-validation-for="NumberingType.TenantNumberingTypeId" class="text-danger"></span>
     </div>
</div>

我正在按如下方式初始化 select2：

<script type="text/javascript">
    $(document).ready(function () {

        $(".select2").select2({
            placeholder: "Select",
            theme: 'bootstrap',
            allowClear: true
        });
    });
</script>

我正在加载正确的脚本：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

在我的控制器中，我按如下方式填充选择 2：

public async Task<IActionResult> EditNumberScheme(int numberId)
{
   var vm = new NumberingViewModel();

   try
   {
      vm = await GetNumberingViewModel(numberId);
      vm = UpdatedBaseViewModel<NumberingViewModel>(vm);
   }
   catch (Exception e)
   {
       await ErrorHandler.HandleException(e);

       vm.MessageType = BaseViewModel.UserMessageType.Error;
    }
    return View(vm);
}

和

private async Task<NumberingViewModel> GetNumberingViewModel(int numberId)
{
    var number = await DataGet.GetTenantNumberScheme(numberId);

     NumberingViewModel model = new NumberingViewModel
     {
          Numbering = number
     };

     model.NumberingType = new TenantNumberingTypeModel();
     model.NumberingType.NumberingTypeList = DataGet.GetTenantNumberingTypes().Result
                    .Select(x => new SelectListItem { Value = x.TenantNumberingTypeId.ToString(), Text = x.Type, Selected = (x.TenantNumberingTypeId == number.TenantNumberingTypeId) })
                    .ToList();

       model.Owner = await DataGet.GetTenantOwner(UserInfo.Instance.Tenant.TenantId);

       return model;
}

select2 值已成功从数据库加载，所选值显示在控制器中。

在View中的select处下断点时，很明显在NumberingTypeList中选择的值设置为true。

Model.NumberingType.NumberTypeList = Count = 4
[1] = {Microsoft.AspNetCore.Mvc.Rendering.SelectListItem}
Disabled = false
Group = null
Selected = true
Text = "Credit Note"
Value = "2"

但所选值不会在视图中呈现。

<select class="form-control select2 select2-hidden-accessible" data-val="true" data-val-required="The TenantNumberingTypeId field is required." id="NumberingType_TenantNumberingTypeId" name="NumberingType.TenantNumberingTypeId" tabindex="-1" aria-hidden="true">
<option></option>
<option value="1">Invoice</option>
<option value="2">Credit Note</option>
<option value="3">Order</option>
<option value="4">Deposit</option>
</select>

任何帮助将不胜感激

谢谢

【问题讨论】：

标签： asp.net-mvc select entity-framework-core razor-pages asp.net-core-tag-helpers

【解决方案1】：

这是可见性的例子，你必须使用“select2.full.min.js”。

【讨论】：

感谢您的建议@ceren-özdemir - 但是，这并没有什么不同。我发现所选值确实显示在视图中，但没有显示

【解决方案2】：

我按照本教程https://www.learnrazorpages.com/razor-pages/tag-helpers/select-tag-helper 成功完成了这项工作

好像是绑定了asp-for属性导致的错误。当我在控制器中明确设置所选项目时：

model.NumberType = new TenantNumberingTypeModel();
model.NumberType.NumberSchemeList = DataGet.GetTenantNumberingTypes().Result
    .Select(x => new SelectListItem { Value = x.TenantNumberingTypeId.ToString(), Text = x.Type })
    .ToList();

model.NumberingType.TenantNumberingTypeId = number.TenantNumberingTypeId;

数字是从数据库中检索到的对象

然后它会正常工作，并且 asp-items 会自动选择由 asp-for 属性表示的值。

<select class="form-control select2 select2-hidden-accessible" data-val="true" data-val-required="Please select a type" id="NumberType_NumberTypeId" name="NumberType.NumberTypeId" tabindex="-1" aria-hidden="true">
<option></option>
<option value="1">Invoice</option>
<option selected="selected" value="2">Credit Note</option>
<option value="3">Order</option>
<option value="4">Deposit</option>
</select>

希望这对某人有所帮助

【讨论】：