如何使用 ASP.Net Core @Html.DropDownListFor 指定默认选项？

Question

我有一个 .cshtml 文件，如下所示：

@Html.DropDownListFor(
    m => m.MyModel.YesNoQuestion,                    // IHtmlHelper<TModel> htmlHelper
    new SelectList(Enum.GetValues(typeof(YesNo))),   // Expression<Func<TModel,TResult>>,
    "No",    // IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> selectList (can be "null")
    new { @class = "custom-select", @id = "MyModel.YesNoQuestion" }  // object htmlAttributes
)

不幸的是，生成的下拉列表如下所示：

No
Yes
No

在 Chrome 开发者工具中呈现的 HTML 如下所示：

<select class="custom-select" id="MyModel_YesNoQuestion" name="MyModel.YesNoQuestion">
  <option value>No</option>
  <option>Yes</option>
  <option>No</option>
</select>

我想要完成的是：

<select class="custom-select" id="MyModel_YesNoQuestion" name="MyModel.YesNoQuestion">
  <option>Yes</option>
  <option selected>No</option>
</select>

问：如何在 ASP.Net Core DropdownListFor 中指定默认选项？

问：第三个参数“不”究竟是做什么的？ 参数 2（“新的 SelectList”）生成我的下拉列表，那么参数 3 应该用于什么？

Answer 1

使用 razor 语法，而不是使用标签助手。

您的 .cshtml 如下所示：

@model SettingsViewModel

<form method="post" asp-controller="Home" asp-action="Index">
    <label asp-for="YesNo">Yes or no?</label>
    <select asp-for="YesNo" asp-items="Html.GetEnumSelectList<YesNoOptions>()"></select>
</form>

你的 SettingsViewModel.cs 喜欢他的：

    public class SettingsViewModel
    {
        public YesNoOptions YesNo { get; set; } = YesNoOptions.No;
    }

和 YesNoOtpions 枚举是这样的：

    public enum YesNoOptions
    {
        No, Yes
    }

如您所见，您仍然需要在视图模型中设置默认值，正如@Mika Tähtinen 在第一个答案中提到的那样。

Answer 2

问：如何在 ASP.Net Core DropdownListFor 中指定默认选项？

Html.DropDownListFor<TModel,TProperty> 扩展方法是一种强类型扩展方法，为使用 lambda 表达式指定的属性生成元素。

要设置默认选定值，我们可以通过第一个参数 .cshtml.cs 页面代码进行设置，如下所示：

    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        } 
        [BindProperty]
        public YesNo YesNo { get; set; }   //Enum type, used to set the dropdownlist options
        [BindProperty]
        public string YesNoSelected { get; set; } //used to get the Dropdownlist seleted value.
        public void OnGet()
        {
            YesNoSelected = ((int)YesNo.Yes).ToString();  //set the default selected value.
        }
    }
    public enum YesNo
    {
        No, Yes
    }

.cshtml页面中的代码：这里我们必须使用Value和Text属性绑定DropDownList，然后，我们可以根据选择的值设置默认值：

    @Html.DropDownListFor(m => m.YesNoSelected,     // IHtmlHelper<TModel> htmlHelper
            new SelectList(Enum.GetValues(typeof(YesNo)).OfType<Enum>().Select(x => new SelectListItem
            {
                Text = Enum.GetName(typeof(YesNo), x),
                Value = (Convert.ToInt32(x)).ToString(),
            }), "Value", "Text"),   // Expression<Func<TModel,TResult>>,
            //"Select Options",    // IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> selectList (can be "null")
            new { @class = "custom-select", @id = "Model.YesNoQuestion" }  // object htmlAttributes
        )

此外，您还可以通过SelectList(IEnumerable, String, String, Object)方法设置默认值（使用最后一个参数设置选定的值），尝试使用以下代码：

    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        } 
        [BindProperty]
        public YesNo YesNo { get; set; }   //Enum type, used to set the dropdownlist options
        [BindProperty]
        public string YesNoSelected { get; set; } //used to get the Dropdownlist seleted value.
        public void OnGet()
        { 
           // YesNoSelected = ((int)YesNo.Yes).ToString();  //set the default selected value.
        }
    }
    public enum YesNo
    {
        No, Yes
    }

.cshtml 页面中的代码：

    @page
    @model IndexModel 

    @Html.DropDownListFor(m => m.YesNoSelected,     // IHtmlHelper<TModel> htmlHelper
            new SelectList(Enum.GetValues(typeof(YesNo)).OfType<Enum>().Select(x => new SelectListItem
            {
                Text = Enum.GetName(typeof(YesNo), x),
                Value = (Convert.ToInt32(x)).ToString(),
            }), "Value", "Text", ((int)YesNo.Yes).ToString()),   // Expression<Func<TModel,TResult>>, //set default selected value.
            //"Select Options",    // IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> selectList (can be "null")
            new { @class = "custom-select", @id = "Model.YesNoQuestion" }  // object htmlAttributes
        )

输出如下：

问：第三个参数“不”究竟是做什么的？ 参数 2（“新的 SelectList”）生成我的下拉列表，那么参数 3 应该用于什么？

第三个参数是可选的，它将是 DropDownList 的第一项。 通常，我们可以使用添加描述或提示，如下所示：

    @Html.DropDownListFor(m => m.YesNoSelected,     // IHtmlHelper<TModel> htmlHelper
            new SelectList(Enum.GetValues(typeof(YesNo)).OfType<Enum>().Select(x => new SelectListItem
            {
                Text = Enum.GetName(typeof(YesNo), x),
                Value = (Convert.ToInt32(x)).ToString(),
            }), "Value", "Text", ((int)YesNo.Yes).ToString()),   // Expression<Func<TModel,TResult>>,
            "Select Yes or No",    // IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> selectList (can be "null")
            new { @class = "custom-select", @id = "Model.YesNoQuestion" }  // object htmlAttributes
        )

结果如下图：

如果您不想添加此选项，只需将其删除即可。

编辑：

使用 JavaScript/JQuery 方法设置 DropDownList 默认选择值：

    @Html.DropDownListFor(m => m.YesNoSelected,     // IHtmlHelper<TModel> htmlHelper
            new SelectList(Enum.GetValues(typeof(YesNo)).OfType<Enum>().Select(x => new SelectListItem
            {
                Text = Enum.GetName(typeof(YesNo), x),
                Value = (Convert.ToInt32(x)).ToString(),
            }), "Value", "Text"),   // Expression<Func<TModel,TResult>>,
            //"Select Yes or No",    // IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> selectList (can be "null")
            new { @class = "custom-select", @id = "Model_YesNoQuestion" }  // object htmlAttributes
        )

    <input type="hidden" id="ddldefault" value="1" />

    @section Scripts{
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script type="text/javascript">
            $(function () { 
                var ddldefault = $("#ddldefault").val(); //default selected value.
                $("#Model_YesNoQuestion option").each(function (index, item) {
                    //You could also use the text() method to check whether the option is selected or not.
                    if ($(item).val() == ddldefault) {
                        $(item).attr("selected", "selected");
                    }
                    else {
                        $(item).removeAttr("selected");
                    }
                });
            });
        </script> 
    }

Answer 3

第三个参数是提供一个默认的空项目，所以它不是你想要的。 要默认选择“No”，您需要在初始化模型时将模型中的 YesNoQuestion 设置为 No。