且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在MVC 6选择标记助手

更新时间:2023-12-05 22:02:40

使用选择标记助手在视图中绘制一个SELECT元素

在你付诸行动,创建您的视图模型的对象,加载 EmployeeList的集合属性并发送到视图。

In your GET action, create an object of your view model, load the EmployeeList collection property and send that to the view.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.EmployeesList = new List<Employee>
    {
        new Employee {Id = 1, FullName = "Shyju"},
        new Employee {Id = 2, FullName = "Scot"}
    };
    return View(vm);
}

而在你创建视图,创建从 EmployeeList的属性一个新的的SelectList 对象,并传递作为价值在 ASP-项目属性。

And in your create view, create a new SelectList object from the EmployeeList property and pass that as value for the asp-items property.

@model MyViewModel
<form asp-controller="Home" asp-action="Create">

    <select asp-for="EmployeeId" 
                    asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
        <option>Please select one</option>
    </select>
    <input type="submit"/>
</form>

和您的HttpPost操作方法来接受提交的表单数据。

And your HttpPost action method to accept the submitted form data.

[HttpPost]
public IActionResult Create(MyViewModel model)
{
   //  check model.EmployeeId 
   //  to do : Save and redirect
}

如果您的视图模式有一个列表&LT; SelectListItem方式&gt; 的属性您下拉项

Or if your view model has a List<SelectListItem> as the property for your dropdown items.

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public string Comments { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

而在你的获取动作,

And in your get action,

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "1"},
        new SelectListItem {Text = "Sean", Value = "2"}
    };
    return View(vm);
}

和在视图中,可以直接用于 ASP-项目员工属性。

And in the view, you can directly use the Employees property for the asp-items.

@model MyViewModel
<form asp-controller="Home" asp-action="Create">
    <label>Comments</label>
    <input type="text" asp-for="Comments"/>

    <label>Lucky Employee</label>
    <select asp-for="EmployeeId" asp-items="@Model.Employees" >
        <option>Please select one</option>
    </select>
    <input type="submit"/>
</form>

SelectListItem 属于 Microsoft.AspNet.Mvc.Rendering 命名空间。

有些时候,你可能需要设置一个选项作为SELECT元素的默认选项(例如,在编辑屏幕,你要加载pviously保存的选项值的$ P $)。要做到这一点,你可以简单地雇员属性值设置为你想要选择的选项的值。

Some times,you might want to set one option as the default option in the SELECT element (For example, in an edit screen, you want to load the previously saved option value). To do that, you may simply set the EmployeeId property value to the value of the option you want to be selected.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "11"},
        new SelectListItem {Text = "Tom", Value = "12"},
        new SelectListItem {Text = "Jerry", Value = "13"}
    };
    vm.EmployeeId =12;  // Here you set the value
    return View(vm);
}

这将选择在当页面呈现的选择元素的选项汤姆。

This will select the option Tom in the select element when the page is rendered.

如果你想呈现一个多选择下拉菜单中,你可以简单地改变你使用您的视图模型属性ASP换属性,在视图中的数组类型。

If you want to render a multi select dropdown, you can simply change your view model property which you use for asp-for attribute in your view to an array type.

public class MyViewModel
{
    public int[] EmployeeIds { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

这将呈现的HTML标记与多个属性,这将允许用户选择多个选项选择元素。

This will render the HTML markup for the select element with the multiple attribute which will allow the user to select multiple options.

@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
    <option>Please select one</option>
    <option value="1">Shyju</option>
    <option value="2">Sean</option>
</select>

多选择的设置选项中选择

类似于单个选择,将 EmployeeIds 属性值到一个数组你想要的值。

Setting selected options in multi select

Similar to single select, set the EmployeeIds property value to the an array of values you want.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "11"},
        new SelectListItem {Text = "Tom", Value = "12"},
        new SelectListItem {Text = "Jerry", Value = "13"}
    };
    vm.EmployeeIds= new int[] { 12,13} ;  
    return View(vm);
}

这将选择的时候,页面呈现多选择元素的选项汤姆和杰里。

This will select the option Tom and Jerry in the multi select element when the page is rendered.