ASP.NET MVC-Core-Cascading DropDownList
Ich habe Probleme bei der Suche ein tutorial /video, das zeigt, wie die Umsetzung von Cascading DropDownList aus einer Datenbank mittels Entity Framework. Ich bin mit ASP.NET MVC-Kern, Entity Framework-Kern mit C#.
Als jetzt, ich bin in der Lage, zum abrufen der Daten aus meiner Datenbank zu meinen 3 DropDownList in Ordnung.
Was ich möchte in der Lage sein, zu erreichen ist, haben die Benutzer wählen Sie ein Staat zuerst, die würde sich dann zeigen alle Städte mit Bezug zu diesem Staat. Dann nach dem Benutzer ausgewählt hat, eine Stadt, es würde zeigen den Zip Code(s) in Bezug auf die Stadt.
Jegliche Hilfe würde sehr geschätzt werden.
Modelle
public class Customer
{
public int CustomerId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int StateId { get; set; }
public int CityId { get; set; }
public int ZipId { get; set; }
public State State { get; set; }
public City City { get; set; }
public Zip Zip { get; set; }
}
public class State
{
public int StateId { get; set; }
public string Abbr { get; set; }
public List<Customer> Customers { get; set; }
}
public class City
{
public int CityId { get; set; }
public string Name { get; set; }
public int StateId { get; set; }
public State State { get; set; }
public List<Customer> Customers { get; set; }
}
public class Zip
{
public int ZipId { get; set; }
public string PostalCode { get; set; }
public int CityId { get; set; }
public City City { get; set; }
public List<Customer> Customers { get; set; }
}
ViewModels
public class CustomerFormVM
{
public int CustomerId { get; set; }
[Display(Name = "First Name")]
[StringLength(50)]
public string FirstName { get; set; }
[Display(Name = "Last Name")]
[StringLength(50)]
public string LastName { get; set; }
[Required(ErrorMessage = "Select State")]
[Display(Name = "State")]
public int StateId { get; set; }
//public IEnumerable<State> States { get; set; }
public IEnumerable<SelectListItem> States { get; set; }
[Required(ErrorMessage = "Select City")]
[Display(Name = "City")]
public int CityId { get; set; }
//public IEnumerable<City> Citys { get; set; }
public IEnumerable<SelectListItem> Citys { get; set; }
[Required(ErrorMessage = "Select Zip")]
[Display(Name = "Zip")]
public int ZipId { get; set; }
//public IEnumerable<Zip> Zips { get; set; }
public IEnumerable<SelectListItem> Zips { get; set; }
}
CustomerController
public class CustomerController : Controller
{
private MultiDbContext db;
public CustomerController(MultiDbContext context)
{
db = context;
}
//GET: /<controller>/
public IActionResult Index()
{
return View(db.Customers.ToList());
}
public IActionResult getCititesFromDatabaseByStateId(int id)
{
return View(db.Citys.Where(c => c.StateId == id).ToList());
}
public IActionResult getCities(int id)
{
var cities = new List<City>();
cities = getCititesFromDatabaseByStateId(id); //call repository
return Json(cities);
}
public ActionResult Create()
{
var states = db.States.ToList();
var citys = db.Citys.ToList();
var zips = db.Zips.ToList();
var viewModel = new CustomerFormVM
{
States = states,
Citys = citys,
Zips = zips
};
return View(viewModel);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CustomerFormVM vm)
{
if (ModelState.IsValid)
{
var customer = new Customer();
{
customer.FirstName = vm.FirstName;
customer.LastName = vm.LastName;
customer.StateId = vm.StateId;
customer.CityId = vm.CityId;
customer.ZipId = vm.ZipId;
}
db.Customers.Add(customer);
db.SaveChanges();
return RedirectToAction("Index");
}
else
{
vm.States = db.States.ToList();
vm.Citys = db.Citys.ToList();
vm.Zips = db.Zips.ToList();
return View(vm);
}
}
public ActionResult Edit(int? id)
{
if (id == null)
{
return NotFound();
}
var customervm = new CustomerFormVM();
{
Customer customer = db.Customers.SingleOrDefault(c => c.CustomerId == id);
if (customer == null)
{
return NotFound();
}
customervm.CustomerId = customer.CustomerId;
customervm.FirstName = customer.FirstName;
customervm.LastName = customer.LastName;
//Retrieve list of States
var states = db.States.ToList();
customervm.States = states;
//Retrieve list of Citys
var citys = db.Citys.ToList();
customervm.Citys = citys;
//Retrieve list of Citys
var zips = db.Zips.ToList();
customervm.Zips = zips;
//Set the selected state
customervm.StateId = customer.StateId;
//Set the selected city
customervm.CityId = customer.CityId;
//Set the selected zip
customervm.ZipId = customer.ZipId;
}
return View(customervm);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(CustomerFormVM vmEdit)
{
if (ModelState.IsValid)
{
Customer customer = db.Customers.SingleOrDefault(c => c.CustomerId == vmEdit.CustomerId);
if (customer == null)
{
return NotFound();
}
customer.FirstName = vmEdit.FirstName;
customer.LastName = vmEdit.LastName;
customer.StateId = vmEdit.StateId;
customer.CityId = vmEdit.CityId;
customer.ZipId = vmEdit.ZipId;
db.Entry(customer).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(vmEdit);
}
}
Create View
<div class="form-group">
@Html.LabelFor(c => c.FirstName)
@Html.TextBoxFor(c => c.FirstName, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(c => c.LastName)
@Html.TextBoxFor(c => c.LastName, new { @class = "form-control" })
</div>
<div class="form-group">
@*@Html.LabelFor(s => s.StateId)
@Html.DropDownListFor(s => s.StateId, new SelectList(Model.States, "StateId", "Abbr"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(s => s.StateId)*@
<label asp-for="StateId "></label>
<select asp-for="StateId " asp-items="Model.States" class="form-control" id="state-target"></select>
<span asp-validation-for="StateId " class="text-danger"></span>
</div>
<div class="form-group">
@*@Html.LabelFor(ct => ct.CityId)
@Html.DropDownListFor(ct => ct.CityId, new SelectList(Model.Citys, "CityId", "Name"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(ct => ct.CityId)*@
<label asp-for="CityId"></label>
<select asp-for="CityId" asp-items="Model.Citys" class="form-control" id="city-target"></select>
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
@Html.LabelFor(z => z.ZipId)
@Html.DropDownListFor(z => z.ZipId, new SelectList(Model.Zips, "ZipId", "PostalCode"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(z => z.ZipId)
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
}
@section scripts {
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/js/example.js"></script>,
}
Herzl, gibt es eine Möglichkeit, damit umzugehen, ohne JS?
Meines Wissens nach müssen Sie mit JS zu lösen diese Anforderung
das einzige JS Sie brauchen, ist in form eines inline-Attribut, d.h.
onchange="this.form.submit()"
. Sie behandeln müssen, dass die post in den controller, und füllen Sie die neuen Kollektionen für die dropdowns.Sie können versuchen, mit Hilfe von JQuery statt JS stackoverflow.com/questions/11273544/...
InformationsquelleAutor Brian Brian | 2016-12-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte eine ähnliche situation, aber in meinem Beispiel habe ich einen Root-Ordner und je nachdem, welche root-Ordner, ich bin mit dem nächsten drop-down-Liste angezeigt, und die entsprechenden sub-Ordner.
Nicht sicher, ob es eine purly asp.net Lösung, aber ich verwendet Jquery/Ajax.
Ihr code sollte wie folgt Aussehen:
html-Liste:
Jquery-code, schreiben Sie diese in .js-Datei und fügen Sie es auf eine bestimmte Ansicht mit dieser Aussage
<script src="~/js/example.js"></script>
, vergessen Sie nicht, Sie hinzufügen müssen, um eine jquery-Bibliothek zu Ihrem Projekt vor allen anderen javascript und Ihreexample.js
enthalten:Den Ajax-request wird die action im Controller abrufen einer Liste von Städten aus der Datenbank (mit so etwas wie
return dbContext.CityTable.Where(c => c.StateId == id).ToList()
innerhalb einergetCititesFromDatabaseByStateId(id)
- Methode) und dann wieder das Json-Objekt, dassuccess
Funktion wird eine Liste der Optionen, und wenden Sie es:In Ihrem
ViewModel
überlegenIEnumerable<State/City/Zip>
(IEnumerable<T>
)IEnumerable<SelectListItem>
. Ich kann sagen wie gut dein Modell ist, sind chaotisch (aber wenn Sie können die Daten aus der Datenbank darauf konzentrieren, wie die Liste funktioniert 1.) betrachten Sie die Verbesserung der Ihnen später.Fix für 2 aufgeführten Fehler in die Kommentare:
return Json(List<City>);
Die Nachricht auf, dass die Zeile gibt 'Liste<City>' ist eine Art, die nicht gültig sind in dem gegebenen Kontext.Okey ich sehe, wo Ihr kommen aus, machen Krank, ein chat-Raum, wo ich kann alles erklären, um Sie.
Okay, es scheint ich kann nicht machen, einen chat-Raum, Kranken weitere Details hinzufügen, auf die Antwort, und ich würde empfehlen, gehen durch einige jquery-tutorials.
Ok, ich habe die änderungen, die Sie vorgeschlagen, und ich werde um diese updates zu meinem ursprünglichen post. Ich bin immer rot Fehlermeldungen, obwohl auf meinem CustomerController jetzt, nachdem ich den code Hinzugefügt, die Sie vorgeschlagen.
Die rote Fehler, ich bin immer auf meine CustomerController sind auf
public IActionResult getCities(int id)
kann Nicht implizit konvertiert den Typ Microsoft.AspNetCore.Mvc.IActionResult System.Sammlungen.Generisches.Liste<MultiDropDown.Modelle.Stadt>. Eine ausdrücklich Konvertierung vorhanden ist (fehlt ein cast?)InformationsquelleAutor Anton Toshik