SELECT öğesi oluşturmak için Etiket Seç yardımcılarını kullanma
GET eyleminizde, görünüm modelinizin bir nesnesini oluşturun, EmployeeListcollection özelliğini yükleyin ve bunu görünüme gönderin.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
Oluşturma görünümünüzde, özellikten yeni bir SelectListnesne oluşturun ve bunu EmployeeListözellik için değer olarak asp-itemsiletin.
@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>
Ve gönderilen form verilerini kabul etmek için HttpPost eylem yönteminiz.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
Veya
Görünüm modelinizde List<SelectListItem>açılır öğeleriniz için bir özellik varsa.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Ve harekete geçtiğinizde,
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);
}
Ve görünümde, doğrudan Employeesözelliği için kullanabilirsiniz 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>
Sınıf SelectListItem, Microsoft.AspNet.Mvc.Renderingad alanına aittir .
Select öğesi için açık bir kapatma etiketi kullandığınızdan emin olun. Kendiliğinden kapanan etiket yaklaşımını kullanırsanız, etiket yardımcısı boş bir SELECT öğesi oluşturur!
Aşağıdaki yaklaşım işe yaramayacak
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
Ama bu işe yarayacak.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
Varlık çerçevesini kullanarak veritabanı tablonuzdan veri alma
Yukarıdaki örnekler, seçenekler için sabit kodlanmış öğeler kullanmaktadır. Bu yüzden ben birçok kişi bunu kullanmak gibi Varlık çerçevesini kullanarak veri almak için bazı örnek kod ekleyeceğini düşündüm.
DbContext nesnenizin, varlık sınıfının ve böyle bir özelliğe sahip olduğu Employeestürde bir özelliğe sahip olduğunu varsayalım.DbSet<Employee>EmployeeIdName
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
Çalışanları almak için bir LINQ sorgusu kullanabilir ve SelectListItemher çalışan için bir nesne listesi oluşturmak üzere LINQ ifadenizdeki Select yöntemini kullanabilirsiniz .
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);
}
contextDb bağlam nesneniz olduğunu varsayarsak . Görünüm kodu yukarıdakiyle aynıdır.
SelectList'i kullanma
Bazı insanlar SelectList, seçenekleri oluşturmak için gereken öğeleri tutmak için sınıf kullanmayı tercih eder .
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Şimdi GET eyleminizde, görünüm modelinin özelliğini SelectListdoldurmak için yapıcıyı kullanabilirsiniz Employees. dataValueFieldVe dataTextFieldparametrelerini belirttiğinizden emin olun .
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
İşte ben arıyorum GetEmployeesyöntemi, bir ile her Çalışan nesnelerin listesini almak Idve FirstNamemülk ve ben bu özellikleri kullanmak DataValueFieldve DataTextFieldiçinde SelectListyarattığımız nesne. Sabit kodlu listeyi, bir veritabanı tablosundan veri okuyan bir koda değiştirebilirsiniz.
Görünüm kodu aynı olacaktır.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Dizeler listesinden bir SELECT öğesi oluşturun.
Bazen bir dize listesinden bir seçim öğesi oluşturmak isteyebilirsiniz. Bu durumda, SelectListyalnızcaIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
Görünüm kodu aynı olacaktır.
Seçilen seçenekleri ayarlama
Bazı durumlarda, bir seçeneği SELECT öğesinde varsayılan seçenek olarak ayarlamak isteyebilirsiniz (Örneğin, bir düzenleme ekranında önceden kaydedilmiş seçenek değerini yüklemek istersiniz). Bunu yapmak için, EmployeeIdözellik değerini seçilmesini istediğiniz seçeneğin değerine ayarlayabilirsiniz .
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);
}
Bu, sayfa oluşturulduğunda seçim öğesindeki Tom seçeneğini seçer.
Çoklu seçim açılır menüsü
Çoklu seçim açılır menüsünü oluşturmak istiyorsanız, görünümünüzde özellik için kullandığınız görünüm modeli özelliğini asp-forbir dizi türüyle değiştirebilirsiniz.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Bu multiple, kullanıcının birden çok seçenek seçmesine olanak tanıyan özniteliğe sahip select öğesinin HTML işaretlemesini oluşturur .
@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>
Çoklu seçimde seçilen seçenekleri ayarlama
Tek seçime benzer şekilde, EmployeeIdsözellik değerini istediğiniz değer dizisine ayarlayın .
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);
}
Bu, sayfa oluşturulduğunda çoklu seçim öğesinde Tom ve Jerry seçeneğini seçer.
Öğe listesini aktarmak için ViewBag kullanma
Eğer görünüme seçenekler listesini geçirmek için bir koleksiyon türü özelliği tutmayı tercih etmiyorsanız, bunu yapmak için dinamik ViewBag kullanabilirsiniz. ( Bu benim kişisel olarak önerilen yaklaşım değildir viewbag dinamiktir ve kodunuzu uncatched eğilimli olarak yazım hataları )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
ve görünümde
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Öğe listesini aktarmak ve seçilen seçeneği ayarlamak için ViewBag kullanma
Yukarıdaki ile aynı. Yapmanız gereken tek şey, özellik (açılır liste için bağlayıcı olduğunuz) değerini, seçmek istediğiniz seçeneğin değerine ayarlamaktır.
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
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());
}
ve görünümde
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Öğeleri gruplama
Seçme etiketi yardımcı yöntemi, bir açılır menüde gruplama seçeneklerini destekler. Tek yapmanız gereken , eylem yönteminizde Groupher birinin özellik değerini belirtmektir 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<SelectListItem>()
{
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);
}
Görünüm kodunda değişiklik yok. select tag helper şimdi 2 optgroup item içindeki seçenekleri sunacaktır .