15赞

在ASP.NET Core MVC中选择Tag Helper

作者：mobiledu2402851203 | 2023-09-08 12:47

如何解决《在ASP.NETCoreMVC中选择TagHelper》经验，为你挑选了2个好方法。

我需要帮助ASP.NET Core中的select标签助手.

我有一个员工列表,我正在尝试绑定到选择标记帮助程序.我的员工在一个List EmployeesList和选定的价值将进入EmployeeId财产.我的视图模型如下所示:

public class MyViewModel
{
   public int EmployeeId { get; set; }
   public string Comments { get; set; }
   public List EmployeesList {get; set; }
}

我的员工类看起来像这样:

public class Employee
{
   public int Id { get; set; }
   public string FullName { get; set; }
}

我的问题是如何告诉我的选择标记助手在下拉列表中Id显示时使用该值作为值FullName？

并且您的HttpPost操作方法接受提交的表单数据.

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

要么

如果您的视图模型具有List作为下拉项的属性.

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

在你的行动中,

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

在视图中,您可以直接使用该Employees属性asp-items.

@model MyViewModel


    Comments
    

    Lucky Employee

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

确保为select元素使用显式结束标记.如果使用自闭合标记方法,标记帮助器将呈现一个空的SELECT元素!

以下方法不起作用

使用实体框架从数据库表中获取数据

以上示例使用硬编码项作为选项.所以我想我会添加一些示例代码来使用Entity框架获取数据,因为很多人都使用它.

让我们假设你的DbContext对象有一个名为属性Employees,它是类型DbSet,其中Employee实体类有一个Id和Name财产这样的

public class Employee
{
   public int Id { set; get; }
   public string Name { set; get; }
}

您可以使用LINQ查询来获取员工,并使用LINQ表达式中的Select方法SelectListItem为每个员工创建一个对象列表.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = context.Employees
                          .Select(a => new SelectListItem() {  
                              Value = a.Id.ToString(),
                              Text = a.Name
                          })
                          .ToList();
    return View(vm);
}

假设context是您的db上下文对象.视图代码与上面相同.

使用SelectList

有些人更喜欢使用SelectList类来保存呈现选项所需的项目.

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public SelectList Employees { set; get; }
}

现在,在您的GET操作中,您可以使用SelectList构造函数来填充Employees视图模型的属性.确保您指定 dataValueField和dataTextField参数.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
    return View(vm);
}
public IEnumerable GetEmployees()
{
    // hard coded list for demo. 
    // You may replace with real data from database to create Employee objects
    return new List
    {
        new Employee { Id = 1, FirstName = "Shyju" },
        new Employee { Id = 2, FirstName = "Bryan" }
    };
}

在这里我打电话的GetEmployees方法来获取Employee对象的列表,每一个Id和FirstName财产,我使用这些属性DataValueField和DataTextField对的SelectList,我们创建的对象.您可以将硬编码列表更改为从数据库表中读取数据的代码.

视图代码将是相同的.

从字符串列表中呈现SELECT元素.

有时您可能希望从字符串列表中呈现select元素.在这种情况下,您可以使用SelectList只需要的构造函数IEnumerable

var vm = new MyViewModel();
var items = new List {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);

视图代码将是相同的.

设置所选选项

有时,您可能希望将一个选项设置为SELECT元素中的默认选项(例如,在编辑屏幕中,您要加载以前保存的选项值).为此,您可以简单地将EmployeeId属性值设置为要选择的选项的值.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List
    {
        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);
}

这将在呈现页面时在select元素中选择Tom选项.

多选下拉列表

如果要渲染多选下拉列表,只需将视图中用于asp-for属性的视图模型属性更改为数组类型即可.

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

这将为select元素呈现HTML标记,其multiple属性允许用户选择多个选项.

@model MyViewModel

在多选中设置所选选项

与单选一样,将EmployeeIds属性值设置为所需的值数组.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List
    {
        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);
}

这将在呈现页面时在多选元素中选择Tom和Jerry选项.

使用ViewBag传输项目列表

如果您不希望保留集合类型属性以将选项列表传递给视图,则可以使用动态ViewBag来执行此操作.(这不是我个人推荐的方法,因为viewbag是动态的,并且您的代码很容易被取消拼写错误)

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

并在视图中

使用ViewBag传输项目列表并设置所选选项

与上述相同.您所要做的就是将属性(为其绑定下拉列表的值)设置为您要选择的选项的值.

public IActionResult Create()
{       
    ViewBag.Employees = new List
    {
        new SelectListItem {Text = "Shyju", Value = "1"},
        new SelectListItem {Text = "Bryan", Value = "2"},
        new SelectListItem {Text = "Sean", Value = "3"}
    };

    vm.EmployeeId = 2;  // This will set Bryan as selected

    return View(new MyViewModel());
}

并在视图中

分组项目

select标记帮助程序方法支持下拉列表中的分组选项.您所要做的就是在action方法中指定 Group每个属性值SelectListItem.

public IActionResult Create()
{
    var vm = new MyViewModel();

    var group1 = new SelectListGroup { Name = "Dev Team" };
    var group2 = new SelectListGroup { Name = "QA Team" };

    var employeeList = new List()
    {
        new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
        new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
        new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
        new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
    };
    vm.Employees = employeeList;
    return View(vm);
}

视图代码没有变化.select标签助手现在将在2个optgroup项目中呈现选项.

我正在寻找如何添加一个空选项,感谢使用`


            
                
                                        会员登录 | 用户注册