Заполнение выпадающего списка razor из списка в MVC
у меня есть модели:
public class DbUserRole
{
public int UserRoleId { get; set; }
public string UserRole { get; set; }
}
public class DbUserRoles
{
public List<DbUserRole> GetRoles()
{
BugnetReports RoleDropDown = new BugnetReports();
List<DbUserRole> Roles = new List<DbUserRole>();
DataSet table = RoleDropDown.userRoleDropDown();
foreach (DataRow item in table.Tables[0].Rows)
{
DbUserRole ur = new DbUserRole();
ur.UserRole = Convert.ToString(item["UserRoleName"]);
ur.UserRoleId = Convert.ToInt32(item["UserRoleID"]);
Roles.Add(ur);
}
return Roles;
}
}
и вот контроллер, который загружает представление:
//
// GET: /Admin/AddNewUser
public ActionResult AddNewUser()
{
DbUserRoles Roles = new DbUserRoles();
return View(Roles.GetRoles());
}
Я могу получить элементы в списке для отображения с помощью @foreach петли, как показано ниже:
@foreach (var item in Model)
{
<tr>
<td>
@item.UserRoleId
</td>
<td>
@item.UserRole
</td>
</tr>
}
но как заполнить выпадающий список моделью, которая проходит через, я пробовал
@Html.DropDownListFor(x => x.UserRole)
но мне не везет.
8 ответов
вы можете отделить свою бизнес-логику в viewmodel, поэтому ваше представление имеет более чистое разделение.
сначала создайте viewmodel для хранения идентификатора, который пользователь выберет вместе со списком элементов, которые появятся в DropDown.
ViewModel:
public class UserRoleViewModel
{
// Display Attribute will appear in the Html.LabelFor
[Display(Name = "User Role")]
public int SelectedUserRoleId { get; set; }
public IEnumerable<SelectListItem> UserRoles { get; set; }
}
ссылки:
внутри контроллера создайте метод, чтобы получить ваш UserRole список и преобразовать его в форму это будет представлено в представлении.
private IEnumerable<SelectListItem> GetRoles()
{
var dbUserRoles = new DbUserRoles();
var roles = dbUserRoles
.GetRoles()
.Select(x =>
new SelectListItem
{
Value = x.UserRoleId.ToString(),
Text = x.UserRole
});
return new SelectList(roles, "Value", "Text");
}
public ActionResult AddNewUser()
{
var model = new UserRoleViewModel
{
UserRoles = GetRoles()
};
return View(model);
}
ссылки:
теперь, когда viewmodel создан логика представления упрощенный
вид:
@model UserRoleViewModel
@Html.LabelFor(m => m.SelectedUserRoleId)
@Html.DropDownListFor(m => m.SelectedUserRoleId, Model.UserRoles)
ссылки:
это позволит произвести:
<label for="SelectedUserRoleId">User Role</label>
<select id="SelectedUserRoleId" name="SelectedUserRoleId">
<option value="1">First Role</option>
<option value="2">Second Role</option>
<option value="3">Etc...</option>
</select>
@Html.DropDownList("ddl",Model.Select(item => new SelectListItem
{
Value = item.RecordID.ToString(),
Text = item.Name.ToString(),
Selected = "select" == item.RecordID.ToString()
}))
одним из способов может быть;
<select name="listbox" id="listbox">
@foreach (var item in Model)
{
<option value="@item.UserRoleId">
@item.UserRole
</option>
}
</select>
что-то близкое к:
@Html.DropDownListFor(m => m.UserRole,
new SelectList(Model.Roles, "UserRoleId", "UserRole", Model.Roles.First().UserRoleId),
new { /* any html attributes here */ })
вам нужен список выбора для заполнения DropDownListFor. Для любых атрибутов HTML, которые вам нужны, вы можете добавить:
new { @class = "DropDown", @id = "dropdownUserRole" }
вместо List<UserRole>, вы можете позволить вашей модели содержат SelectList<UserRole>. Также добавьте свойство SelectedUserRoleId в магазин... что ж... значение идентификатора выбранного UserRole по.
заполнить вверх списка, затем в вид:
@Html.DropDownListFor(x => x.SelectedUserRoleId, x.UserRole)
и вы должны быть хорошо.
см. также http://msdn.microsoft.com/en-us/library/system.web.mvc.selectlist(v=vs. 108).aspx.
вызов DropDownListFor нужно еще несколько параметров, чтобы конкретизировать его. Вам нужен список выбора, как в следующем вопросе SO:
MVC3 DropDownListFor-простой пример?
С тем, что у вас есть, вы только сказали ему, где хранить данные, а не где загружать список.
@{
List<CategoryModel> CategoryList = CategoryModel.GetCategoryList(UserID);
IEnumerable<SelectListItem> CategorySelectList = CategoryList.Select(x => new SelectListItem() { Text = x.CategoryName.Trim(), Value = x.CategoryID.Trim() });
}
<tr>
<td>
<B>Assigned Category:</B>
</td>
<td>
@Html.DropDownList("CategoryList", CategorySelectList, "Select a Category (Optional)")
</td>
</tr>
@model AdventureWork.CRUD.WebApp4.Models.EmployeeViewModel
@{
ViewBag.Title = "Detalle";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Ingresar Usuario</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonType, labelText: "Tipo de Persona", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Employee.PersonType, new List<SelectListItem>
{
new SelectListItem{ Text= "SC", Value = "SC" },
new SelectListItem{ Text= "VC", Value = "VC" },
new SelectListItem{ Text= "IN", Value = "IN" },
new SelectListItem{ Text= "EM", Value = "EM" },
new SelectListItem{ Text= "SP", Value = "SP" },
}, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Employee.PersonType, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeGender, labelText: "Genero", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Employee.EmployeeGender, new List<SelectListItem>
{
new SelectListItem{ Text= "Masculino", Value = "M" },
new SelectListItem{ Text= "Femenino", Value = "F" }
}, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Employee.EmployeeGender, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonTitle, labelText: "Titulo", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.PersonTitle, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.PersonTitle, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonFirstName, labelText: "Primer Nombre", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.PersonFirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.PersonFirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonMiddleName, labelText: "Segundo Nombre", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.PersonMiddleName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.PersonMiddleName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonLastName, labelText: "Apellido", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.PersonLastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.PersonLastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.PersonSuffix, labelText: "Sufijo", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.PersonSuffix, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.PersonSuffix, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.DepartmentID, labelText: "Departamento", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Employee.DepartmentID, new SelectList(Model.ListDepartment, "DepartmentID", "DepartmentName"), htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Employee.DepartmentID, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeMaritalStatus, labelText: "Estado Civil", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Employee.EmployeeMaritalStatus, new List<SelectListItem>
{
new SelectListItem{ Text= "Soltero", Value = "S" },
new SelectListItem{ Text= "Casado", Value = "M" }
}, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Employee.EmployeeMaritalStatus, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.ShiftId, labelText: "Turno", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Employee.ShiftId, new SelectList(Model.ListShift, "ShiftId", "ShiftName"), htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Employee.ShiftId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeLoginId, labelText: "Login", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.EmployeeLoginId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.EmployeeLoginId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeNationalIDNumber, labelText: "Identificacion Nacional", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.EmployeeNationalIDNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.EmployeeNationalIDNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeJobTitle, labelText: "Cargo", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.EmployeeJobTitle, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.EmployeeJobTitle, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeBirthDate, labelText: "Fecha Nacimiento", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.EmployeeBirthDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
@Html.ValidationMessageFor(model => model.Employee.EmployeeBirthDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Employee.EmployeeSalariedFlag, labelText: "Asalariado", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Employee.EmployeeSalariedFlag, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Employee.EmployeeSalariedFlag, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Guardar" class="btn btn-default" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10" style="color:green">
@ViewBag.Message
</div>
<div class="col-md-offset-2 col-md-10" style="color:red">
@ViewBag.ErrorMessage
</div>
</div>
</div>
}