Have a partial view containing a form, but can't seem to get validation errors to show up.
Models
public class HomeModel
{
public LoginModel LoginModel { get; set; }
}
public class LoginModel
{
[Required]
[Display(Name = "Email")]
public string Username { get; set; }
[Required]
public string Password { get; set; }
}
Index.cshtml:
#model MyApp.Models.HomeModel
#{
await Html.RenderPartialAsync("_LoginPartial", Model.LoginModel);
}
HomeController
public IActionResult Index()
{
return View(new HomeModel()
{
LoginModel = new LoginModel()
});
}
[HttpPost]
public IActionResult Login(LoginModel model)
{
return View("Index", new HomeModel()
{
LoginModel = model
});
}
_LoginPartial
#model MyApp.Models.LoginModel
<form asp-action="Login" asp-controller="Home" method="post" role="form" style="width:70%;margin: 0 auto;">
<div style="display:none" asp-validation-summary="ValidationSummary.All" class="alert alert-danger fade in">
×
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
<div class="form-group" style="text-align:left">
<label asp-for="Username" style="font-size:22px;" class="control-label"></label>
<input asp-for="Username" type="text" class="form-control" />
</div>
<div class="form-group" style="text-align:left">
<label asp-for="Password" style="font-size:22px;" class="control-label"></label>
<input asp-for="Password" type="password" class="form-control" />
</div>
<div class="spacer-15"></div>
<div class="form-group" style="font-size:22px;">
<button type="submit"
style="background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;" value="Login">
<img src="~/images/flower.png" />Next
</button>
</div>
</form>
It looks like you're missing a few things. Each of your inputs will need a corresponding validation element that uses asp-validation-for.
<div class="form-group" style="text-align:left">
<label asp-for="Username" style="font-size:22px;" class="control-label"></label>
<input asp-for="Username" type="text" class="form-control" />
<span asp-validation-for="Username" class="text-danger"></span>
</div>
Likewise, if you're planning on using jQuery validation, you should add the following to the environment elements in your _Layout.cshtml file.
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
Related
I am trying to populate a dropdown on my razor page with info from the database(My website is for document upload/download). When they are uploading a file, it asks for vendor Id as this is the foreign key linking my 'Files' and 'Vendor(user)' together.
In the dropdown I want them to be able to select the vendor name, but in the files db - the vendorId gets entered.
I could populate it manually with the following code:
<select asp-for="Files.VendorId">
<option value="3950">Girvan Early Growers Ltd</option>
</select>
But at one point we may have anything up to 50 vendors, so not ideal.
Below I will include my page model and my cshtml page for this to see if it helps.
PageModel:
using FarmersPortal.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore.Storage.ValueConversion.Internal;
namespace FarmersPortal.Pages
{
[Authorize(Roles ="Admin")]
public class CreateModel : PageModel
{
private readonly FarmersPortal.Data.filedbContext _context;
public CreateModel(FarmersPortal.Data.filedbContext context)
{
_context = context;
}
public IQueryable<Data.Vendor> VendorList { get; set; }
[BindProperty]
public List<Data.Vendor> Vendores { get; set; }
public void OnGet()
{
Vendores = _context.Vendors.ToList();
}
[BindProperty]
public Data.File Files { get; set; }
public Data.Vendor Vendors { get; set; }
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details, see https://aka.ms/RazorPagesCRUD.
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.Files.Add(Files);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
}
.cshtml:
#page
#model FarmersPortal.Pages.CreateModel
#{
ViewData["Title"] = "Create";
}
<style>
body {
background-image: url('hero-range-1.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<h1 style="color: white">Create</h1>
<h4 style ="color: white">Files</h4>
<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="Files.Number" class="control-label" style="color: white"></label>
<input asp-for="Files.Number" class="form-control" />
<span asp-validation-for="Files.Number" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group">
<label asp-for="Files.FileType" class="control-label" style="color: white"></label>
<input asp-for="Files.FileType" class="form-control" />
<span asp-validation-for="Files.FileType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.VendorId" class="control-label" style="color: white"></label>
<input asp-for="Files.VendorId" class="form-control" />
<span asp-validation-for="Files.VendorId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.Haulier" class="control-label" style="color: white"></label>
<input asp-for="Files.Haulier" class="form-control" />
<span asp-validation-for="Files.Haulier" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.Comments" class="control-label" style="color: white"></label>
<input asp-for="Files.Comments" class="form-control" />
<span asp-validation-for="Files.Comments" class="text-danger"></span>
</div>
<select asp-for="Files.VendorId">
<option value="3950">Girvan Early Growers Ltd</option>
</select>
<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");
}
}
How would I go about this?
From your description, In Vendor table, There are Id, Name and other properties, So If you want DropdownList show 'Name' as text, 'Id' as value, You can refer to this code:
public void OnGet()
{
List<SelectListItem> test = new List<SelectListItem>();
Vendores = _context.Vendors.ToList();
foreach (var item in Vendores)
{
test.Add(new SelectListItem {Text=item.Name,Value = item.Id.ToString() });
}
ViewData["demo"] = test;
}
In the View
<select asp-for="Files.VendorId" asp-items="#ViewData["demo"]"></select>
Then the dropdownlist will show name but pass id.
You can refer to this link to learn more.
I'm using a regular html form instead of #html.BeginForm and I have these 2 form tags in my Create.cshtml view file.
I was experimenting with routing, but my post doesn't seem to get the values even if I bind the properties. I've tried in vain but I can't seem to make this work, and can't find the answer from googling.
Create.cshtml
#model Actor
#{
ViewData["Title"] = "Add";
}
<section class="container-xl justify-content-center col-lg-5 col-md-8 col-sm-10">
<div class="row">
<span class="text-center mb-3">
<h5>Add a new record</h5>
</span>
<div>
<form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</form>
<div class="form-group">
<label class="form-label" asp-for="ProfilePictureUrl">Profile Picture</label>
<input class="mb-2 form-control" type="text" asp-for="ProfilePictureUrl" placeholder="Profile picture" />
</div>
<div class="form-group">
<label class="form-label" asp-for="FullName">Full Name</label>
<input class="mb-2 form-control" type="text" placeholder="Full name" asp-for="FullName" />
</div>
<div class="form-group">
<label class="form-label" asp-for="Bio">Biography</label>
<input class="form-control" type="text" placeholder="Bio" asp-for="Bio" />
</div>
<form>
<div class="form-group mt-3">
<a class="btn btn-outline-secondary" asp-action="Index">Show All</a>
<input asp-action="Create2" class="float-end btn btn-outline-success" type="submit" value="Create" />
</div>
</form>
</div>
</div>
</section>
Actor.cs
using System.ComponentModel.DataAnnotations;
namespace MovieProject.Models
{
public class Actor
{
[Key]
public int ActorId { get; set; }
[Display(Name ="Profile Picture")]
public string ProfilePictureUrl { get; set; }
[Display(Name ="Full Name")]
public string FullName { get; set; }
[Display(Name ="Biography")]
public string Bio { get; set; }
}
}
ActorController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MovieProject.Data;
using MovieProject.Data.Services;
using MovieProject.Models;
namespace MovieProject.Controllers
{
public class ActorController : Controller
{
private readonly IActorService _service;
public ActorController(IActorService service)
{
_service = service;
}
[HttpPost]
public IActionResult Create2([Bind("ProfilePictureUrl,FullName,Bio")] Actor actorItem)
{
return View("Create");
}
public IActionResult Create()
{
return View();
}
}
}
The methods are getting hit but the post data is null.
Another question is, instead of using MVC convention, can I use a different method name for get and post that is not the same as the view name? How can I get initially load the page for GET using routing that would work in a different view name?
Thanks
can I use a different method name for get and post that is not the
same as the view name?
Yes, you can.
How can I get initially load the page for GET using routing that would
work in a different view name?
return to this view.
public IActionResult Create()
{
return View("aa");
}
Below is a work demo, you can refer to it.
In controller:
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create2(Actor actorItem)
{
return View();
}
Create view:
#model nnnn.Models.Actor
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Actor</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create2">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="ActorId" class="control-label"></label>
<input asp-for="ActorId" class="form-control" />
<span asp-validation-for="ActorId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ProfilePictureUrl" class="control-label"></label>
<input asp-for="ProfilePictureUrl" class="form-control" />
<span asp-validation-for="ProfilePictureUrl" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FullName" class="control-label"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Bio" class="control-label"></label>
<input asp-for="Bio" class="form-control" />
<span asp-validation-for="Bio" 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");}
}
result:
I have a page containing one main form and multiple smaller duplicate forms. I am trying to post them both using one button with JQuery, and handle them in the order of: main form first then smaller forms second. However, when I attempt to access the smaller forms, I am getting data from only the last one. I was thinking that the best way to do it would be to put the smaller forms into a list, pass that to my handler, and then do a foreach loop through the list. How would I put the form information into a list before my handler uses it?
Here is my model:
public class SubmitModel
{
[BindProperty]
public Timelineinfo Timelineinfo { get; set; } //main form
[BindProperty]
public Media Medias { get; set; }//small form
}
My controller:
[HttpPost]
[Route("/Submit/Submit")]
[ValidateAntiForgeryToken] //Main form handler
public async Task<IActionResult> Submit(SubmitModel model)
{
if (ModelState.IsValid)
{
//Removed for brevity, but
//Fill out some more values in main form then submit main form to Database,
}
return View("Pages/Submit.cshtml", model);
}
[Route("/Submit/MediaAdd")]
[ValidateAntiForgeryToken] //Add media form handler
public async Task<IActionResult> MediaAdd(SubmitModel model)
{
if (ModelState.IsValid)
{
//Removed for brevity, but
//Fill out some more values in small form then submit small form to Database
}
return View("Pages/Submit.cshtml", model);
}
And a truncated version of my small form (main form looks similar but with with Submit instead of MediaAdd:
#using (Html.BeginForm("MediaAdd", "Timeline", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="container">
<div class="form-row">
<label asp-for="Medias.Blurb" class="control-label">Blurb<span class="text-danger ml-1">*</span> <span class="text-muted ml-1">Explain what is in the media</span></label>
<input asp-for="Medias.Blurb" class="form-control" />
<span asp-validation-for="Medias.Blurb" class="text-danger"></span>
</div>
<div class="form-row">
<div class="ml-3 col-4">
<label class="form-check-label">Is there any blood or gore in the video?<span class="text-danger ml-1">*</span></label>
<div class="form-check m-2 d-inline">
<input type="radio" asp-for="Medias.Gore" class="form-check-input" value="0">
<label class="form-check-label">No</label>
</div>
<div class="form-check m-2 d-inline">
<input type="radio" asp-for="Medias.Gore" class="form-check-input" value="1" />
<label class="form-check-label">Yes</label>
<span asp-validation-for="Medias.Gore" class="text-danger"></span>
</div>
</div>
</div>
</div>
}
Finally, how I am currently submitting my forms:
$('#submitButton').click(function () {
$('form').submit();
});
I made an example based on your requirement, you may refer to it:
Model:
public class SubmitModel
{
[BindProperty]
public Timelineinfo Timelineinfo { get; set; }
[BindProperty]
public List<Media> Medias { get; set; }
}
public class Timelineinfo
{
public int TimeId { get; set; }
public string Description { get; set; }
}
public class Media
{
public string Blurb { get; set; }
public string Gore { get; set; }
}
Main form View(Index):
#model SubmitModel
<button id="AddMedia" type="button" class="btn btn-primary">Add Media</button>
#using (Html.BeginForm("MediaAdd", "Timeline", FormMethod.Post))
{
<div class="container">
<div class="form-row">
<label asp-for="Timelineinfo.TimeId" class="control-label">TimeId</label>
<input asp-for="Timelineinfo.TimeId" class="form-control" />
</div>
<div class="form-row">
<label asp-for="Timelineinfo.Description" class="control-label">Description</label>
<input asp-for="Timelineinfo.Description" class="form-control" />
</div>
</div>
<div id="subformsArea">
</div>
<div>
<input type="submit" value="submit" class="btn btn-primary" />
</div>
}
#section scripts{
<script>
var count = 0;
$("#AddMedia").on('click', function () {
$.ajax({
url: '/Timeline/Media',
method: 'get',
data: {data : count},
success: function (result) {
$("#subformsArea").append(result);
count++;
}
})
})
</script>
}
Subform View(Partial View):
#model SubmitModel
#{
int i = ViewBag.Count;
}
<div class="container">
<div class="form-row">
<label asp-for="Medias[i].Blurb" class="control-label">Blurb<span class="text-danger ml-1">*</span> <span class="text-muted ml-1">Explain what is in the media</span></label>
<input asp-for="Medias[i].Blurb" class="form-control" />
<span asp-validation-for="Medias[i].Blurb" class="text-danger"></span>
</div>
<div class="form-row">
<div class="ml-3 col-4">
<label class="form-check-label">Is there any blood or gore in the video?<span class="text-danger ml-1">*</span></label>
<br />
<div class="form-check m-2 d-inline">
<input type="radio" asp-for="Medias[i].Gore" class="form-check-input" value="0">
<label class="form-check-label">No</label>
</div>
<div class="form-check m-2 d-inline">
<input type="radio" asp-for="Medias[i].Gore" class="form-check-input" value="1" />
<label class="form-check-label">Yes</label>
<span asp-validation-for="Medias[i].Gore" class="text-danger"></span>
</div>
</div>
</div>
</div>
Controller:
public class TimelineController : Controller
{
public IActionResult Index()
{
return View();
}
[Route("/Submit/MediaAdd")]
[ValidateAntiForgeryToken] //Add media form handler
public IActionResult MediaAdd(SubmitModel model)
{
if (ModelState.IsValid)
{
//Removed for brevity, but
//Fill out some more values in small form then submit small form to Database
}
return View("Pages/Submit.cshtml", model);
}
public IActionResult Media(int data)
{
ViewBag.Count = data;
return PartialView();
}
}
Result:
This is how I would do it. The simpler the better:
<form action='myAction' method='postOrGet'>
//subform 1
<input name='inputA' subform='s1'.../>
//subform 2
<input name='inputX' subform='s2'.../>
...
<button type='submit'>submit</button>
</form>
Then you can easily separate submitted data based on the "subform" attribute (s1, s2. etc)
I'm setting up a first C# ASP.NET MVC application using Microsofts tutorial. https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-2.2&tabs=visual-studio
In the process of this tutorial, it asks to check if the create movies works, but when I attempt to use it, I get an HTTP error 400 - bad request. I believe the data I am entering is accurate, but I can't seem to get anything but a bad request, does anyone know how to fix this.
Model class:
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace MvcMovie.Models
{
public class Movie
{
public int Id { get; set; }
public string Title { get; set; }
[Display(Name = "Release Date")]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }
}
}
Razor view:
#model MvcMovie.Models.Movie
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Movie</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="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="control-label"></label>
<input asp-for="ReleaseDate" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" 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");}
}
Controller action method:
public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price")] Movie movie)
{
if (ModelState.IsValid)
{
_context.Add(movie);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(movie);
}
The expected output is to add to the database, but but the actual output is bad request.
Do you have httpPost over method of controller and why you not use model?
[HttpPost]
public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price")] ....
I was using google chrome, and firefox. Apparently it won't let me test on anything except edge or IE
The problem is that if I try and use ValidateAntiForgeryToken to my action return status code 400. Why couldn't find my view page?
Controller:
public IActionResult Edit(int id) {
var model = this.categoryService.GetById(id);
return View(model);
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Edit(CategoriesViewModel model) {
if (ModelState.IsValid) {
this.categoryService.Update(model);
return RedirectToAction(nameof(Category));
}
return this.View(model.Id);
}
View:
#using CakeStore.App.Areas.Admin.Models.Categories;
#model CategoriesViewModel
#{
ViewData["Title"] = "Edit";
Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<h1 class="text-center text-header-page">Edit Category</h1>
<hr class="hr-admin-divider" />
<form class="mx-auto w-50 form-horizontal" method="post" action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="#Model.Id" type="hidden" name="id" value="#Model.Id"/>
</div>
<div class="form-group">
<label asp-for="#Model.Name"></label>
<input asp-for="#Model.Name" type="text" value="#Model.Name" class="form-control" id="name" name="name">
<span asp-validation-for="#Model.Name" class="text-danger"></span>
</div>
<div class="button-holder d-flex justify-content-center">
<button type="submit" class="btn button-black-white">Edit</button>
</div>
</form>
Model:
public class CategoriesViewModel {
public int Id { get; set; }
[Required]
[StringLength(22,MinimumLength =3,ErrorMessage =AdminConstants.NameRange)]
public string Name { get; set; }
}
You did not inform the form to contain the token. Try this in your form:
<form asp-antiforgery="true" class="mx-auto w-50 form-horizontal" method="post" action="Edit">
NOTE: remember you must use the #addTagHelper directive in order to use "asp-antiforgery"