How to display data retrieved from ASP.NET API into angular V13 - c#

I'm trying to get every motorcycle content from the web api and display them into my angular project.
ASP.NET Framework Web API 4.7
Angular CLI: 13.3.7
Angular: 13.3.11
Web API side:
Controller:
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class HomeController : ApiController
{
private NavEcommerceDBfirstEntities db = new NavEcommerceDBfirstEntities();
public HomeModel Get()
{
var streetBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Street").Select(m => new MotorcycleDTO
{
ModelDto = m.Model,
PriceDto = m.Price,
BrandDto = m.Brand.Name,
CategoryDto = m.Category.MotoCategory,
DealersDto = m.Dealers.Select(d => d.Name).ToList()
});
var sportBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Sport").Select(m => new MotorcycleDTO
{
ModelDto = m.Model,
PriceDto = m.Price,
BrandDto = m.Brand.Name,
CategoryDto = m.Category.MotoCategory,
DealersDto = m.Dealers.Select(d => d.Name).ToList()
});
var adventureBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Adventure").Select(m => new MotorcycleDTO
{
ModelDto = m.Model,
PriceDto = m.Price,
BrandDto = m.Brand.Name,
CategoryDto = m.Category.MotoCategory,
DealersDto = m.Dealers.Select(d => d.Name).ToList()
});
var scooterBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Scooter").Select(m => new MotorcycleDTO
{
ModelDto = m.Model,
PriceDto = m.Price,
BrandDto = m.Brand.Name,
CategoryDto = m.Category.MotoCategory,
DealersDto = m.Dealers.Select(d => d.Name).ToList()
});
var homeModel = new HomeModel
{
StreetBikesContents = streetBikesContents,
SportBikesContents = sportBikesContents,
AdventureBikesContents = adventureBikesContents,
ScooterBikesContents = scooterBikesContents
};
return homeModel;
}
}
}
}
Models:
HomeModel class:
public class HomeModel
{
public IEnumerable<MotorcycleDTO> StreetBikesContents { get; set; }
public IEnumerable<MotorcycleDTO> SportBikesContents { get; set; }
public IEnumerable<MotorcycleDTO> AdventureBikesContents { get; set; }
public IEnumerable<MotorcycleDTO> ScooterBikesContents { get; set; }
}
Motorcycle class:
//Database First Approach and Created by ADO.NET
public partial class Motorcycle
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public Motorcycle()
{
this.Carts = new HashSet<Cart>();
this.OrderDetails = new HashSet<OrderDetail>();
this.Dealers = new HashSet<Dealer>();
}
public int MotorcycleId { get; set; }
public string Model { get; set; }
public double Price { get; set; }
public Nullable<int> BrandId { get; set; }
public byte[] Image { get; set; }
public Nullable<int> CategoryId { get; set; }
public virtual Brand Brand { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<Cart> Carts { get; set; }
public virtual Category Category { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<OrderDetail> OrderDetails { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<Dealer> Dealers { get; set; }
}
DTO class:
public class MotorcycleDTO
{
public string ModelDto { get; set; }
public double PriceDto { get; set; }
public string BrandDto { get; set; }
public string CategoryDto { get; set; }
public IEnumerable<string> DealersDto { get; set; }
}
Angular Side:
Model:
home-categorised-bikes.model.ts:
export interface FromDTOContents{
ModelDto: string;
PriceDto: string;
BrandDto: string;
CategoryDto: string;
DealersDto: string[];
}
export interface HomeModel{
sportBikesContents: FromDTOContents[];
streetBikesContents: FromDTOContents[];
adventureBikesContents: FromDTOContents[];
scooterBikesContents: FromDTOContents[];
}
Service:
home-categorised-bikes.service.ts:
#Injectable({
providedIn: 'root'
})
export class HomeCategorisedBikesService {
Url = 'https://localhost:44377/api/Home';
constructor(private http: HttpClient) { }
get(): Observable<HomeModel> {
return this.http.get<HomeModel>(this.Url);
}
}
app.component.ts:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Home Page';
constructor(private homeCategorisedBikesService: HomeCategorisedBikesService){}
ngOnInit(): void {
this.getAllBikesContents();
}
getAllBikesContents(){
this.homeCategorisedBikesService.get().subscribe(
Response => {
this.onHomeBikesContentsResponse(Response);
}
)
}
public sportBikesContentsvar: string[] = [];
public streetBikesContentsvar: string[] = [];
public adventureBikesContentsvar: string[] = [];
public scooterBikesContentsvar: string[] = [];
onHomeBikesContentsResponse(Response: HomeModel): void {
Response.sportBikesContents.forEach((content: FromDTOContents) => {
this.sportBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
});
Response.sportBikesContents.forEach((content: FromDTOContents) => {
this.streetBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
});
Response.sportBikesContents.forEach((content: FromDTOContents) => {
this.adventureBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
});
Response.sportBikesContents.forEach((content: FromDTOContents) => {
this.scooterBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
});
}
}
app.component.html:
<div class="container">
<h3 class="textCenter">Soprt Bikes</h3>
<div class="column" *ngFor="let c of sportBikesContentsvar">
<h3>{{c}}</h3>
</div>
<div class="devideElement">
<h3 class="textCenter">Street Bikes</h3>
<div class="column" *ngFor="let c of streetBikesContentsvar">
<h3>{{c}}</h3>
</div>
</div>
<div class="devideElement">
<h3 class="textCenter">Adventure Bikes</h3>
<div class="column" *ngFor="let c of adventureBikesContentsvar">
<h3>{{c}}</h3>
</div>
</div>
<div class="devideElement">
<h3 class="textCenter">Scooter Bikes</h3>
<div class="column" *ngFor="let c of scooterBikesContentsvar">
<h3>{{c}}</h3>
</div>
</div>
</div>
Question:
I want to display the c.model, c.brand, c.category, c.price, c.dealers which is an array of dealers for each motorcycle individually.
Please let me know if anything is unclear in the code or the question.
Thank you in advance.

The way you are declaring your sportBikesContentsvar and others are going to give you issue. It's better to define your object type FromDTOContents[].
This way you will have access to all the object properties.
I'm posting one example, rest would be same
public sportBikesContentsvar: FromDTOContents[] = [];
onHomeBikesContentsResponse(Response: HomeModel): void {
this.sportBikesContentsvar = Response.sportBikesContents;
}
Then in HTML
<div class="container">
<h3 class="textCenter">Sport Bikes</h3>
<div class="column" *ngFor="let c of sportBikesContentsvar">
<h3>{{c.ModelDto}}</h3>
<h3>{{c.PriceDto}}</h3>
<h3>{{c.BrandDto}}</h3>
<h3>{{c.CategoryDto}}</h3>
<ng-container *ngFor="let dealers of c.DealersDto">
<h3>{{dealers}}</h3>
</ng-container>
</div>
</div>

Related

Set scores to database after passing the exam in ASP.NetCore 3.1 MVC

My Question Model
public class Question
{
[Key]
public int Id { get; set; }
public string Title { get; set; }
public string A { get; set; }
public string B { get; set; }
public string C { get; set; }
public string D { get; set; }
public int SubjectId { get; set; }
public virtual Subject Subject { get; set; }
public int AnswerId { get; set; }
public virtual Answer Answer { get; set; }
}
and this is my view.cshtml
#foreach (var item in Model)
{
<div>
#Html.DisplayFor(modelItem => item.Title)
<input type="radio" value="#Html.DisplayFor(modelItem => item.A)" id="A" name="#Html.DisplayFor(modelItem=> item.Id)" class="rb" />
#Html.DisplayFor(modelItem => item.A)
<input type="radio" value="#Html.DisplayFor(modelItem => item.B)" id="B" name="#Html.DisplayFor(modelItem=> item.Id)" class="rb" />
#Html.DisplayFor(modelItem => item.B)
<input type="radio" value="#Html.DisplayFor(modelItem => item.C)" id="C" name="#Html.DisplayFor(modelItem=> item.Id)" class="rb" />
#Html.DisplayFor(modelItem => item.C)
<input type="radio" value="#Html.DisplayFor(modelItem => item.D)" id="D" name="#Html.DisplayFor(modelItem=> item.Id)" class="rb" />
#Html.DisplayFor(modelItem => item.D)
</div>
}
So how can I can compare the user answer with my correct answer and then give a score and save it to the database?
and this is my table that should store the score:
public class StraintTest
{
public int Id { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
public string FatherName { get; set; }
public int Cost { get; set; }
public string Contact { get; set; }
public int Grammar { get; set; }
public int Vocabulary { get; set; }
public int Reading { get; set; }
public int Listening { get; set; }
public int Writing { get; set; }
public int Speaking { get; set; }
public string Exam_Date { get; set; }
public int Score { get; set; }
public int ProgramId { get; set; }
public virtual Program Program { get; set; }
}
this is the StriantTest Service :
public int AddStraintTest(StraintTestViewModel test)
{
var newStriant = new StraintTest()
{
Name = test.Name,
LastName = test.LastName,
FatherName = test.FatherName,
Contact = test.Contact,
Cost = test.Cost,
Exam_Date = test.Exam_Date,
Grammar = test.Grammar,
Listening = test.Listening,
Speaking = test.Speaking,
Writing = test.Writing,
Reading = test.Reading,
ProgramId = test.ProgramId.HasValue ? test.ProgramId.Value:1,
Score = test.Score
};
_context.Add(newStriant);
_context.SaveChanges();
return newStriant.Id;
}
this is StrainTest Controller:
[HttpPost]
public IActionResult Create(StraintTestViewModel straintTest)
{
if (ModelState.IsValid)
{
int id = _istraintTest.AddStraintTest(straintTest);
if (id > 0)
{
return RedirectToAction(nameof(Create));
}
}
ViewBag.Program = new SelectList(_iprogram.GetProgram(), "Id", "Name");
return View();
}
this is my View, when the start exam button clicked, it should take the Id of this field and show the questions and after submitting the question the score field should update and show the score that the student got from exam.
and this is my setting score operation:
public IActionResult TakeExam(int straintTestId)
{
var data = _iquestion.ShowQuestion();
return View(data);
}
[HttpPost]
public IActionResult TakeExam(IEnumerable<Question> Questions, int straintTestId)
{
ExamCheck examCheck;
int score = 0;
if(Questions != null)
{
foreach(Question Q in Questions)
{
examCheck = new ExamCheck();
examCheck.StriantTestId = straintTestId;
examCheck.QuestionID = Q.Id;
examCheck.CorrectAnswer = Q.AnswerId;
if(Q.SelectAnswer != null)
{
examCheck.StudentAnswer = (int)Q.SelectAnswer;
}
else
{
examCheck.StudentAnswer = 0;
}
_context.ExamChecks.Add(examCheck);
_context.SaveChanges();
if(Q.SelectAnswer == Q.AnswerId)
{
score += 1;
}
}
}
StraintTest straintTest = new StraintTest();
straintTest.Id = straintTestId;
straintTest.Score = score;
_context.StraintTests.Add(straintTest);
_context.SaveChanges();
return View(straintTest);
}
when I click it shows the questions but it doesn't set score...!
it would really please if someone help me obviously !!!
I wrote simple test code for you. You can check this and implement yourself.
This is my question class :
public class Question
{
public string Tittle { get; set; }
public string A { get; set; }
public string B { get; set; }
public string C { get; set; }
public string D { get; set; }
public bool OptA { get; set; }
public bool OptB { get; set; }
public bool OptC { get; set; }
public bool OptD { get; set; }
}
and this is controller Get Action. I created random questions dont mind that.
public IActionResult test() {
List<Question> list = new List<Question>() {
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
new Question { Tittle = "Asadasadasa", A = "asasas", B = "basasasasas", C = "casadsdfadsad", D = "dasadsdsd" },
};
return View(list);
}
after that this is my view page. I used checkbox for input this allow multi slect but you can use option group for that.I forget to add options text but dont mind that either :).
#model List<EpsilonMFALanguage.Help.Question>
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<form action="#Url.Action("test","Home")" method="post" class="form-horizontal">
#for (int i=0;i<Model.Count;i++)
{
<div class="form-group">
<input type="hidden" asp-for="#Model[i].Tittle" />
<label id="lbl_#i" class="col-md-12" asp-for="#i">#Model[i].Tittle</label>
<div class="col-md-6">
<input type="checkbox" id="#i" asp-for="#Model[i].OptA" />
</div>
<div class="col-md-6">
<input type="checkbox" id="#i" asp-for="#Model[i].OptB" />
</div>
<div class="col-md-6">
<input type="checkbox" id="#i" asp-for="#Model[i].OptC" />
</div>
<div class="col-md-6">
<input type="checkbox" id="#i" asp-for="#Model[i].OptD" />
</div>
</div>
}
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
this way when user solve the test and click submit it goes to my test Post action.
[HttpPost]
public IActionResult test(List<Question> list) {
return Json("");
}
when I debug the post action this is the result. You can see wihch option was selected.

create unique name for radio button groups and pass the values of each selection to the controller in MVC?

I am trying to create radio button groups that correspond to a "registration". Each registration can have multiple "payment options" I need to be able to select an option for each registration then pass those values to the controller. I have looked at the solutions and the comments from yesterday and this is my updated code but its still not working.
<div id="regsAndFees">
<ol>
#foreach (var reg in Model.PendingRegistrations.Cart)
{
<li>
<label>#reg.Description - </label> <span><label>#reg.Fee.ToString("C")</label></span>
<ul style="list-style:none;">
#foreach (var fee in reg.AdditionalFees)
{
<li>
<label>#fee.AdditionalFee.ToString("C")</label>
<span>#fee.Description</span>
</li>
}
</ul>
#for (int i = 0; i < Model.PaymentOptions.RegistrationPaymentTypes.Count; i++)
{
#Html.RadioButtonFor(m => m.PaymentOptions.RegistrationPaymentTypes[i], #Model.PendingRegistrations.PaymentOptions.RegistrationPaymentTypes)
#Html.LabelFor(m => m.PaymentOptions.RegistrationPaymentTypes[i], #Model.PendingRegistrations.PaymentOptions.RegistrationPaymentTypes)
<br />
}
</li>
}
</ol>
</div
Models
public class ViewModelPendingRegistrations
{
public ViewModelPendingRegistrations()
{
PendingRegistrations = new List<ViewModelPendingRegistration>();
Errors = new List<string>();
this.TempCart = new List<SalesTax.TempCart>();
this.Cart = new List<Registrations.Cart>();
this.PaymentOptions = new ViewModelPaymentOptions();
}
public ViewModelPaymentOptions PaymentOptions { get; set; }
public List<Domain.ViewModel.Registrations.Cart> Cart { get; set; }
public List<ViewModelPendingRegistration> PendingRegistrations { get; set; }
public bool IsBusinessAdmin { get; set; }
public bool HasBusinessRegistrations { get; set; }
public bool HasIndividualRegistrations { get; set; }
public List<string> Errors { get; set; }
here is Model.PendingRegistrations.Cart
public class Cart
{
public Cart()
{
this.AdditionalFees = new List<ViewModelAdditionalFee>();
this.PaymentOptions = new ViewModelPaymentOptions();
}
public List<ViewModelRegistrationRequirement> Requirements { get; set; }
public ViewModelPaymentOptions PaymentOptions { get; set; }
public int SelectedPaymentOption { get; set; }
public string EntityName { get; set; }
}
this is my controller method
public ActionResult PaymentOptions(Domain.ViewModel.PaymentModel model)
{
var pendingRegistrations = new BusinessLayer.Registration().GetPendingRegistrations(false, false, AppUser.UserId, true);
var paymentdetails = new BusinessLayer.PaymentType().GetAllActive();
var regs = pendingRegistrations.Cart;
model.PendingRegistrations.Cart = regs;
var payments = new BusinessLayer.RegistrationTypePaymentType().GetAll();
foreach (var pendingReg in regs)
{
model.PaymentOptions.RegistrationPaymentTypes = payments.Where(x => x.RegistrationTypeID == pendingReg.RegistrationTypeID).ToList();
foreach (var pmt in pendingReg.PaymentOptions.RegistrationPaymentTypes)
{
var pmtnames = paymentdetails.Where(x => x.PaymentTypeID == pmt.PaymentTypeID).FirstOrDefault();
pmt.PaymentName = pmtnames.Name;
}
}
return View(model);
}
and lastly this is what the view looks like with this code

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);
}

Adding a TextBox dynamically based on bool

Case is an MVC 5 application
I have a class Team (sports team), that looks like this:
public class Team
{
public int Id { get; set; }
public string TeamName { get; set; }
public string Badge { get; set; }
public TeamColor? TeamColor { get; set; }
public League? League { get; set; }
public bool HasAlias { get; set; }
public bool IsAlias { get; set; }
public int? AliasId { get; set; }
public virtual Team AliasTeam { get; set; }
public virtual ICollection<Team> Aliases { get; set; }
}
An AliasTeam is a Team with just a TeamName an AliasId.
How do I go about adding a textbox for filing out the AliasTeamName if the user has clicked the HasAlias checkbox on the original team, and how do I loop through the textboxes in the controller in order to add them as Teams with an AliasId of the original team?
Controller action looks like this right now, where I can add a Team
public ActionResult CreateTeam(CreateTeamViewModel model)
{
if (ModelState.IsValid)
{
var team = new Team
{
TeamName = model.TeamName,
TeamColor = model.TeamColor,
League = model.League
};
db.Teams.Add(team);
db.SaveChanges();
return RedirectToAction("AddTeamImage", new {teamid = team.Id});
}
return View(model);
}
EDIT:
Solved it by adding following js:
$(document).ready(function() {
$("#HasAlias").change(function () {
if (this.checked) {
$(".textboxes").append('<div><input class="form-control text-box single-line" placeholder="enter aliasname" type="text" name="teams"/> <span class=" glyphicon glyphicon-plus-sign"></span> <span class=" glyphicon glyphicon-minus-sign"></span></div>');
} else {
$(".textboxes").empty();
}
});
$('.textboxes').on("click", ".add_field", function(e) {
e.preventDefault();
$(".textboxes").append('<div><input class="form-control text-box single-line" placeholder="enter aliasname" type="text" name="teams"/> <span class=" glyphicon glyphicon-plus-sign"></span> <span class=" glyphicon glyphicon-minus-sign"></span></div>');
});
$('.textboxes').on("click", ".remove_field", function (e) {
e.preventDefault(); $(this).parent('div').remove();
});
});
And then looping through array of teams in Action:
public ActionResult CreateTeam(CreateTeamViewModel model, string[] teams)
{
if (ModelState.IsValid)
{
var team = new Team
{
TeamName = model.TeamName,
TeamColor = model.TeamColor,
League = model.League,
HasAlias = model.HasAlias
};
db.Teams.Add(team);
db.SaveChanges();
foreach (var s in teams)
{
var t = new Team
{
TeamName = s,
AliasId = team.Id,
IsAlias = true
};
db.Teams.Add(t);
db.SaveChanges();
}
return RedirectToAction("Index");
}
return View(model);
}
I may have misunderstood the whole ViewModel paradigm then. I thought you where meant to create ViewModels, with only the information needed to create a result.

How to count nested collection from database using Entity Framework

I'm making my first Asp.net Mvc application - Forum System.
I'm trying to display how many posts and threads there are in sub category.
This are my tables:
public class Category
{
private ICollection<SubCategory> subCategories;
public Category()
{
this.subCategories = new HashSet<SubCategory>();
}
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<SubCategory> SubCategories
{
get { return this.subCategories; }
set { this.subCategories = value; }
}
}
public class SubCategory
{
private ICollection<Thread> threads;
public SubCategory()
{
this.threads = new HashSet<Thread>();
}
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public int CategoryId { get; set; }
public virtual Category Category { get; set; }
public virtual ICollection<Thread> Threads
{
get { return this.threads; }
set { this.threads = value; }
}
}
public class Thread
{
private ICollection<Post> posts;
public Thread()
{
this.posts = new HashSet<Post>();
}
public int Id { get; set; }
public string Title { get; set; }
public virtual SubCategory SubCategory { get; set; }
public int SubCategoryId { get; set; }
public virtual ICollection<Post> Posts
{
get { return this.posts; }
set { this.posts = value; }
}
public string AuthorId { get; set; }
public virtual ApplicationUser Author { get; set; }
}
public class Post
{
public int Id { get; set; }
public string Content { get; set; }
public int ThreadId { get; set; }
public virtual Thread Thread { get; set; }
public string AuthorId { get; set; }
public virtual ApplicationUser Author { get; set; }
}
this is my view:
#model IEnumerable<ForumSystem.Web.ViewModels.Home.IndexCategoryViewModel>
#{
ViewBag.Title = "Home Page";
}
<div class="container">
#foreach (var category in Model)
{
<div class="row">
<h5>#category.Name</h5>
#foreach (var subCat in category.SubCategories)
{
<div class="col-md-10">
<div class="row">
<h7>
#subCat.Title
</h7>
</div>
<div class="row">
<p>#subCat.Description</p>
</div>
</div>
<div class="col-md-2">
<p>#category.ThreadsCount threads</p>
<p>#category.PostsCount posts</p>
<div class="row">
</div>
</div>
}
</div>
}
</div>
#category.ThreadsCount and PostsCount are not working.
I can get easy threads count in view with #subCategory.Threads.Count, but I can't get posts count.
In controller I have tried many things.
The code in the moment is :
public ActionResult Index()
{
var threadScount = this.Data
.SubCategories
.All()
.SelectMany(x => x.Threads)
.Count();
var postsCount = this.Data
.Threads
.All()
.SelectMany(x => x.Posts)
.Count();
var model = this.Data
.Categories
.All()
.Select(c => new IndexCategoryViewModel
{
Name = x.Name,
SubCategories = c.SubCategories,
ThreadsCount = threadScount,
PostsCount = postsCount,
})
.ToList();
return this.View(model);
}
But this gives me all threads and posts count, not specific for each subCategory.
Thanks in advance.
Create view models that represent what you want to display
public class SubCategoryVM
{
public string Title { get; set; }
public string Description { get; set; }
public int ThreadsCount { get; set; }
public int PostCount { get; set; }
}
public class CategoryVM
{
public string Name { get; set; }
public List<SubCategoryVM> SubCategories { get; set; }
}
Controller
public ActionResult Index()
{
var model = this.Data.Categories.Select(c => new CategoryVM
{
Name = c.Name,
SubCategories = c.SubCategories.Select(s => new SubCategoryVM
{
Title = s.Title,
Description = s.Description,
ThreadsCount = s.Threads.Count,
PostsCount = s.Threads.SelectMany(t => t.Posts).Count;
})
});
return View(model);
}
View
#model IEnumerable<CategoryVM>
#{
ViewBag.Title = "Home Page";
}
<div class="container">
#foreach (var category in Model)
{
<div class="row">
<h5>#category.Name</h5>
#foreach (var subCategory in category.SubCategories)
{
<div class="col-md-10">
<div class="row">
<h7>
// The following line in your view makes no sense
// #subCat.Title
// Assuming you have method: public ActionResult Details(string title) in SubCategoryController, then
#Html.ActionLink(subCategory.Title, "Details", "SubCategory", new { title = subCategory.Title }, null)
</h7>
</div>
<div class="row">
<p>#subCategory.Description</p>
</div>
</div>
<div class="col-md-2">
<p><span>#subCategory.ThreadCount</span><span>threads</span></p>
<p><span>#subCategory.PostCount</span><span>posts</span></p>
</div>
}
</div>
}
</div>
I believe what you're looking for is this:
var model = this.Data
.Categories
.Select(c => new IndexCategoryViewModel
{
Name = c.Name,
SubCategories = c.SubCategories,
ThreadsCount = c.Threads.Count(),
PostsCount = c.Threads.Sum(t => t.Posts.Count()),
})
.ToList();
Here you create nested queries to count threads and posts for each category. You don't need the threadsCount and postsCount since they store overall counts and not per-category counts.
NOTE
I assume that Threads property exists on category class and Posts property exists on thread class. Otherwise you'll need to have predicates to associate posts with threads and threads with categories. Most commonly they would be ids, in which case the code would look similar to this:
var model = this.Data
.Categories
.Select(c => new IndexCategoryViewModel
{
Name = c.Name,
SubCategories = c.SubCategories,
ThreadsCount = this.Data
.Threads
.Count(t => t.CategoryId == c.Id),
PostsCount = this.Data
.Posts
.Count(p => this.Data
.Threads
.Any(t => p.ThreadId == t.Id && t.CategoryId == c.Id)
),
})
.ToList();
Notice that I also skipped all .All() calls since they seem redundant, although I'm not sure what they do so you can throw it back in there if necessary.
Try this, also you will need to change the ViewModel to reflect requirements
public ActionResult Index()
{
var model = from subCategory in this.Data.SubCategories
select new SubCategoryViewModel
{
Name = subCategory.Category.Name,
SubCategory = subCategory,
ThreadsCount = subCategory.Threads.Count(),
PostsCount = subCategory.Threads.SelectMany(c => c.Posts).Count(),
})
.ToList();
return this.View(model);
}

Categories