Develop Reference

Foreign Key not showing in dropdown box | MVC

I'm somewhat new to MVC and have been following along with a tutorial but it has no answers regarding my question. For my Create page, the Foreign keys are not showing up. Basically, on the Projects page I created a project, on the People page I created a person. So when I try to create a ProjectRole on the ProjectRoles page, the ProjectId and PersonId are not showing up in the drop-down menu. Down below all of my code, I have provided a screenshot of what I have tried to put into words.
My models:
public class Project
{
public int Id { get; set; }
[Required]
[MaxLength(30)]
public string Name { get; set; }
[Required]
public DateTime StartDate { get; set; }
[Required]
public DateTime DueDate { get; set; }
public ICollection<ProjectRole> ProjectRoles { get; set; }
}
public class Person
{
public int Id { get; set; }
[Required]
[MaxLength(30)]
public string FirstName { get; set; }
[Required]
[MaxLength(30)]
public string MiddleName { get; set; }
[Required]
[MaxLength(30)]
public string LastName { get; set; }
[Required]
public string Email { get; set; }
public ICollection<ProjectRole> ProjectRoles { get; set; }
}
public class ProjectRole
{
public int Id { get; set; }
[Required]
public double HourlyRate { get; set; }
[ForeignKey("Person")]
public int PersonId { get; set; }
[ForeignKey("Project")]
public int ProjectId { get; set; }
[ForeignKey("AppRole")]
public int RoleId { get; set; }
}
My Controller code:
public IActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,HourlyRate,PersonId,ProjectId,RoleId")] ProjectRole projectRole)
{
if (ModelState.IsValid)
{
_context.Add(projectRole);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(projectRole);
}
And my view code here:
#model Project2.Models.Entities.ProjectRole
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>ProjectRole</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="HourlyRate" class="control-label"></label>
<input asp-for="HourlyRate" class="form-control" />
<span asp-validation-for="HourlyRate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="PersonId" class="control-label"></label>
<select asp-for="PersonId" class ="form-control" asp-items="ViewBag.PersonId"></select>
</div>
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" class ="form-control" asp-items="ViewBag.ProjectId"></select>
</div>
<div class="form-group">
<label asp-for="RoleId" class="control-label"></label>
<input asp-for="RoleId" class="form-control" />
<span asp-validation-for="RoleId" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Screenshot of example of what I mean:

I suppose more personable to display the Person Name (and the Project Name) in the select controls, but to pass the PersonId (and ProjectId) to the Create method when click on the Create button.
Therefore, prepare the Person list (and the Project list) like below:
public IActionResult Create()
{
var persons = new List<SelectListItem>();
// Iterate through `Persons`
foreach(var p in _context.Persons)
{
persons.Add(new SelectListItem() { Value= p.Id, Text = p.FirstName+", "+p.LastName});
}
ViewBag.Persons = persons;
// Prepare the projects list (like `Persons` list above)
// ... your code here
ViewBag.Projects = persons;
return View(new ProjectRole(){ /* Add your code here to create the ProjectRole .../* });
}
And in the view:
<div class="form-group">
<label asp-for="PersonId" class="control-label"></label>
<select asp-for="PersonId" class="form-control" asp-items="ViewBag.Persons"></select>
</div>
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" class="form-control" asp-items="ViewBag.Projects"></select>
</div>
For additional information see The Select Tag Helper
*NOTE: And I would recommend to create compound view model to include all required information. *
ViewModels or ViewBag?
Understanding Best Way to Use Multiple Models in ASP.NET MVC

creating category and subcategory dependent list box using asp.net core 2.2

I am trying a create a page where I have a form to create the product. here I trying to creating category and subcategory dependent list box.but not understand how I will do that.
Here is my code:
public class Category
{
public int Id { get; set; }
[Required]
[Display(Name = "Category Name")]
public string CategoryName { get; set; }
}
//my SubCategory model
public class SubCategory
{
public int Id { get; set; }
[Required]
[Display(Name = "SubCategory Name")]
public string SubCategoryName { get; set; }
}
//my product model
public class Product
{
public int Id { get; set; }
[Required]
public String Name { get; set; }
[Required]
[Display(Name = "Category Type")]
public int CategoryTypeId { get; set; }
[ForeignKey("CategoryTypeId")]
public Category Category { get; set; }
[Required]
[Display(Name = "SubCategory Type")]
public int SubCategoryTypeId { get; set; }
[ForeignKey("SubCategoryTypeId")]
public SubCategory SubCategory { get; set; }
}
Product Controller
[HttpGet]
public IActionResult Create()
{
ViewData["CategoryId"] = new SelectList(_db.Category.ToList(), "Id", "CategoryName");
ViewData["SubCategoryId"] = new SelectList(_db.SubCategory.ToList(), "Id", "SubCategoryName");
return View();
}
[HttpPost]
public async Task<IActionResult> Create(Product product)
{
if (ModelState.IsValid)
{
_db.Product.Add(product);
await _db.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(product);
}
Create.cshtml
#model Amazon.Models.Product
#{
ViewData["Title"] = "Create";
}
<br />
<h2 class="text-info">Add New Product</h2>
<form asp-action="Create" method="post" enctype="multipart/form-data">
<div class="p-4 rounded border">
<div asp-validation-summary="ModelOnly" class="text-danger">
</div>
<h3>#ViewBag.message</h3>
<div class="form-group row">
<div class="col-2">
<label asp-for="Name"></label>
</div>
<div class="col-5">
<input asp-for="Name" class="form-control" />
</div>
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="CategoryTypeId"></label>
</div>
<div class="col-5">
<select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control"></select>
#*<input asp-for="ProductTypeId" class="form-control" />*#
</div>
<span asp-validation-for="CategoryTypeId" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="SubCategoryTypeId"></label>
</div>
<div class="col-5">
<select asp-for="SubCategoryTypeId" asp-items="ViewBag.SubCategoryId" class="form-control"></select>
#*<input asp-for="SpecialTagId" class="form-control" />*#
</div>
<span asp-validation-for="SubCategoryTypeId" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
<a asp-action="Index" class="btn btn-success">Back To List</a>
</div>
</div>
</form>
#section Scripts{
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
above code, I did successfully data-bind of my product controller and view.but I trying to creating category and subcategory dependent list box.but not understand how I will do that.
here my expectation output :
I am an absolute beginner. please help anyone.

I trying to creating category and subcategory dependent list box.
To implement cascading dropdown for Category and Subcategory, as I mentioned in comment, you can populate SubCategory dropdown based on the previous selection of Category in Category dropdown change event, like below.
You can try to modify your model class and implement one-to-many relationship between Category and Subcategory entities, so that you can store data like below in database and retrieve all sub-categories based on the provided CategoryId.
Populate only Category dropdown when page loads
<div class="form-group">
<div class="col-2">
<label asp-for="CategoryTypeId" class="control-label"></label>
</div>
<div class="col-5">
<select asp-for="CategoryTypeId" asp-items="ViewBag.CategoryId" class="form-control">
<option value="">Select Category</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-2">
<label asp-for="SubCategoryTypeId" class="control-label"></label>
</div>
<div class="col-5">
<select asp-for="SubCategoryTypeId"></select>
</div>
</div>
Dynamically populate SubCategory dropdown in Category dropdown change event
$(function () {
$("select#CategoryTypeId").change(function () {
var cid = $(this).val();
$("select#SubCategoryTypeId").empty();
$.getJSON(`/Home/GetSubCategory?cid=${cid}`, function (data) {
//console.log(data);
$.each(data, function (i, item) {
$("select#SubCategoryTypeId").append(`<option value="${item.id}">${item.name}</option>`);
});
});
})
});
Action method GetSubCategory
public IActionResult GetSubCategory(int cid)
{
var SubCategory_List=_db.SubCategory.Where(s => s.CategoryId == cid).Select(c => new { Id = c.Id, Name = c.SubCategoryName }).ToList();
return Json(SubCategory_List);
}
Test Result
Update:
Model classes
public class Category
{
public int Id { get; set; }
[Required]
[Display(Name = "Category Name")]
public string CategoryName { get; set; }
public ICollection<SubCategory> SubCategories { get; set; }
}
public class SubCategory
{
public int Id { get; set; }
[Required]
[Display(Name = "SubCategory Name")]
public string SubCategoryName { get; set; }
public int CategoryID { get; set; }
public Category Category { get; set; }
}

How to add subitem with new item in asp.net MVC?

I have simple code first model (image: https://ufile.io/7c52a)
I have a problem, when I want to add a new bill. When I add a new bill, I also want to add products on that bill (insert data into Pr_bi table).
My bill entity:
public class Bill : Entity
{
public string Number { get; set; }
public DateTime TimeStamp { get; set; }
public virtual Customer Customer { get; set; }
public virtual ICollection<Product_Bill> Product_Bill { get; set; }
}
My product entity:
public class Product : Entity
{
public string Name { get; set; }
public virtual ICollection<Product_Bill> Product_Bill { get; set; }
}
My pr_bi entity:
public class Product_Bill : Entity
{
public int Quantity { get; set; }
public virtual Bill Bill { get; set; }
public virtual Product Product { get; set; }
}
I create create view model like that:
#using (Html.BeginForm("Create", "Bill", FormMethod.Post, new { #class = "form-horizontal" })){
#Html.HiddenFor(m => m.ID)
<div class="form-group">
<label class="col-sm-2 control-label">Bill number:</label>
<div class="col-sm-6">
#Html.TextBoxFor(m => m.Number, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Payed:</label>
<div class="col-sm-6">
#Html.EditorFor(x => x.Payed)
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Customer:</label>
<div class="col-sm-6">
#Html.DropDownListFor(m => m.Customer.ID, ViewData["Customers"] as SelectList, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6"><input type="submit" value="Shrani" class="btn btn-default" /></div>
</div>}
How can I add product on that bill inside that create view for a bill?
What do I have and what I like:
Screen
Thank you and have a nice day!

EditorForTemplate inside a DisplayForTemplate MVC Razor

I was trying to use Html Display For Template for looping through a Model data. Inside my Display template, I wanted to use an EditorFor template that would display a different set of data, In doing so, I was running into issues where my child model was empty. Upon playing around and getting guidance from David, I was able to make this to work. Below, please find my updated working solution.
UPDATE (Correct solution)
public class TargetingAreaViewModel
{
public int DealerId { get; set; }
public int OrderId { get; set; }
public List<TargetingAreaOrderItemViewModel> TargetingAreaOrderItems { get; set; }
public TargetingAreaViewModel()
{
this.TargetingAreaOrderItems = new List<TargetingAreaOrderItemViewModel>();
}
}
public class TargetingAreaOrderItemViewModel
{
public int OrderItemId { get; set; }
public int PackageMediaTypeId { get; set; }
public string PackageMediaTypeHeader { get; set; }
public string MediaTypeDesc { get; set; }
public string TargetingAdditonalInfo { get; set; }
public List<TargetingAreaItemViewModel> TargetingAreaItems { get; set; }
public TargetingAreaOrderItemViewModel()
{
this.TargetingAreaItems = new List<TargetingAreaItemViewModel>();
}
}
public class TargetingAreaItemViewModel
{
public int OrderItemId { get; set; }
public int PackageMediaTargetingFieldId { get; set; }
public string TargetingAreaFieldTitle { get; set; }
public string TargetingValue { get; set; }
public bool IsEnabled { get; set; }
public bool IsRequired { get; set; }
public string Comment { get; set; }
}
Parent View
#model Models.TargetingAreaViewModel
#{
ApplicationContext.Current.PageTitle = "Targeting Info";
Layout = "~/Views/Shared/MainLayout.cshtml";
}
#using (Html.BeginForm("OrderItemTargetingInfo", "Home", FormMethod.Post, new { #class = "form-horizontal" }))
{
#Html.DisplayFor(m => m.TargetingAreaOrderItems)
<div class="col-sm-12">
<div class="pull-right">
<input id="Submit" type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
}
DisplayFor Template View
#model Models.TargetingAreaOrderItemViewModel
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 btn-primary" style="margin-bottom: 10px; margin-top: 10px;">
#Html.Label(Model.MediaTypeDesc, new { #style = "font-weight: bold; padding-top: 10px; font-size: 18px;" })
#Html.HiddenFor(m => m.OrderItemId)
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
#Html.Raw(Model.PackageMediaTypeHeader)
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
#Html.EditorFor(m => m.TargetingAreaItems)
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
#Html.Label("Additional Info:", new { #class = "control-label col-md-2" })
<div class="col-md-6">
#Html.TextAreaFor(m => m.TargetingAdditonalInfo, new { #class = "form-control" })
</div>
</div>
</div>
</div>
Now, I am able to display the data, get the data out of my model on Post. Works great!!

In your parent views you are only passing in the TargetingAreaOrderItems of the model but the child view is expecting a TargetingAreaViewModel. Instead you should pass in the entire model:
#Html.DisplayFor(m => m)

Add Datas to different two tables with using same view and controller

I am trying to add datas to two different tables using same view and controller. But I am stuck. I am new at MVC, please let me know what did I wrong.Dto Model, Controller, Facade, Servicei,View and Entity Model as follows.
I get this Error
The model item passed into the dictionary is of type 'LibOrganizerEntity.Entity.OrgProje', but this dictionary requires a model item of type 'LibOrganizerSvc.Dto.ProjeEkleDto'.
Entity Models
[Table("KAR_PROJE")]
public class OrgProje
{
[Key, Required]
[Column("SIRA_NO")]
public int ID { get; set; }
[Column("ACIKLAMA")]
public string Aciklama { get; set; }
[Column("PLANLANAN_BASLANGIC_TARIHI")]
public DateTime? PlanlananBaslangicTarihi { get; set; }
[Column("PLANLANAN_BITIS_TARIHI")]
public DateTime? PlanlananBitisTarihi { get; set; }
[Column("GERCEKLESEN_BASLANGIC_TARIHI")]
public DateTime? GerceklesenBaslangicTarihi { get; set; }
[Column("GERCEKLESEN_BITIS_TARIHI")]
public DateTime? GerceklesenBitisTarihi { get; set; }
[Column("SILINME_TARIHI")]
public DateTime? SilinmeTarihi { get; set; }
[Column("YONETICI_ID")]
public int? YoneticiId { get; set; }
[ForeignKey("YoneticiId")]
public virtual OrgPersonel OrgPersonel { get; set; }
public virtual OrgProjeButce OrgProjeButce { get; set; }
public virtual OrgButce Butce { get; set; }
}
[Table("KAR_PROJE_BUTCE")]
public class OrgProjeButce
{
[Key, Required]
[Column("ID")]
public int ID { get; set; }
[Column("BUTCE_ID")]
public int ButceId { get; set; }
[Column("BUTCE_TUTAR")]
public float ButceTutar { get; set; }
[Column("GERCEKLESEN")]
public float? Gerceklesen { get; set; }
[ForeignKey("ButceId")]
public virtual OrgButce OrgButce { get; set; }
}
Dto Model
public class ProjeEkleDto
{
public string Aciklama { get; set; }
public DateTime? PlanlananBaslangicTarihi { get; set; }
public DateTime? PlanlananBitisTarihi { get; set; }
public DateTime? GerceklesenBaslangicTarihi { get; set; }
public DateTime? GerceklesenBitisTarihi { get; set; }
public DateTime? SilinmeTarihi { get; set; }
public string YoneticiAdi { get; set; }
public string YoneticiSoyadi { get; set; }
public string YoneticiId { get; set; }
public int ButceId { get; set; }
public string ButceAdi { get; set; }
public float ProjeButceTutari { get; set; }
public virtual IEnumerable<OrgPersonel> Proje { get; set; }
public virtual IEnumerable<OrgProjeButce> Butce { get; set; }
}
Controller
public ActionResult ProjeEkle()
{
return View();
}
[HttpPost]
public ActionResult ProjeEkle(OrgProje model)
{
try
{
svc.ProjeEkle(model);
return RedirectToAction("Index", "Home");
}
catch(Exception ex)
{
}
return View(model);
}
Service
public void ProjeEkle(OrgProje proje)
{
var dto = new ProjeFacade(db);
dto.ProjeEkle(proje);
}
Facade
public void ProjeEkle(OrgProje proje)
{
db.OrgProjeler.Add(proje);
db.SaveChanges();
}
View
#model LibOrganizerSvc.Dto.ProjeEkleDto
#{
ViewBag.Title = "ProjeEkle";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm())
{
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Proje Ekle</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<h4 class="heading_a">Proje Detayları</h4>
<div class="form-group" style="width: 47%; float: left">
<label for="reg_input">Proje Adı</label>
<input type="text" id="#Html.IdFor(x => x.Aciklama)" class="form-control">
</div>
<div class="form-group" style="width: 47%; float: right;">
<label for="reg_input">Proje Yöneticisi</label>
<select id="#Html.IdFor(x => x.YoneticiId)" name="chn_country" class="form-control">
#Html.Action("_PersonelleriGetir", "Ortak")
</select>
</div>
<div class="form-group" style="width: 47%; float: right;">
<label for="reg_input">Proje Bütçe Türleri</label>
<select id="#Html.IdFor(x => x.ButceAdi)" name="#Html.IdFor(x => x.ButceAdi)" class="form-control">
#Html.Action("_ButceleriGetir", "Ortak")
</select>
</div>
<div class="col-sm-6" style="padding-left: 0;">
<label for="reg_input">Proje Bütçesi</label>
<input type="text" id="#Html.IdFor(x => x.ProjeButceTutari)" class="form-control" name="#Html.IdFor(x => x.ProjeButceTutari)">
<span class="help-block">2000 ₺</span>
</div>
</div>
<div class="col-sm-6">
<h4 class="heading_a">Proje Zaman Ayarları</h4>
</div>
<div class="col-sm-3">
<label for="reg_input">Planlanan Başlama Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.PlanlananBaslangicTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input">Planlanan Bitiş Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.PlanlananBitisTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input" style="margin-top: 15px;">Gerçekleşen Başlama Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.GerceklesenBaslangicTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input" style="margin-top: 15px;">Gerçekleşen Bitiş Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.GerceklesenBitisTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div style="float: left; margin-top: 20px; width: 90%; position: relative; left: 15px;">
<input type="submit" class="btn btn-default btn-lg" value="Kaydet" />
</div>
</div>
</div>
</div>
</div>
</div>
}

As the error message indicates, you are passing a class of type OrgProje to a view that requires a view of type ProjeEkleDto.
Your error occurs in this action method:
[HttpPost]
public ActionResult ProjeEkle(OrgProje model)
{
try
{
svc.ProjeEkle(model);
return RedirectToAction("Index", "Home");
}
catch(Exception ex)
{
}
return View(model); // Passing a view model of the wrong type to the view
}
Either pass a view model of type ProjeEkleDto back to the view instead of your model of type OrgProje, or create a different view that accepts a view model of type OrgProje.

In your view Change -
#model LibOrganizerSvc.Dto.ProjeEkleDto
to
#model NameSpace.ProjeEkleDto
I am not sure about which namespace to be used, but you replace NameSpace with appropriate one.