javascript - 在 ASP.NET MVC 中填充下拉列表的正确方法

Question

这就是我从模型中实现下拉菜单的方式。我只是想检查这是否是正确的方法或者是否有更简单的方法？看起来很复杂。

我的列表的型号:

public class ApplicationRolesDropdownListDetailViewModel
{
    public String RoleId { get; set; }
    public String ApplicationRoleName { get; set; }
}

进入我的 View 的 View 模型

public class ApplicationRolesDropdownListViewModel
{
    public SelectList Roles { get; set; }
}

获取项目列表并将其放入 View 下拉列表中的 Controller :

    public ActionResult NewRole()
    {
        var applicationRoles = applicationRolesData.GetAllApplicationRoles();
        ApplicationRolesDropdownListViewModel ardlvm = new ApplicationRolesDropdownListViewModel();
        ardlvm.Roles = new SelectList(applicationRoles, "RoleId", "ApplicationRoleName");
        return View("~/Views/Users/Modals/AddRole.cshtml", ardlvm);
    }

我的观点:

    <div class="form-group">
        @Html.DropDownListFor(m => m.Roles,Model.Roles, new { @id = "role", @class = "dropdown" })
    </div>

另外，当我通过 JavaScript 从列表中选择一个项目时，我似乎无法获取 RoleId。

编辑:添加了我的 GetApplicationRoles

    public List<ApplicationRolesDropdownListViewModel > GetAllApplicationRoles()
    {
        List<ApplicationRolesDropdownListViewModel > data = new List<ApplicationRolesDropdownListViewModel >();
        try
        {
            var applicationRoles = dbContext.AspNetRolesExtendedDetails.ToList();
            data = (from ar in applicationRoles
                    join a in dbContext.AspNetApplications
                     on ar.ApplicationId equals a.Id
                    select new ApplicationRolesDropdownListViewModel 
                    {
                        RoleId = ar.Id,
                        ApplicationRoleName = ar.Name + " ( " + a.Name + " )"
                    }).ToList();
        }
        catch (Exception e)
        {
            logger.Error(e, AspNetEventLogs.NotFound);
        }
        return data;
    }

Answer 1

尝试这样

ViewModel:

public class ApplicationRolesViewModel
{
    // Display Attribute will appear in the Html.LabelFor
    [Display(Name = "User Role")]
    public string RoleId { get; set; }
    public IEnumerable<SelectListItem> Roles { get; set; }
}

Controller :

public ActionResult NewRole()
    {
        var roleData = new IEnumerable<SelectListItem>();
        applicationRolesData.GetAllApplicationRoles().Foreach(x =>
                   roleData.Add( new SelectListItem
                        {
                            Value = x.RoleId.ToString(),
                            Text = x.ApplicationRoleName
                        });
       );
        ApplicationRolesViewModel ardlvm = new ApplicationRolesViewModel();
        ardlvm.Roles = new SelectList(roleData , "Value", "Text")
        return View("~/Views/Users/Modals/AddRole.cshtml", ardlvm);
    }

查看:

@model ApplicationRolesViewModel

@Html.LabelFor(m => m.RoleId)
@Html.DropDownListFor(m => m.RoleId, Model.Roles)

并在Jquery中获取下拉菜单当前选定的值:

$('#RoleId').val();

获取当前选定的文本:

$('#RoleId:selected').text();