validationasp.net-corerazordropdownselectedvalue
In the contact creation I want to assign a customer or supplier from a dropdown
I have two problems.
1. Problem: When I add my selection to the razor page all required fields validation from the model do not work anymore.
Validation from model without selection
No Validation when I add my selection
When dropdown are in the Razor html no validation works and it crashes with NULL Values which I want to prevent. Like it is without select options. Why is that?
2. Problem: When I select a customer from my drop down (CustomerDropDown.CusId) I would like to fill the ID into my ID field of contacts (contacts.CustomerId). How can I reach the selected value from dropdown and post it to my contact contacts.CustomerId?
== c# code ==
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc.Rendering;
using WorkCollaboration.Data;
using WorkCollaboration.Models;
namespace WorkCollaboration.Pages.Contacts
{
public class CreateModel : PageModel
{
private readonly WorkCollaboration.Data.WorkCollaborationContext _context;
public CreateModel(WorkCollaboration.Data.WorkCollaborationContext context)
{
_context = context;
}
public async Task<IActionResult> OnGetAsync()
{
CustomerDropDownDisp = await _context.CustomerDropDown.ToListAsync(); // Added for DropDown
SupplierDropDownDisp = await _context.SupplierDropDown.ToListAsync(); // Added for DropDown
return Page();
}
[BindProperty]
public Contact Contact { get; set; }
public IEnumerable<CustomerDropDown> CustomerDropDownDisp { get; set; }
public IEnumerable<SupplierDropDown> SupplierDropDownDisp { 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.Contact.Add(Contact);
await _context.SaveChangesAsync();
return RedirectToPage("/ContactsOverview/Index");
}
}
}
== Razor Page Code ==
@page
@using WorkCollaboration.Models
@model WorkCollaboration.Pages.Contacts.CreateModel
@{
ViewData["Title"] = "Create";
ViewData["RandomId"] = Guid.NewGuid().GetHashCode();
}
<h1>Create</h1>
<h4>Contact</h4>
<p>
<a asp-page="/ContactsOverview/Index">Back to Index</a>
</p>
<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="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='@ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="@(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="@(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { @class = "form-group" })
<div class="form-group">
@Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a href="/ContactsOverview/Index" class="btn btn-primary">Back to List</a>
</div>
</form>
</div>
</div>
Thank you for your help on how to get selected value (dropdown) to the corresponding contacts Id field.
Solution
Here is a demo:
<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="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='@ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="@(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="@(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { @class = "form-group" })
<div class="form-group">
@Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a href="/ContactsOverview/Index" class="btn btn-primary">Back to List</a>
</div>
</form>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>
$("#CusId").on("change", function () {
$("#Contact_CustomerId").val($("#SupId").val());
});
$("#SupId").on("change", function () {
$("#Contact_SupplierId").val($("#SupId").val());
});
</script>
result:
- How to validate an e-mail address in Swift?
- Email Validation in iOS
- How do I turn off the mysql password validation?
- XML schema includes schema without Namespace compile error in C#
- Regex to match one of two words
- A validation error occurs when using CSS nesting
- How to add a special character to A Password Validation Form
- Angular Template-Driven Form: Validate Password Field Only After User Interaction
- QT - QInputDialog How to Validate?
- Hibernate validation annotation - validate that at least one field is not null
- Prevent change of one field in Rails model
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- ASP.NET Core 8 MVC - view model validations
- Conditional Dropdowns in Google Sheets Based on Multiple Criteria
- How can I validate a date in Python 3.x?
- Python Input Sanitization
- Javafx eclipse Text Input Validate when numeric or Mixed and reject when Non-numeric
- Jquery dd/MM/yyyy date format validation
- How to set up Client side validation for a custom RequiredIf attribute for Asp.NET Core 3.0
- Kafka message validation in ErrorHandlingDeserializer
- In Laravel, how can I get the validation errors
- Detecting WPF Validation Errors
- Validation an object with at least one non-nullable field
- How to validate if a URL is an Okta domain?
- Determine via C# whether a string is a valid file path
- Does zod have something equivalent to yup's oneOf()
- Laravel: validate json object
- Can I use condition's variable in the error_message of a Terraform variable validation?
- Regex for telegram-like username
- Hibernate validator doesn't work