I am a solo and very beginner learner. I am trying to create a simple code first app with a database using EF6. I cannot understand how to insert the data of a entity inside another by the frontend.
I have two entities:
public class Movie
{
[Key]
public int Id { get; set; }
public string Title{ get; set; }
public int ActorId { get; set; }
public ICollection<Actor> Actors { get; set; }
}
public class Actor
{
[Key]
public int Id { get; set; }
public string Name { get; set; }
[ForeignKey("MovieId")]
public ICollection<Movie> Movies { get; set; }
}
The controller.
public ActionResult AddMovie()
{
var actorsList = (from Name in ctx.Attors select Name).ToList();
ViewBag.Actors = new SelectList(actorsList, "Name", "Name");
return View(new Film());
}
[HttpPost]
public ActionResult PerformAddMovie(Movie m)
{
try
{
ctx.Movies.Add(m);
ctx.SaveChanges();
return RedirectToAction("Index", "Home");
}
catch(Exception ex)
{
ModelState.AddModelError("", ex.Message);
}
return RedirectToAction("Index", "Home");
}
#model Cinema.Models.Movie
#{
ViewBag.Title = "AddMovie";
}
<h2>AddFilm</h2>
#{
var list = ViewBag.Actors as SelectList;
}
#using (Html.BeginForm("PerformAddMovie", "Movie", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Film</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ActorId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ActorId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ActorId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Actors, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.Actors, list, "---Select---", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Actors, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
After adding some movies into the database by the frontend web page, in the addmovie web page I can select one of them by the dropdown list, but when I save the movie nothing happens inside the third table created with movieid and actorid, it is always empty.
What am I doing wrong?
The Model is wrong
public class Movie
{
[Key]
public int Id { get; set; }
public string Title{ get; set; }
public int ActorId { get; set; }
public virtual Actor Actor { get; set; } // It should be one to one relationship
}
public class Actor
{
[Key]
public int Id { get; set; }
public string Name { get; set; }
//[ForeignKey("MovieId")] This is unneccessary
public ICollection<Movie> Movies { get; set; }
}
Then u can select the Actor Id as key while display actor name in the select list
ViewBag.Actors = new SelectList((from s in db.Actor
select new {Id = s.Id, Name = s.Name }),
"Id", "Name");
Remove this under your html as the Id is attached to the dropdown list
<div class="form-group">
#Html.LabelFor(model => model.ActorId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ActorId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ActorId, "", new { #class = "text-danger" })
</div>
</div>
change the dropdownlist to this
<div class="form-group">
#Html.LabelFor(model => model.ActorId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.ActorId, (Selectlist)ViewBag.Actor, "---Select---", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ActorId, "", new { #class = "text-danger" })
</div>
</div>
I'm trying to insert an image file that a user uploads from a web form into my SQL database so that it shows up on my Index page next to their information. All of the other information sends and shows up on the page, but the photo simply won't save to the database or display on the Index. Could someone help me figure out what I have wrong?
FacultyController.cs
using POS.Datos;
using POS.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using System.IO ;
namespace POS.Controllers
{
public class FacultyController : Controller
{
FacultyAdmin admin = new FacultyAdmin();
// GET: Faculty
public ActionResult Index()
{
return View(admin.Consultar());
}
[HttpGet]
public ActionResult Nuevo()
{
ViewBag.Meal_Plan = GetPlanesSelect();
admin.Consultar();
return View();
}
[HttpPost]
[ActionName("Guardar")]
public ActionResult NuevoPost(Faculty empleado)
{
if (ModelState.IsValid)
{
Cafeteria_POSEntities context = new Cafeteria_POSEntities();
admin.Consultar();
context.Faculties.Add(empleado);
context.SaveChanges();
ViewBag.mensaje = "Informacion Guardada";
return RedirectToAction("Index");
}
return View(empleado);
}
public ActionResult Guardar() // HTTP GET
{
ViewBag.mensaje = "";
ViewBag.Meal_Plan = GetPlanesSelect();
return View();
}
[HttpGet]
public ActionResult Editar(int id)
{
Cafeteria_POSEntities context = new Cafeteria_POSEntities();
Faculty empleado = context.Faculties.Single(x => x.Employee_ID == id);
ViewBag.Meal_Plan = GetPlanesSelect();
return View(empleado);
}
[HttpPost]
[ActionName("Editar")]
public ActionResult Editar(Faculty empleado)
{
if (ModelState.IsValid)
{
Cafeteria_POSEntities context = new Cafeteria_POSEntities();
context.Entry(empleado).State = EntityState.Modified;
context.SaveChanges();
return RedirectToAction("Index");
}
return View(empleado);
}
public IEnumerable<SelectListItem> GetPlanesSelect()
{
using (Cafeteria_POSEntities Context = new Cafeteria_POSEntities())
{
return Context.Plans.Select(plan => new SelectListItem { Value = plan.Plan_Name, Text = plan.Plan_Name }).ToList();
}
}
[HttpGet]
public ActionResult Eliminar(int id)
{
Cafeteria_POSEntities context = new Cafeteria_POSEntities();
Faculty empleado = context.Faculties.Single(x => x.Employee_ID == id);
return View(empleado);
}
[HttpPost]
[ActionName("Eliminar")]
public ActionResult EliminarConfirm(int id)
{
Cafeteria_POSEntities context = new Cafeteria_POSEntities();
Faculty empleado = context.Faculties.Single(x => x.Employee_ID == id);
context.Faculties.Remove(empleado);
context.SaveChanges();
return RedirectToAction("Index");
}
// Saves user-uploaded image to the database //
public string Upload_Image(HttpPostedFileBase image_file)
{
Random r = new Random() ;
String path = "-1" ;
int random = r.Next() ;
if (image_file != null && image_file.ContentLength > 0)
{
string extension = Path.GetExtension(image_file.FileName) ;
if (extension.ToLower().Equals(".jpg") || extension.ToLower().Equals(".jpeg") || extension.ToLower().Equals(".png"))
{
try
{
path = Path.Combine(Server.MapPath("~/Content/Images") , random + Path.GetFileName(image_file.FileName)) ;
image_file.SaveAs(path) ;
path = "~/Content/Images/" + random + Path.GetFileName(image_file.FileName) ;
}
catch (Exception ex)
{
path = "-1" ;
}
}
else
{
Response.Write("<script>alert('Images may only be of the following formats: .jpg , .jpeg , and .png .');</script>") ;
}
}
else
{
Response.Write("<script>alert('Please select an image to upload!');</script>");
path = "-1" ;
}
return path ;
}
}
}
Faculty.cs
namespace POS.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
public partial class Faculty
{
[DisplayName("Employee ID:")]
public int Employee_ID { get; set; }
[DisplayName("Organization Name:")]
public string Organization_Name { get; set; }
[DisplayName("First Name:")]
public string First_Name { get; set; }
[DisplayName("Last Name:")]
public string Last_Name { get; set; }
[DisplayName("Job Title:")]
public string Job_Title { get; set; }
[DisplayName("Email:")]
public string Email { get; set; }
[DisplayName("Photo:")]
public byte[] Photo { get; set; }
[DisplayName("Address:")]
public string Address { get; set; }
[DisplayName("Phone Number:")]
public string Phone_Number { get; set; }
[DisplayName("Meal Plan:")]
public string Meal_Plan { get; set; }
[DisplayName("Meal Plan Status:")]
public bool Meal_Plan_Status { get; set; }
[DisplayName("Plan:")]
public virtual Plan Plan { get; set; }
}
}
Guardar.cshtml
#model POS.Models.Faculty
#{
ViewBag.Title = "Add Faculty Member";
}
<h2>Faculty Member</h2>
<h4>Add a new faculty member</h4>
<!-- Metodo "Nuevo", Controlador "Producto", Accion "HTTP POST" -->
#using (Html.BeginForm("Guardar", "Faculty", FormMethod.Post , new {enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<label class="control-label col-md-2" for="Organization_Name">Organization Name</label>
<div class="col-md-10">
#Html.EditorFor(model => model.Organization_Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Organization_Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.First_Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10" for="First_Name">
#Html.EditorFor(model => model.First_Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.First_Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Last_Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Last_Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Last_Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Job_Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Job_Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Job_Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Photo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Photo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Photo, "", new { #class = "text-danger" })
<input type="file" id="image_file" name="file"/>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Phone_Number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone_Number, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Meal_Plan, "Meal_Plan", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Meal_Plan", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Meal_Plan, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Meal_Plan_Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Meal_Plan_Status)
#Html.ValidationMessageFor(model => model.Meal_Plan_Status, "", new { #class = "text-danger" })
</div>
</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">
<font color="green">#ViewBag.mensaje</font>
</div>
</div>
</div>
}
<!--
<h4><b>Personal Information</b></h4>
Name:
Email Address:
<!--
Date of Birth:
-->
<!--
Gender:
Male
Female
Phone Number:
Address (Optional):
<h4><b>Institutional Information</b></h4>
Organization:
Language Institute
Keiser University
<br />
Job Title:
Administrator
Cafeteria Team Member
Cleaning Crew Team Member
Coach
Instructor
I.T. Team Member
Library Team Member
Security Guard
<br />
Meal Plan:
No Plan
A
B
C
Active?
-->
#Html.ActionLink("Return to Faculty Index", "Index")
#section Scripts {
#Scripts.Render("\~/bundles/jqueryval")
}
I've already tried going through this video (https://www.youtube.com/watch?v=-jNWVKoYhaM), but, for some reason, it still doesn't work (though I can now save images to ~/Content/Images and the program actually seems like it wants to pull an image from said file).
You're storing the images to a folder on your server, which is fine. But you also seem to expect the image file to be stored in the database as well. If you're going to store the image files in the file system and not in the database then what you really want in the database is the path to the image file so you can reference that in the HTML. As you are writing the photo to the file system you should also update the database with the path to the file and then in your HTML you can generate an <img> tag to load the file from the file system.
You should update the db during Upload_Image(). Currently it's only saving the image file to the file system.
try
{
path = Path.Combine(Server.MapPath("~/Content/Images") , random + Path.GetFileName(image_file.FileName)) ;
image_file.SaveAs(path) ;
/* SAVE path TO DB HERE */
}
catch (Exception ex)
{
path = "-1" ;
}
}
I am new to this . I am using Northwind database .
The REGION DESCRIPTIONS appears in the dropdownlist but when i try to create a new customer , no new record is saved into database , because dropdownlist selected value is not working. These two tables are not linked with foreign key in the model .
Any help ?! Thank you so.
this is the view :
#model Northwind.Customer
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
#using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Customer</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CustomerID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ContactName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ContactName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ContactName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ContactTitle, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ContactTitle, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ContactTitle, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.City, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Region, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Region", String.Empty)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PostalCode, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PostalCode, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PostalCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Country, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Country, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Country, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Fax, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Fax, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Fax, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
this is the controller :
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Northwind.Models;
using System.Data.Entity;
using System.Data.Entity.Validation;
namespace Northwind.Controllers
{
public class CustomerController : Controller
{
dbNorthwindEntities db = new dbNorthwindEntities();
// GET: Customer
// public ActionResult Index()
// {
// return View(db.Customers.ToList().Take(10));
// return View(db.Customers.ToList());
// }
public ActionResult Index()
{
return View(db.Customers.ToList());
// var customers = db.Customers.Include(a => a.Region);
// return View(customers.ToList());
// var customers = db.Customers.Include(a => a.Region);
// return View(customers.ToList());
// var customers = db.Customers.Include("Region");
//return View(customers.ToList());
// return View(db.Customers.ToList());
}
//me marr formen per create
[HttpGet]
public ActionResult Create()
{
ViewBag.Region = new SelectList(db.Regions, "RegionDescription", "RegionDescription");
return View();
}
//me bo post ne databaze
[HttpPost]
public ActionResult Create(Customer customer)
{
if (ModelState.IsValid)
{
db.Customers.Add(customer);
try
{
db.SaveChanges();
}
catch (DbEntityValidationException ex)
{
foreach (var entityValidationErrors in ex.EntityValidationErrors)
{
foreach (var validationError in entityValidationErrors.ValidationErrors)
{
Response.Write("Property: " + validationError.PropertyName + " Error: " + validationError.ErrorMessage);
}
}
}
//return RedirectToAction("Index");
}
ViewBag.Region = new SelectList(db.Regions, "RegionDescription", "RegionDescription", customer.Region);
return View(customer);
}
//me marr formen me get
[HttpGet]
public ActionResult Edit(string id)
{
dbNorthwindEntities db = new dbNorthwindEntities();
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customer customer = db.Customers.Find(id);
if (customer == null) { return HttpNotFound(); }
ViewBag.Region = new SelectList(db.Regions, "RegionDescription", "RegionDescription", customer.Region);
return View(customer);
}
//me postu
[HttpPost]
public ActionResult Edit([Bind(Include = "CustomerID,CompanyName,ContactName,Address,City,Region ,PostalCode, Country , Phone , Fax ")]Customer customer)
{
if (ModelState.IsValid)
{
db.Entry(customer).State = EntityState.Modified;
db.SaveChanges();
// return RedirectToAction("Index", new {id = selectedc})
return RedirectToAction("Index");
}
ViewBag.Region = new SelectList(db.Regions, "RegionDescription", "RegionDescription", customer.Region);
return View(customer);
}
// GET: /Employee/Delete/5
public ActionResult Delete(string id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customer customer = db.Customers.Find(id);
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
/// POST: /Employee/Delete/5
[HttpPost]
public ActionResult Deletee(string id)
{
Customer customer = db.Customers.Find(id);
db.Customers.Remove(customer);
db.SaveChanges();
return RedirectToAction("Index");
}
[HttpGet]
public ActionResult Details(string id)
{
dbNorthwindEntities db = new dbNorthwindEntities();
Customer customer = db.Customers.Single(x => x.CustomerID == id);
return View(customer);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
this is the customer and region classes :
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace Northwind
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public partial class Customer
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public Customer()
{
this.Orders = new HashSet<Order>();
this.CustomerDemographics = new HashSet<CustomerDemographic>();
}
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
// [StringLength(15, MinimumLength = 3, ErrorMessage = "Invalid")]
// [MaxLength(15), MinLength(5)]
public virtual Region Regions { get; set; }
public string Region { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<Order> Orders { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<CustomerDemographic> CustomerDemographics { get; set; }
// public string Region { get; set; }
// [NotMapped]
// public List<Region> RegionList { get; set; }
//public Region Regionn { get; set; } // Navigation Property
//[NotMapped]
// public string RegionID { get; set; }
// [NotMapped]
// public List<Region> RegionList { get; set; }
// public int RegionID { get; set; }
}
}
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace Northwind
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
public partial class Region
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public Region()
{
this.Territories = new HashSet<Territory>();
}
public int RegionID { get; set; }
public string RegionDescription { get; set; }
public Nullable<int> SelectId { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<Territory> Territories { get; set; }
// public List<Customer> Customers { get; set; } // Navigation property
}
}
You should probably be using a model for your view.
You can add your Customer, Region list, and SelectedRegionId. Then use something like this:
Html.DropDownListFor(model => model.SelectedRegionId, Model.Regions.Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() })) The problem seems to be that you don't have a variable to store the selected region (SelectedRegionId in my example).
ORIGINAL
I have a website where I can manage cars, brands, and car models. Right now I have controllers, models and views, the application is working, everything was auto generated by Visual Studio, and i am using entity framework (database first).
When I try to create a car, the dropdowns with brands and Car models are not cascading like I want.
I have a solution: add a class (or other property/attribute) to each option tag on each select (dropdown). Then, with JS, i'll do the rest. I just want to know how can I do a foreach loop to build my dropdown, even if it's not the best solution, i'm not discussing that. Remember, I need to do a foreach loop to the carmodel Model, inside the Cars View.
EDIT
Car View
#model MyApp.Models.car
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>car</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.bodytypeId, "bodytypeId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("bodytypeId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.bodytypeId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.manufacturerId, "manufacturerId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("manufacturerId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.manufacturerId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.modelId, "modelId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("modelId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.modelId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.versionId, "versionId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("versionId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.versionId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.fuelId, "fuelId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("fuelId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.fuelId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.transmissionId, "transmissionId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("transmissionId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.transmissionId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.colorId, "colorId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("colorId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.colorId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.horsePower, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.horsePower, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.horsePower, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.kw, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.kw, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.kw, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.cc, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.cc, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.cc, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Co2Emissions, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Co2Emissions, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Co2Emissions, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.mileage, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.mileage, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.mileage, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.year, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.year, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.year, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.doors, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.doors, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.doors, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.seats, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.seats, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.seats, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.plate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.plate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.plate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.price, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.price, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.price, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.shortDescription, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.shortDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.shortDescription, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.longDescription, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.longDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.longDescription, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.sold, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.sold)
#Html.ValidationMessageFor(model => model.sold, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.active, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.active)
#Html.ValidationMessageFor(model => model.active, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.dateAdded, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.dateAdded, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.dateAdded, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.dateSold, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.dateSold, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.dateSold, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Car Model
//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace MyApp.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
public partial class car
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public car()
{
this.carimages = new HashSet<carimage>();
}
public int id { get; set; }
[Display(Name = "#")]
public Nullable<int> bodytypeId { get; set; }
[Display(Name = "Body Type")]
public Nullable<int> manufacturerId { get; set; }
[Display(Name = "Model")]
public Nullable<int> modelId { get; set; }
[Display(Name = "Version")]
public Nullable<int> versionId { get; set; }
[Display(Name = "Fuel")]
public Nullable<int> fuelId { get; set; }
[Display(Name = "Transmission")]
public Nullable<int> transmissionId { get; set; }
[Display(Name = "Color")]
public Nullable<int> colorId { get; set; }
[Display(Name = "HP")]
public Nullable<int> horsePower { get; set; }
[Display(Name = "KW")]
public Nullable<int> kw { get; set; }
[Display(Name = "CC")]
public Nullable<int> cc { get; set; }
[Display(Name = "CO2")]
public Nullable<double> Co2Emissions { get; set; }
[Display(Name = "Mileage")]
public Nullable<int> mileage { get; set; }
[Display(Name = "Year")]
public Nullable<int> year { get; set; }
[Display(Name = "Doors")]
public Nullable<int> doors { get; set; }
[Display(Name = "Seats")]
public Nullable<int> seats { get; set; }
[Display(Name = "Plate")]
public string plate { get; set; }
[Display(Name = "Price")]
public Nullable<int> price { get; set; }
[Display(Name = "Short Description")]
public string shortDescription { get; set; }
[Display(Name = "Long Description")]
public string longDescription { get; set; }
[Display(Name = "Sold")]
public bool sold { get; set; }
[Display(Name = "Active")]
public bool active { get; set; }
[Display(Name = "Date Added")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy hh:mm}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> dateAdded { get; set; }
[Display(Name = "Date Sold")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy hh:mm}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> dateSold { get; set; }
public virtual bodytype bodytype { get; set; }
public virtual color color { get; set; }
public virtual fuel fuel { get; set; }
public virtual manufacturer manufacturer { get; set; }
public virtual model model { get; set; }
public virtual transmission transmission { get; set; }
public virtual version version { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<carimage> carimages { get; set; }
}
}
Car Controller
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using MyApp.Models;
namespace MyApp.Controllers
{
public class carsController : Controller
{
private MyAppEntities db = new MyAppEntities();
// GET: cars
public ActionResult Index(string id)
{
string searchString = id;
var cars = db.cars.Include(c => c.bodytype).Include(c => c.color).Include(c => c.fuel).Include(c => c.manufacturer).Include(c => c.model).Include(c => c.transmission).Include(c => c.version);
if (!String.IsNullOrEmpty(searchString))
{
cars = cars.Where(s => s.bodytype.name.Contains(searchString) ||
s.cc.ToString().Contains(searchString) ||
s.Co2Emissions.ToString().Contains(searchString) ||
s.color.name.Contains(searchString) ||
s.dateAdded.Value.ToString("dd-mm-yyyy").Contains(searchString) ||
s.dateSold.Value.ToString("dd-mm-yyyy").Contains(searchString) ||
s.doors.ToString().Contains(searchString) ||
s.fuel.name.Contains(searchString) ||
s.horsePower.ToString().Contains(searchString) ||
s.id.ToString().Contains(searchString) ||
s.kw.ToString().Contains(searchString) ||
s.longDescription.Contains(searchString) ||
s.manufacturer.name.Contains(searchString) ||
s.mileage.ToString().Contains(searchString) ||
s.model.name.Contains(searchString) ||
s.plate.Contains(searchString) ||
s.price.ToString().Contains(searchString) ||
s.seats.ToString().Contains(searchString) ||
s.shortDescription.Contains(searchString) ||
s.transmission.name.Contains(searchString) ||
s.version.name.Contains(searchString) ||
s.year.ToString().Contains(searchString)
);
}
return View(cars.ToList());
}
// GET: cars/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
car car = db.cars.Find(id);
if (car == null)
{
return HttpNotFound();
}
return View(car);
}
// GET: cars/Create
public ActionResult Create()
{
ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name");
ViewBag.colorId = new SelectList(db.colors, "id", "name");
ViewBag.fuelId = new SelectList(db.fuels, "id", "name");
ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name");
ViewBag.modelId = new SelectList(db.models, "id", "name");
ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name");
ViewBag.versionId = new SelectList(db.versions, "id", "name");
return View();
}
// POST: cars/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,bodytypeId,manufacturerId,modelId,versionId,fuelId,transmissionId,colorId,horsePower,kw,cc,Co2Emissions,mileage,year,doors,seats,plate,price,shortDescription,longDescription,sold,active,dateAdded,dateSold")] car car)
{
if (ModelState.IsValid)
{
db.cars.Add(car);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name", car.bodytypeId);
ViewBag.colorId = new SelectList(db.colors, "id", "name", car.colorId);
ViewBag.fuelId = new SelectList(db.fuels, "id", "name", car.fuelId);
ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name", car.manufacturerId);
ViewBag.modelId = new SelectList(db.models, "id", "name", car.modelId);
ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name", car.transmissionId);
ViewBag.versionId = new SelectList(db.versions, "id", "name", car.versionId);
return View(car);
}
// GET: cars/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
car car = db.cars.Find(id);
if (car == null)
{
return HttpNotFound();
}
ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name", car.bodytypeId);
ViewBag.colorId = new SelectList(db.colors, "id", "name", car.colorId);
ViewBag.fuelId = new SelectList(db.fuels, "id", "name", car.fuelId);
ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name", car.manufacturerId);
ViewBag.modelId = new SelectList(db.models, "id", "name", car.modelId);
ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name", car.transmissionId);
ViewBag.versionId = new SelectList(db.versions, "id", "name", car.versionId);
return View(car);
}
// POST: cars/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "id,bodytypeId,manufacturerId,modelId,versionId,fuelId,transmissionId,colorId,horsePower,kw,cc,Co2Emissions,mileage,year,doors,seats,plate,price,shortDescription,longDescription,sold,active,dateAdded,dateSold")] car car)
{
if (ModelState.IsValid)
{
db.Entry(car).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name", car.bodytypeId);
ViewBag.colorId = new SelectList(db.colors, "id", "name", car.colorId);
ViewBag.fuelId = new SelectList(db.fuels, "id", "name", car.fuelId);
ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name", car.manufacturerId);
ViewBag.modelId = new SelectList(db.models, "id", "name", car.modelId);
ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name", car.transmissionId);
ViewBag.versionId = new SelectList(db.versions, "id", "name", car.versionId);
return View(car);
}
// GET: cars/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
car car = db.cars.Find(id);
if (car == null)
{
return HttpNotFound();
}
return View(car);
}
// POST: cars/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
car car = db.cars.Find(id);
db.cars.Remove(car);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
Original
With ASP.NET MVC, you use server-side pre-processing to bind servers-side models to the .cshtml. From within the markup you can use tag helpers to build out common controls and user input components, this is where the razor view engine comes into play. Odeto-Code by Scott Allen has a great article on how you use these technologies together to build out a drop-down-list control specifically.
Here is part of that examples, .cshtml:
#Html.LabelFor(m=>m.SelectedFlavorId)
#Html.DropDownListFor(m => m.SelectedFlavorId, Model.FlavorItems)
#Html.ValidationMessageFor(m=>m.SelectedFlavorId)
<input type="submit" value="Submit" />
And here is the corresponding model, ViewModel.cs:
public class ViewModel
{
private readonly List<IceCreamFlavor> _flavors;
[Display(Name = "Favorite Flavor")]
public int SelectedFlavorId { get; set; }
public IEnumerable<SelectListItem> FlavorItems
{
get { return new SelectList(_flavors, "Id", "Name");}
}
}
As an additional resource there is actually several other stackoverflow Q/A's that cover questions similar to this, here is one that is noteable.
Update 1
I just want to know how can I do a foreach loop to build my dropdown
Again you can use the razor view engine here. It allows for interaction with a server-side C# model and a means to build HTML markup from that. Here is an example:
<select>
#{
foreach (var item in Model.ListOfItems)
{
<option value="item.Value" customAttribute="item.SomethingSpecial">
item.Name
</option>
}
}
</select>
Update 2
You car model does not define a list of models. You need to specify what the options are in order to do a foreach. In other words you cannot build a dropdownlist from a property on a C# model that is not a list. Does that help?
You can do this in C# rather than JS, a quick example here:
public class FindUser
{
// Where the items from the DB will be kept
public Dictionary<int, string> CountryList { get; set; }
// Used to store the users selected option
public int SelectedCountry { get; set; }
// A constructor to be called when the page renders
public FindUser()
{
PopulateCountryDropdown();
}
public void PopulateLeaDropdown()
{
// 1. Grab your items from the database, store it within a databale
// 2. Loop through the datatable and add each row to the list
CountryList = new Dictionary<int, string>();
foreach(DataRow row in dt.Rows)
{
CountryList.Add(Convert.ToInt32(row["ID"]), row["country"].ToString());
}
}
}
Then in your frontend add:
#Html.DropDownListFor(u => u.SelectedCountry, new SelectList(Model.CountryList, "Key", "Value"), "Select your country", new { #class = "form-control countries", id = "country_list" })
Solution found HERE
School database with the following 2 tables.
StateMaster
DistrictMaster
Step 1
Open Visual Studio then select File >> New >> Project then select ASP.Net MVC 4 Web Application.
Step 2
Select Internet Application then click OK.
Step 3
Select the Model folder then create a new Model class.
StudentModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemoApplication.Models
{
public class StudentModel
{
public IList<SelectListItem> StateNames { get; set; }
public IList<SelectListItem> DistrictNames { get; set; }
}
}
Step 4
Create a .edmx file and connect with the database.
Step 5
Create a new Controller. In this article I create DropDownListController.cs.
DropDownListController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcDemoApplication.Models;
namespace MvcDemoApplication.Controllers
{
public class DropDownListController : Controller
{
//
// GET: /DropDownList/
SchoolEntities schoolEntity = new SchoolEntities();
public ActionResult Index()
{
List<SelectListItem> stateNames = new List<SelectListItem>();
StudentModel stuModel=new StudentModel();
List<StateMaster> states = schoolEntity.StateMasters.ToList();
states.ForEach(x =>
{
stateNames.Add(new SelectListItem { Text = x.StateName , Value = x.StateId.ToString() });
});
stuModel.StateNames = stateNames;
return View(stuModel);
}
}
}
Index.cshtml
#model MvcDemoApplication.Models.StudentModel
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<h2>Cascading Dropdownlist</h2>
<table>
<tr>
<td>
<label>State</label>
</td>
<td>
#Html.DropDownListFor(x => x.StateNames, Model.StateNames, "--Select--", new { #id="ddlState"});
</td>
</tr>
</table>
Understand the Code
In Studentmodel we have the following 2 properties:
public IList<SelectListItem> StateNames { get; set; }
public IList<SelectListItem> DistrictNames { get; set; }
Here we are using the SelectListItem class, this class has the following 3 properties:
Selected: This is a bool type to show in a dropdown (as selected) true or false by default.
Text: This is a string type, for the dropdown text.
Value: This is string type for the value of the dropdown
If you notice in the dropdownlist, we also need the same properties. For this reason we are using SelectListItem in a Ilist.
DropdownlistController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcDemoApplication.Models;
namespace MvcDemoApplication.Controllers
{
public class DropDownListController : Controller
{
//
// GET: /DropDownList/
SchoolEntities schoolEntity = new SchoolEntities();
public ActionResult Index()
{
List<SelectListItem> stateNames = new List<SelectListItem>();
StudentModel stuModel=new StudentModel();
List<StateMaster> states = schoolEntity.StateMasters.ToList();
states.ForEach(x =>
{
stateNames.Add(new SelectListItem { Text = x.StateName , Value = x.StateId.ToString() });
});
stuModel.StateNames = stateNames;
return View(stuModel);
}
}
In the preceding code we create the SchoolEntities object, in this object all the related tables exist.
SchoolEntities schoolEntity = new SchoolEntities();
List<StateMaster> states = schoolEntity.StateMasters.ToList();
In the preceding line of code, all the related data of the StateMasters tables comes into the StateMaster list object.
states.ForEach(x =>
{
stateNames.Add(new SelectListItem { Text = x.StateName , Value = x.StateId.ToString() });
});
Now it is time to add entity data into the Text and value properties, the all collection will be stored into the stateNames object.
Index.cshtml
#model MvcDemoApplication.Models.StudentModel
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<h2>Cascading Dropdownlist</h2>
<table>
<tr>
<td>
<label>State</label>
</td>
<td>
#Html.DropDownListFor(x => x.StateNames, Model.StateNames, "--Select--", new { #id="ddlState"});
</td>
</tr>
</table>
The preceding code shows the model data in View. Now to understand how it works.
#Html.DropDownListFor(x => x.StateNames, Model.StateNames, "--Select--", new { #id="ddlState"});
Look at the preceding code, we used here, #Html helper classes for creating a DropDownList. In the DropDownListFor helper class we used 4 parameters.
x=>x.StateNames: For getting the values of the collection from the entity.
Model.StateNames: Collections of states.
“—Select--”: Default value, when the dropdown list will be populated.
new {#id=”ddlState”}: In this part we can define an id, class and name for the control.
How to do cascading between two dropdownlists.
DropdownlistController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcDemoApplication.Models;
namespace MvcDemoApplication.Controllers
{
public class DropDownListController : Controller
{
//
// GET: /DropDownList/
SchoolEntities1 schoolEntity = new SchoolEntities1();
public ActionResult Index()
{
List<SelectListItem> stateNames = new List<SelectListItem>();
StudentModel stuModel=new StudentModel();
List<StateMaster> states = schoolEntity.StateMasters.ToList();
states.ForEach(x =>
{
stateNames.Add(new SelectListItem { Text = x.StateName , Value = x.StateId.ToString() });
});
stuModel.StateNames = stateNames;
return View(stuModel);
}
[HttpPost]
public ActionResult GetDistrict(string stateId)
{
int statId;
List<SelectListItem> districtNames = new List<SelectListItem>();
if (!string.IsNullOrEmpty(stateId))
{
statId = Convert.ToInt32(stateId);
List<DistrictMaster> districts = schoolEntity.DistrictMasters.Where(x => x.StateId == statId).ToList();
districts.ForEach(x =>
{
districtNames.Add(new SelectListItem { Text = x.DistrictName, Value = x.DistrictId.ToString() });
});
}
return Json(districtNames, JsonRequestBehavior.AllowGet);
}
}
}
Index.cshtml
#model MvcDemoApplication.Models.StudentModel
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<h2>Cascading Dropdownlist</h2>
<table>
<tr>
<td>
<label>State</label>
</td>
<td>
#Html.DropDownListFor(x => x.StateNames, Model.StateNames, "--Select--", new { #id="ddlState"});
</td>
</tr>
<tr>
<td>
<label>District</label>
</td>
<td id="District">
#Html.DropDownListFor(x => x.DistrictNames, new List<SelectListItem>(), "--Select--", new { #id="ddlDistrict"});
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#ddlState').change(function () {
$.ajax({
type: "post",
url: "/DropDownList/GetDistrict",
data: { stateId: $('#ddlState').val() },
datatype: "json",
traditional: true,
success: function (data) {
var district = "<select id='ddlDistrict'>";
district = district + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++)
{
district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
district = district + '</select>';
$('#District').html(district);
}
});
});
});
</script>
That's it. Press F5 and run your code.
Look at Nuget package Mvc.CascadeDropDown:
https://www.nuget.org/packages/Mvc.CascadeDropDown/
Here is how I am using it:
#Html.CascadingDropDownListFor(m => m.ArticleGroup_Nr, "Department_Nr",
Url.Action("GetArticleGroups"), "DepartmentNr", "-- Select item --", true,
new { #class = "form-control", style = "width: 450px" })
Here Department_Nr specifies the parent dropdown elsewhere in the View - either a regular dropdownlist or another cascaded dropdownlist.
I then created a JSON Action GetArticleGroups on the same Controller that accepts a DepartmentNr parameter, which is passed the current value of the parent dropdown.
The JSON Action will be called everytime the value of the parent dropdown is changed because #Html.Cascading... also attaches an onchange-eventhandler to the parent object.
public virtual JsonResult GetArticleGroups(int DepartmentNr)
{
var items = provider.ArticleGroups.Where(m => m.Parent_Nr == DepartmentNr);
return GetJson(items); // convert items to JSON [ { "Value":"xx", "Text":"yy" } ]
}
private JsonResult GetJson(IQueryable<ICatalogueItem> items)
{
var data = items
.Select(x => new { Value = x.Number, Text = x.Text })
.OrderBy(o => o.Text);
return Json(data, JsonRequestBehavior.AllowGet);
}
... Or see this article on how to build it yourself:
http://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/