We Keep Coding

In a HTML helper dropdownlist, how to get foreign key data?

I am new to ASP.NET. My form look like this
This code display role in Form
#Html.DropDownList("id", (IEnumerable<SelectListItem>)ViewBag.lis, null, new { #class = "form-control" })
in Controller
public ActionResult register()
{ //
ViewBag.lis = new SelectList(new dbdemoEntities().Roles, "id", "name");
return View();
}
ROLE CLASS
public partial class Role
{
public int Id { get; set; }
public string name { get; set; }
public virtual Register Register { get; set; }
}
Register class
public partial class Register
{
public int Id { get; set; }
public string name { get; set; }
public string email { get; set; }
public string password { get; set; }
public Nullable<int> phone_no { get; set; }
public virtual Role Role { get; set; }
}
The problem is that I can get all data except for Role. The role is null. How do I get the Role ID?
[HttpPost]
public ActionResult register(Register obj)
{
using(var db = new dbdemoEntities())
{
var data = new Register()
{
email = obj.email,
name = obj.name,
password = obj.password,
phone_no = obj.phone_no,
Role = obj.Role
};
db.Registers.Add(data);
db.SaveChanges();
ViewBag.register = "Your account has been registered!";
}
return PartialView();
}
I think the problem is that I should write model => model.role like the example of the name here.
#Html.EditorFor(model => model.name, new { htmlAttributes = new { #class = "form-control" } })
here is what I updated now
ViewBag.lis = new SelectList(new dbdemoEntities().Roles, "Id", "name");
In HTML
Problem after update:
After changing
Role = db.Roles.Single(r => r.Id == obj.Role.Id)
Here is another error

Try this:
Change: ViewBag.lis = new SelectList(new dbdemoEntities().Roles, "id", "name");
to
ViewBag.lis = new SelectList(new dbdemoEntities().Roles, "Id", "name");
and then:
#Html.DropDownList(model => model.Role.Id, (IEnumerable<SelectListItem>)ViewBag.lis, null, new { #class = "form-control" })
and also make a constructor for Register class:
public partial class Register
{
public Register()
{
this.Role = new Role();
}
public int Id { get; set; }
public string name { get; set; }
public string email { get; set; }
public string password { get; set; }
public Nullable<int> phone_no { get; set; }
public virtual Role Role { get; set; }
}
====== Update =======
Change the action like this:
[HttpPost]
public ActionResult register(Register obj)
{
using(var db = new dbdemoEntities())
{
var data = new Register()
{
email = obj.email,
name = obj.name,
password = obj.password,
phone_no = obj.phone_no,
Role = db.Roles.Single(r=> r.Id == obj.Role.Id)
};
db.Registers.Add(data);
db.SaveChanges();
ViewBag.register = "Your account has been registered!";
}
return PartialView();
}

Change to this this if you want to post Register.Id property:
#Html.DropDownListFor(model => model.Id,(SelectList) ViewBag.list,new { #class="form-control"})

ASP.NET MVC Core Cascading DropDownList

I'm having trouble finding a tutorial / video that shows how to implement Cascading DropDownList from a Database using EntityFramework. I'm using ASP.NET MVC Core, EntityFramework Core with C#.
As of now, I'm able to retrieve the data from my database to my 3 DropDownList fine.
What I would like to be able to accomplish is to have the user select a State first which would then display all Cities related to that State. Then after user has selected a City it would display the Zip Code(s) related to the City.
Any help would be greatly appreciated.
Models
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>,
}

I had a similar situation but in my example I have a Root folder and depending on which root folder I am using the next drop down list would display the corresponding sub-folders.
Not sure if there is a purly asp.net solution but, I used Jquery/Ajax for this.
Your code should look something like this:
html list:
<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>
<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>
Jquery code, you write this in .js file and then add it to a specific view with this statement<script src="~/js/example.js"></script>, Don't forget you need to add a jquery library to your project before any other javascript, and your example.js will contain:
$(document).ready(function () {
$("#state-target").on("change", function () {
$list = $("#city-target");
$.ajax({
url: "/getCities",
type: "GET",
data: { id: $("#state-target").val() }, //id of the state which is used to extract cities
traditional: true,
success: function (result) {
$list.empty();
$.each(result, function (i, item) {
$list.append('<option value="' + item["CityId"] + '"> ' + item["Name"] + ' </option>');
});
},
error: function () {
alert("Something went wrong call the police");
}
});
});
});
The Ajax request will call this action in the Controller which will retrieve a list of cities from the database (using something like return dbContext.CityTable.Where(c => c.StateId == id).ToList() inside a getCititesFromDatabaseByStateId(id) method) and then return the Json object, the success function will create a list of options and apply it:
public IActionResult getCities(int id)
{
var cities = new List<City>();
cities = getCititesFromDatabaseByStateId(id); //call repository
return Json(citites);
}
In your ViewModel consider changing IEnumerable<State/City/Zip> (IEnumerable<T>) to IEnumerable<SelectListItem>. I can say as well your Model's are messy (but if you can get data the from the database focus on getting the list working 1st), consider improving them later.
Fix for 2 errors mentioned in the comments:
public List<City> getCititesFromDatabaseByStateId(int id)
{
return db.Citys.Where(c => c.StateId == id).ToList();
}
public ActionResult Create()
{
var states = new SelectList(db.States.ToList(), "StateId", "Abbr");
var citys = new SelectList(db.Citys.ToList(), "CityId", "Name");
var zips = new SelectList(db.Zips.ToList(), "ZipId", "Code");
var viewModel = new CustomerFormVM
{
States = states,
Citys = citys,
Zips = zips
};
return View(viewModel);
}

Html form doesn't send double variable to controller

I have html form:
#using (Html.BeginForm("ShowAddedProduct", "AddProductsDialog",FormMethod.Post,
new {id="AddProdForm" }))
{
<p>Price:</p>#Html.TextBoxFor(x => x.Price, new { type="number",Class = "EnterProductInfoField"});
#Html.ValidationMessageFor(x => x.Price);
<input id="submitValidation" type="submit" value="Add" />
}
If i enter integer value in textbox like 700.It sends valid Price field for model to ShowAddedProduct Action method ,but when i enter decimal number like 422.65,it doesn't sends it and i get in action method Price=0.Type of Price is double
Here is ShowAddedProduct method code.
[HttpPost]
public ActionResult ShowAddedProduct(Product product, HttpPostedFileBase uploadedImage)
{
product.DateAdded = DateTime.Now;
if (uploadedImage != null && uploadedImage.ContentLength > 0)
{
using (BinaryReader reader = new BinaryReader(uploadedImage.InputStream))
{
product.Picture = reader.ReadBytes(uploadedImage.ContentLength);
}
}
using (GoodsContainer1 container = new GoodsContainer1())
{
product.SubCategory = container.SubCategorySet.FirstOrDefault(x => x.Id == product.SubCategory_Id);
if (product.Article != null
&& product.Name != null
&& product.Picture != null
&& product.Price != 0)
{
container.ProductSet.Add(product);
container.SaveChanges();
return PartialView("~/Views/AddProductsDialog/AddedProduct.cshtml",product);
}
}
return RedirectToAction("AddProducts");
}
Here is model code for html form.
public partial class Product
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public Product()
{
this.DescriptionParameters = new HashSet<DescriptionParameters>();
}
public int Id { get; set; }
public string Name { get; set; }
public string Article { get; set; }
public double Price { get; set; }
public byte[] Picture { get; set; }
public System.DateTime DateAdded { get; set; }
public int SubCategory_Id { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<DescriptionParameters> DescriptionParameters { get; set; }
public virtual SubCategory SubCategory { get; set; }
}
}

It is because of mvc internal annotation. change
#Html.TextBoxFor(x => x.Price, new { type="number",Class = "EnterProductInfoField"})
to
#Html.EditorFor(x => x.Price, new { type="number",Class = "EnterProductInfoField"})

#Html.TextBoxFor(x => x.Price, new { Class = "EnterProductInfoField"})
Delete type="number", because it sets your value as integer (not double)

asp.net mvc5 - Passing selected list item ids back to controller

I have a view model containing the information that I am using for a drop-down list on a view:
public class AddPlayersToGame
{
public string GameTitle { set; get; }
public int GameID { set; get; }
public List<SelectListItem> Players { set; get; }
public int PlayerID { get; set; }
public int[] SelectedPlayers { set; get; }
}
This is my View which simply displays a drop-down list containing the list of Players to select from:
#model WebGameProj.ViewModels.AddPlayersToGame
<div>
{
#Html.DropDownListFor(x => Model.PlayerID, Model.Players)
<input type="submit" />
}
</div>
This is the controller methods I am using:
public ActionResult AddPlayersView(int id)
{
var GameSelected = db.Games.Find(id);
if (GameSelected== null)
{
return HttpNotFound();
}
var np = new AddPlayersToGame { GameID = id, GameTitle = GameSelected.GameTitle };
np.Players = db.Players.Select(m => new SelectListItem
{
Text = m.PlayerUserName,
Value = m.PlayerId.ToString()
}).ToList();
return View(np);
}
[HttpPost]
public ActionResult AddPlayersView(AddPlayersToGame model)
{
foreach (var item in model.SelectedPlayers)
{
var SelPlayer = db.Players.Find(model.PlayerID);
if (SelPlayer== null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
if (SelPlayer != null)
{
Game GameSelected = new Game();
GameSelected.GamePlayers.Add(SelPlayer);
db.Entry(GameSelected).State = EntityState.Modified;
db.SaveChanges();
}
}
return RedirectToAction("GameDetailsView");
}
So, basically I want to have a view that displays a drop-down list of players and when some players are selected the post method will then find each player on the database by using their ids that are being passed back via the drop-down list on the view, then add them to a the current list of players for that game.

Change your model to
public class AddPlayersToGame
{
public string GameTitle { set; get; }
public int GameID { set; get; }
public int PlayerID { get; set; }
public int[] PlayerIds { set; get; }
public List<SelectListItem> Players { set; get; }
}
And your view to
#model WebGameProj.ViewModels.AddPlayersToGame
<div>
{
#Html.ListBoxFor(x => x.PlayerIds, Model.Players)
<input type="submit" />
}
</div>
You should then have the selects ids in the model after submitting.

You can also try:
Model
public class AddPlayersToGame
{
public string GameTitle { set; get; }
public int GameID { set; get; }
public int[] PlayerIDs { get; set; }
public MultiSelectList Players { get; set; }
}
Controller
public ActionResult AddPlayersView(int id)
{
var GameSelected = db.Games.Find(id);
if (GameSelected== null)
{
return HttpNotFound();
}
var np = new AddPlayersToGame { GameID = id, GameTitle = GameSelected.GameTitle };
var playerList = db.Players.Select(m => new
{
PlayerUserName = m.PlayerUserName,
PlayerId = m.PlayerId
}).ToList();
np.Players = new MultiSelectList(playerList, "PlayerIDs", "PlayerUserName");
return View(np);
}
[HttpPost]
public ActionResult AddPlayersView(AddPlayersToGame model)
{
foreach (var playerID in model.PlayerIDs)
{
var SelPlayer = db.Players.Find(playerID);
if (SelPlayer== null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
if (SelPlayer != null)
{
Game GameSelected = new Game();
GameSelected.GamePlayers.Add(SelPlayer);
db.Entry(GameSelected).State = EntityState.Modified;
db.SaveChanges();
}
}
return RedirectToAction("GameDetailsView");
}
View
#model WebGameProj.ViewModels.AddPlayersToGame
<div>
{
#Html.ListBoxFor(x => x.PlayerIDs, Model.Players)
<input type="submit" />
}
</div>

View Model null when pass back checkbox to controller

no idea which part is wrong. I have successfully display the list of checkbox inside the view but when it is post back to the controller the CheckBoxViewModel model return null. ASP.NET MVC
public class CheckBoxViewModel {
public List<CheckBoxList> CheckBoxLists {get; set;}
}
public class CheckBoxList{
public int CheckBoxId {get; set;}
public string CheckBoxDescription { get; set;}
public bool CheckBoxState {get; set;}
}
#model CheckBoxViewModel
foreach(var item in Model.CheckBoxLists) {
#Html.CheckBoxFor(model => model.CheckBoxState, new { id = #model.CheckBoxId }):
#Html.DisplayFor(model => model.CheckBoxDescription);
}
[HttpPost]
public ActionResult EditCheckBox(int userId, CheckBoxViewModel model) {
}

Here goes the complete solution -
I used your same ViewModels -
public class CheckBoxViewModel
{
public List<CheckBoxList> CheckBoxLists { get; set; }
}
public class CheckBoxList
{
public int CheckBoxId { get; set; }
public string CheckBoxDescription { get; set; }
public bool CheckBoxState { get; set; }
}
then I created on GET Action with some sample data -
public ActionResult AddQuestion()
{
CheckBoxViewModel m = new CheckBoxViewModel();
m.CheckBoxLists = new List<CheckBoxList>();
m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi1", CheckBoxId = 1, CheckBoxState = true});
m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi2", CheckBoxId = 2, CheckBoxState = true });
m.CheckBoxLists.Add(new CheckBoxList() { CheckBoxDescription = "Hi3", CheckBoxId = 3, CheckBoxState = true });
return View(m);
}
The corresponding GET View -
#model WebApplication1.Controllers.CheckBoxViewModel
#{
ViewBag.Title = "AddQuestion";
}
<h2>AddQuestion</h2>
#using (Html.BeginForm("EditCheckBox", "Home"))
{
for (int i = 0; i < Model.CheckBoxLists.Count; i++)
{
#Html.CheckBox(
String.Format("CheckBoxLists[{0}].CheckBoxState", i.ToString()),
Model.CheckBoxLists[i].CheckBoxState,
new { id = Model.CheckBoxLists[i].CheckBoxId })
#Html.Label(Model.CheckBoxLists[i].CheckBoxDescription)
#Html.Hidden(String.Format("CheckBoxLists[{0}].CheckBoxDescription", i.ToString()), Model.CheckBoxLists[i].CheckBoxDescription)
#Html.Hidden(String.Format("CheckBoxLists[{0}].CheckBoxId", i.ToString()), Model.CheckBoxLists[i].CheckBoxId)
}
<input type="submit" value="Click" />
}
Then finally the POST Action -
[HttpPost]
public ActionResult EditCheckBox(int? userId, CheckBoxViewModel model)
{
return null;
}
Here is the look of the page -
When I ran the code and hit the button, I get the model as shown below -