问:如何在 ASP.Net Core 中指定默认选项
DropdownListFor?
Html.DropDownListFor 扩展方法是一种强类型扩展方法,使用 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>
}