I have a Model CargoType with id , name and few others. When adding new cargo type to database all of them are required, but when i'm adding new object of Cargo which have amount and cargoType for which i use <select> to choose from existing ones. Id is what is really choosen in this select but then because CargoType.Name is null, ModelState.isValid is false.
Cargo model:
public class Cargo
{
public int Id { get; set; }
public int Amount { get; set; }
[Required]
public CargoType CargoType { get; set; }
}
CargoType model:
public class CargoType
{
public int Id { get; set; }
[Required]
public string Name { get; set; }
public int Height { get; set; } //in millimeters
public int Width { get; set; } //in millimeters
public int Length { get; set; } //in millimeters
public bool StackingAllowed { get; set; }
}
Part of the View:
Order have List<Cargo> Cargo
#model TransportationManagementSystem.Models.Order
[...]
#for (int i = 0; i < 2; i++)
{
<div class="form-group">
<label asp-for="Cargo[i].Amount" class="control-label"></label>
<input asp-for="Cargo[i].Amount" class="form-control" />
<span asp-validation-for="Cargo[i].Amount" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Cargo[i].CargoType" class="control-label"></label>
<select asp-for="Cargo[i].CargoType.Id" class="form-control" asp-items="ViewBag.CargoTypes"></select>
<span asp-validation-for="Cargo[i].CargoType" class="text-danger"></span>
</div>
}
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,PickUpAddress,DropOffAddress,PickUpTime,DropOffTime,OrderState,Cargo")] Order order)
{
if (order.Cargo != null)
{
foreach (var cargo in order.Cargo)
{
var cargoType = await _context.CargoTypes.FindAsync(cargo.CargoType.Id);
cargo.CargoType = cargoType;
}
}
//ModelState.Clear();
if (ModelState.IsValid)
{
_context.Add(order);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(order);
}
How should i go about this?
Related
I have some problem.
I have next model:
public class DocumentViewModel
{
public string Nazvanie { get; set; }
public Author DocumentAutors { get; set; }
}
public class Author
{
public long Id { get; set; }
public List<IPerson> Authors { get; set; }
}
public interface IPerson
{
long Id { get; set; }
}
public class PersonUL : IPerson
{
public long Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
}
public class PersonIP : IPerson
{
public long Id { get; set; }
public string FirstName { get; set; }
public string SecondNAme { get; set; }
public string PostAddress { get; set; }
}
In .cshtml
#model DocumentViewModel
#if (Model.DocumentAutors.Authors != null && Model.DocumentAutors.Authors.Count > 0)
{
for (int i = 0; i < Model.DocumentAutors.Authors.Count; i++)
{
if (Model.DocumentAutors.Authors is PersonUL )
{
<div class="form-group">
<label asp-for="#Model.DocumentAutors.Authors[i].Name" class="col-md-10 control-label"></label>
<div class="col-md-10">
<input asp-for="#Model.DocumentAutors.Authors[i].Name" class="form-control" />
<span asp-validation-for="#Model.DocumentAutors.Authors[i].Name" class="text-danger"></span>
</div>
</div>
}
}
}
Model.DocumentAutors.Authors[i] don't contain "Name" field, because it's interface. I need cast it, but if i write
if (Model.DocumentAutors.Authors is PersonUL )
{
PersonUL ul = (PersonUL)Model.DocumentAutors.Authors[i];
<div class="form-group">
<label asp-for="#ul.Name" class="col-md-10 control-label"></label>
<div class="col-md-10">
<input asp-for="#ul.Name" class="form-control" />
<span asp-validation-for="#ul.Name" class="text-danger"></span>
</div>
</div>
}
i will get html with wrong name like this
<input class="form-control" type="text" id="Name" name="Name" value="566">
instead
<input class="form-control" type="text" id="DocumentAutors.Authors[0].Name" name="DocumentAutors.Authors[0].Name" value="566">
and ModelBinder will not bint this field into Authors List.
Is there a solution for this problem or should I make one generic model for PersonUL and PersonIP with all fields, which I don't really like it?
I am sorry but IMHO I don't see any advantages in the interface. It only makes the code more confused.
Why you don't try
public class Author
{
public long Id { get; set; }
public List<PersonIP> IpAuthors { get; set; }
public List<PersonUL> UlAuthors { get; set; }
}
or even better
public class DocumentViewModel
{
public string Nazvanie { get; set; }
public long AuthorId { get; set; }
public List<PersonIP> IpAuthors { get; set; }
public List<PersonUL> UlAuthors { get; set; }
}
Every time I get ModelState.isvalid = false. and the employee.ID is null. On the page-html I use asp-for in a hidden so it should match against id, but still comes out null, anyone have an idea?
public Employees Employees {get; set;}
public async Task<IActionResult> OnPost()
{
//if (!ModelState.IsValid)
//{
// var errors = ModelState.SelectMany(x => x.Value.Errors.Select(z => z.Exception));
//}
if (ModelState.IsValid)
{
var dbEmpy = await _db.Employees.FindAsync(Employees.ID);
dbEmpy.FirstName = Employees.FirstName;
dbEmpy.LastName = Employees.LastName;
dbEmpy.Salary = Employees.Salary;
dbEmpy.isCEO = Employees.isCEO;
dbEmpy.isManager = Employees.isManager;
dbEmpy.ManagerId = Employees.ManagerId;
await _db.SaveChangesAsync();
return RedirectToPage("ListEmpolyee/index");
}
return RedirectToPage();
}
}
and page
<div class="border container" style="padding:20px;">
<form method="post">
<input type="hidden" asp-for="Employees.ID" />
<span class="text-danger" asp-validation-summary="ModelOnly"></span>
<div class="form-group row">
<div class="col-4">
<label asp-for="Employees.FirstName"></label>
</div>
</div>
public class Employees
{
[Key]
public int ID { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public decimal Salary { get; set; }
public bool isCEO { get; set; }
public bool isManager { get; set; }
public int? ManagerId { get; set; }
}
Let's say I have this view model. Bear in mind, this is a view model. Not the domain/entity model.
public class Cart
{
public string Name { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public decimal TotalPrice { get; set; }
}
How do I scaffold to create CRUD Razor Page ?
Here is a demo ,you could refer to :
OrderItem Entity model and Cart View model, the View Model is related to the presentation layer of our application. They are defined based on how the data is presented to the user rather than how they are stored.
public class OrderItem
{
public int Id { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public decimal TotalPrice { get; set; }
public Product Product { get; set; }
}
public class Product
{
public int Id { get; set; }
public string ProductName { get; set; }
public decimal Price { get; set; }
}
public class Cart
{
public string Name { get; set; }
public int Qty { get; set; }
public decimal Price { get; set; }
public decimal TotalPrice { get; set; }
}
public class RazorPagesDbContext:DbContext
{
public RazorPagesDbContext(DbContextOptions<RazorPagesDbContext> options):base(options)
{ }
public DbSet<Product> Product { get; set; }
public DbSet<OrderItem> OrderItem { get; set; }
}
The CreateOrder Razor Page
#page
#model RazorPages2_2.Pages.Carts.CreateOrderModel
#{
ViewData["Title"] = "CreateOrder";
}
<h1>CreateOrder</h1>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Cart.Name" class="control-label"></label>
<input asp-for="Cart.Name" class="form-control" />
<span asp-validation-for="Cart.Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Cart.Price" class="control-label"></label>
<input asp-for="Cart.Price" class="form-control" />
<span asp-validation-for="Cart.Price" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Cart.Qty" class="control-label"></label>
<input asp-for="Cart.Qty" class="form-control" />
<span asp-validation-for="Cart.Qty" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Cart.TotalPrice" class="control-label"></label>
<input asp-for="Cart.TotalPrice" class="form-control" />
<span asp-validation-for="Cart.TotalPrice" 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-page="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
The CreateOrder page model, the Cartproperty uses the [BindProperty] attribute to opt-in to model binding. When the Create form posts the form values, the ASP.NET Core runtime binds the posted values to the Cart model then put the values into the entity model.
public class CreateOrderModel : PageModel
{
private readonly RazorPagesDbContext _context;
public CreateOrderModel(RazorPagesDbContext context)
{
_context = context;
}
public IActionResult OnGet()
{
var product = _context.Product.FirstOrDefault();
Cart = new Cart
{
Name = product.ProductName,
Price = product.Price,
Qty = 2,
TotalPrice = product.Price * 2
};
return Page();
}
[BindProperty]
public Cart Cart { get; set; }
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
var product = _context.Product.SingleOrDefault(p => p.ProductName == Cart.Name);
OrderItem orderItem = new OrderItem
{
Price = Cart.Price,
Qty = Cart.Qty,
TotalPrice = Cart.TotalPrice,
Product = product
};
_context.OrderItem.Add(orderItem);
await _context.SaveChangesAsync();
return RedirectToPage("../Index");
}
}
Result:
You could refer to the offocial doc about the Razor pages to create the page you want .
CODE BEHIND :
public class IndexModel : PageModel
{
private readonly ApplicationDbContext _db;
public IndexModel(ApplicationDbContext db)
{
_db = db;
}
public IEnumerable<Cart> Carts { get; set; }
public async Task OnGet()
{
Books = await _db.Carts.ToListAsync();
}
}
You need :
public class ApplicationDbContext:DbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options):base(options)
{
}
public DbSet<Cart> carts { get; set; }
}
for the View :
#model CardList.IndexModel
My question is: How to build html markup in razor pages and the LINQ queries (in the backend) to bring a checkbox list of all my SubCategoies in the EDIT and CREATE views.
Allowing me to create a product with multiple subcategories and also updating them at any time in the EDIT view.
Using .Net EF Core 2.2, Razor Pages.
Main class (Product):
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public Category Category { get; set; }
public List<ProductSubcategory> SubCategories { get; set; }
}
Product has a many-to-many relationship with Subcategory:
public class SubCategory
{
public int Id { get; set; }
public string Name { get; set; }
public List<ProductSubcategory> SubCategories { get; set; }
}
So the join table (entity) is ProductSubcategory:
public class ProductSubcategory
{
public int ProductId { get; set; }
public Product Product { get; set; }
public int SubCategoryId { get; set; }
public SubCategory SubCategory { get; set; }
}
The Edit (and create) Product view:
<h2>Editar: #Model.Product.Name</h2>
<form method="post">
<input type="hidden" asp-for="Product.Id" />
<div class="form-group">
<label asp-for="Product.Name"></label>
<input asp-for="Product.Name" class="form-control" />
<span class="text-danger" asp-validation-for="Product.Name"></span>
</div>
<div class="form-group">
<label asp-for="Product.Description"></label>
<textarea asp-for="Product.Description" class="form-control"></textarea>
<span class="text-danger" asp-validation-for="Product.Description"></span>
</div>
<div class="form-group">
<label asp-for="Product.Category"></label>
<select class="form-control" asp-for="Product.Category" asp-items="Model.Categories"></select>
<span class="text-danger" asp-validation-for="Product.Category"></span>
</div>
<div class="form-group">
//Code to allow the subcategory selection.
//preferable as checkboxes
//() subcat1 (x)subcat2 ()subcat3
//() subcat4 ()subcat5 (x)subcat6
</div>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
The Edit.cshtml.cs PageModel
public class EditModel : PageModel
{
private readonly IProductData _ProductData;
private readonly IHtmlHelper _HtmlHelper;
[BindProperty]
public Product Product { get; set; }
public IEnumerable<SelectListItem> Categories { get; set; }
public string MessageCreate { get; set; }
public EditModel(IProductData _productData, IHtmlHelper _htmlHelper)
{
_ProductData = _productData;
_HtmlHelper = _htmlHelper;
}
public IActionResult OnGet(int? productId)
{
Categories = _HtmlHelper.GetEnumSelectList<Category>();
if (productId.HasValue)
{
Product = _ProductData.GetById(productId.Value);
}
else
{
MessageCreate = "Criar novo Produto";
Product = new Product();
}
if (Product == null)
{
return RedirectToPage("./NotFound");
}
return Page();
}
public IActionResult OnPost()
{
if (!ModelState.IsValid)
{
Categories = _HtmlHelper.GetEnumSelectList<Category>();
return Page();
}
if (Product.Id > 0)
{
_ProductData.Update(Product);
}
else
{
_ProductData.Create(Product);
}
_ProductData.Commit();
TempData["Message"] = "Produto salvo!!!";
//PRG POST-REDIRECT-GET
return RedirectToPage("./Detail", new { productId = Product.Id });
}
}
The checkbox is used to represent a boolean property. I see you don't have a bool property so I suppose you need to add a Boolean property in SubCategories class like:
public bool IsChecked { get; set; } // added this property
Then you need to add a property to your PageModel(Edit or Create) to represent the data and ensured that posted values will be bound to it:
[BindProperty]
public List<Subcategory> SubCategories { get; set; } = new List<Subcategory>();
At the end all you need is to get the model binder to associate each checkbox with a specific Subcategory. The following code shows my example in .cshtml file:
#for (var i = 0; i < Model.SubCategories.Count(); i++)
{
<input asp-for="SubCategories[i].IsChecked" />
}
I'm trying to make a form that i could save a file(image) , but it shows me an error:
InvalidOperationException: The property 'Product.Image' is of an interface type ('IFormFile'). If it is a navigation property manually configure the relationship for this property by casting it to a mapped entity type, otherwise ignore the property from the model.
Apply
I dont know how to fix it , here's the code:
Product.cs
public class Product
{
public Product()
{
OrderDetails = new HashSet<OrderDetails>();
}
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int? CategoryId { get; set; }
public decimal? Price { get; set; }
public int? Quantity { get; set; }
public string ImagePath { get; set; }
public virtual ICollection<OrderDetails> OrderDetails { get; set; }
public virtual Category Category { get; set; }
}
ProductFormViewModel.cs
public class ProductFormViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int? CategoryId { get; set; }
public decimal? Price { get; set; }
public int? Quantity { get; set; }
public IFormFile Image { get; set; }
}
Create Action
[HttpGet]
public IActionResult Create()
{
var categories = _repository.GetCategories().ToList();
var categoriesModel = categories.Select(p => new
{
p.Id,
p.Name
});
ViewBag.Categories = new SelectList(categoriesModel, "Id", "Name");
return View();
}
[HttpPost]
public IActionResult Create(ProductFormViewModel product)
{
var file = product.Image; // **it returns NULL**
var upload = Path.Combine(_environment.ContentRootPath, "wwwroot\\uploads", product.Name);
if (!Directory.Exists(upload))
Directory.CreateDirectory(upload);
var filePath = Path.Combine(upload, file.FileName);
if (file.Length > 0)
{
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
file.CopyTo(fileStream);
}
}
var producti = new Product();
producti.CategoryId = product.CategoryId;
producti.Description = product.Description;
producti.Name = product.Name;
producti.Price = product.Price;
producti.Quantity = product.Quantity;
producti.ImagePath = filePath;
_repository.AddProduct(producti);
_repository.SaveChanges();
return RedirectToAction("Index","Products");
}
Create.cshtml
#model ProductFormViewModel
<br />
<br />
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form-group" asp-action="Create" asp-controller="Products" method="post">
<input type="hidden" asp-for="Id"/>
<div class="col-md-12">
<div class="form-group col-md-6">
<label asp-for="Name" class="control-label col-md-3"></label>
<input asp-for="Name" type="text" class="form-control col-md-3"/>
</div>
<div class="form-group col-md-6">
<label asp-for="CategoryId" class="control-label col-md-3"></label>
<select asp-for="CategoryId" asp-items="#ViewBag.Categories" class="form-control col-md-3">
<option hidden disabled selected >Select One</option>
</select>
</div>
<div class="form-group col-md-6">
<label asp-for="Description" class="control-label col-md-3"></label>
<textarea asp-for="Description" class="form-control" rows="4"></textarea>
</div>
<div class="form-group col-md-6">
<label asp-for="Price" class="control-label col-md-3"></label>
<input type="text" asp-for="Price" class="form-control col-md-3"/>
</div>
<div class="form-group col-md-6">
<label asp-for="Quantity" class="control-label col-md-3"></label>
<input type="text" asp-for="Quantity" class="form-control col-md-3"/>
</div>
<div class="form-group col-md-12">
<label class="control-label">Select Image</label>
<input asp-for="Image" type="file" class="btn-file"/>
</div>
<div class="form-group col-md-12 text-center">
<input type="submit" class="btn btn-success" value="Save"/>
</div>
</div>
</form>
</div>
</div>
</div>
IFormFile is a type used by the ASP.NET Core framework and it does not have a sql server type equivalent.
For your domain model store it as byte[] and when you work with views, is ok for you to use the IFormFile type.
ProductModel:
public class Product
{
public Product()
{
OrderDetails = new HashSet<OrderDetails>();
}
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int? CategoryId { get; set; }
public decimal? Price { get; set; }
public int? Quantity { get; set; }
public string ImagePath { get; set; }
public virtual ICollection<OrderDetails> OrderDetails { get; set; }
public virtual Category Category { get; set; }
}
ProductViewModel:
public class ProductViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int? CategoryId { get; set; }
public decimal? Price { get; set; }
public int? Quantity { get; set; }
public IFormFile Image { get; set; }
}
Controller method:
[HttpGet]
public IActionResult Create()
{
var categories = _repository.GetCategories().ToList();
var categoriesModel = categories.Select(p => new
{
p.Id,
p.Name
});
ViewBag.Categories = new SelectList(categoriesModel, "Id", "Name");
return View();
}
[HttpPost]
public IActionResult Create(ProductViewModel model)
{
// Save the image to desired location and retrieve the path
// string ImagePath = ...
// Add to db
_repository.Add(new Product
{
Id = model.Id,
ImagePath = ImagePath,
// and so on
});
return View();
}
Also specify to the form enctype="multipart/form-data" in your view.
using System.ComponentModel.DataAnnotations.Schema;
namespace model{
public class ProductViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int? CategoryId { get; set; }
public decimal? Price { get; set; }
public int? Quantity { get; set; }
[NotMapped]
public IFormFile Image { get; set; }
}
}