Why is the input-validation-error class being added to my input when it shouldn't?
Validation is working fine for other pages that actually use it. I've tried making the property nullable and using the ValidateNever attribute but both are ignored.
View Model
public class EntityTableViewModel
{
[ValidateNever]
public string? SearchTerm { get; set; }
}
HTML
<form method="get">
<div class="input-group">
<input asp-for="SearchTerm" type="search" class="form-control rounded" placeholder="Search" />
<button type="submit" class="btn btn-primary" asp-action="Index"><i class="bi bi-search"></i></button>
</div>
</form>
Rendered HTML
<input type="search" class="form-control rounded input-validation-error" placeholder="Search" id="SearchTerm" name="SearchTerm" value="">
Related
I'm making a POST request through an MVC controller using ASP.NET MVC and while unit testing I'm getting 'Object reference not set to an instance of an Object' from an IHtmlFormElement's GetSubmission() method. The test finds the button and the button itself is not null, but when the test calls the GetSubmission() with the submit button as a parameter it returns null.
Everything works fine from browser.
This is my Add.cshtml file content:
#model MVCPhones.Data.Phone
<form method="post" asp-action="Add">
<div class="form-group">
<label asp-for="Make" class="control-label">Make</label>
<input asp-for="Make" type="text" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Model" class="control-label">Model</label>
<input asp-for="Model" type="text" class="form-control" />
</div>
<div class="form-group">
<label asp-for="RAM" class="control-label">RAM</label>
<input asp-for="RAM" type="number" class="form-control" />
</div>
<div class="form-group">
<label asp-for="PublishDate" class="control-label">PublishDate</label>
<input asp-for="PublishDate" type="date" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Here is my PhonesController post method:
public async Task<IActionResult> Add(Phone phone)
{
try
{
phone.Created = DateTime.Now;
phone.Modified = DateTime.Now;
await _context.Phones.AddAsync(phone);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
catch
{
return View();
}
}
Here is the section that gives the error:
Error
I have this control that is hidden and the user need to check the input control for it to be show. I am getting the model fill with data and I wanted to see how I can only get data in the controller if it is selected ?
View
<input type="checkbox" value="91" name="chkProduct">
<label>Other</label>
<input type="hidden">
<input type="hidden" asp-for="Other">
<div id="sourceSection_91" style="">
<div class="row" id="ddRow_6" data-source="sourceSection_91">
<div class="col-md-11 !important">
<div class="form-group">
<label class="control-label source-label">Other</label>
<input class="form-control" id="enteredOtherSource" name="enteredOtherSource[0].Other" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="enteredOtherSource[0].Other" data-valmsg-replace="true"></span>
<input value="91" data-val="true" data-val-number="The field SourceId must be a number." data-val-required="The SourceId field is required." id="SourceId" name="enteredOtherSource[0].SourceId" type="hidden">
</div>
</div>
<div class="col-md-1 deleteBtn">
</div>
</div>
Model
public class OtherSourceModel
{
public int SourceId { get; set; }
public string Other { get; set; }
}
Controller
foreach (var ordermaterial in model.enteredOtherSource)
{
ProjectMaterialUse _SelectedOtherProjectMaterial = new ProjectMaterialUse();
_SelectedOtherProjectMaterial.Source = new Values();
_SelectedOtherProjectMaterial.Source.Value = ordermaterial.SourceId;
_SelectedOtherProjectMaterial.Other = ordermaterial.Other;
_SelectedOtherProjectMaterial.IntendedUse = new Values();
_SelectedOtherProjectMaterial.IntendedUse = model.selectedIntendedUseId;
_permissionrequestWeb.SelectedProjectMaterial.Add(_SelectedOtherProjectMaterial);
}
I have a Likert Survey generator where a dynamic number of questions can be entered - then a user goes through and answers each question with 4 radio buttons (Strongly Disagree, Disagree, Agree, Strongly Agree).
I can output them easily enough - but can they be model bound on the post back or do I have to traverse the posted form elements (ie not use model binding)?
I've Googled a lot and can find no solution - is it posible?
Thanks.
If you want to bind a list in view,here is a demo about binding a list with input names:
Model:
public class Qusetion
{
public string Content { get; set; }
public string Answer { get; set; }
}
View:
<form method="post">
<div>
<label>question1</label>
<input name="list[0].Content" value="question1" hidden/>
<div>
<input type="radio" name="list[0].Answer" value="Strongly Disagree" />Strongly Disagree
<input type="radio" name="list[0].Answer" value="Disagree" />Disagree
<input type="radio" name="list[0].Answer" value="Agree" />Agree
<input type="radio" name="list[0].Answer" value="Strongly Agree" />Strongly Agree
</div>
</div>
<div>
<label>question2</label>
<input name="list[1].Content" value="question2" hidden/>
<div>
<input type="radio" name="list[1].Answer" value="Strongly Disagree" />Strongly Disagree
<input type="radio" name="list[1].Answer" value="Disagree" />Disagree
<input type="radio" name="list[1].Answer" value="Agree" />Agree
<input type="radio" name="list[1].Answer" value="Strongly Agree" />Strongly Agree
</div>
</div>
<div>
<label>question3</label>
<input name="list[2].Content" value="question3" hidden/>
<div>
<input type="radio" name="list[2].Answer" value="Strongly Disagree" />Strongly Disagree
<input type="radio" name="list[2].Answer" value="Disagree" />Disagree
<input type="radio" name="list[2].Answer" value="Agree" />Agree
<input type="radio" name="list[2].Answer" value="Strongly Agree" />Strongly Agree
</div>
</div>
<input type="submit" value="submit" />
</form>
Controller:
public IActionResult BindList(List<Qusetion> list)
{
return View();
}
result:
Update:
If you want to bind with loop.you can pass list to view.And the code will work is because .net core bind model with name attribute.And because you want to bind list,so the name will be like list[index].xxx.
Here is a demo with loop:
View:
#model IEnumerable<Qusetion>
<form method="post">
#{ var i = 0;}
#foreach (var question in Model)
{
<div>
<label>#question.Content</label>
<input name="list[#i].Content" value="#question.Content" hidden />
<div>
<input type="radio" name="list[#i].Answer" value="Strongly Disagree" />Strongly Disagree
<input type="radio" name="list[#i].Answer" value="Disagree" />Disagree
<input type="radio" name="list[#i].Answer" value="Agree" />Agree
<input type="radio" name="list[#i].Answer" value="Strongly Agree" />Strongly Agree
</div>
</div>
i++;
}
<input type="submit" value="submit" />
</form>
Controller:
public IActionResult BindList(List<Qusetion> list)
{
List<Qusetion> list1 = new List<Qusetion> { new Qusetion { Content = "question1" }, new Qusetion { Content = "question2" }, new Qusetion { Content = "question3" } };
return View(list1);
}
result:
I've created a sample ASP.NET MVC Core 1.1 web app created using VS2015-Update3. It generates input tags with data -* attributes only on a model property that is a Primary Key, and on a property that is of type bool. For instance, in the following example the generated html (shown below) is showing the data-attributes only on the input tag generated for properties MyEntityId and Prop2 of the model. NOTE: I'm using the default ASP.NET Core Web Application template that automatically installs Jquery, Bootstrap, etc.
Model:
public class MyEntity
{
public int MyEntityId { get; set; }
public string Prop1 { get; set; }
[Column(TypeName = "char(2)")]
[RegularExpression(#"^[0-9]{2,2}$", ErrorMessage = "Must enter two digit numbers"), StringLength(2)]
public string TestCode { get; set; }
public DateTime? StartDate { get; set; }
public bool Prop2 { get; set; }
}
View
<form asp-controller="TestController" asp-action="TestAction" method="post" class="form-horizontal">
<div asp-validation-summary="All" class="text-danger"></div>
<div><input type="hidden" asp-for="MyEntityId" /></div>
<div class="form-group">
<label asp-for="Prop1" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Prop1" class="form-control" style="margin-top:15px;" />
<span asp-validation-for="Prop1" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="TestCode" class="col-md-2 control-label"></label>
<div class="col-md-2">
<input asp-for="TestCode" class="form-control" />
<span asp-validation-for="TestCode" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="StartDate" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="StartDate" type="date" class="form-control" />
<span asp-validation-for="StartDate" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="Prop2" class="col-md-2 control-label"></label>
<div class="col-md-1">
<input asp-for="Prop2" class="form-control" style="zoom:0.5;margin-top:25px;" />
<span asp-validation-for="Prop2" class="text-danger"></span>
</div>
</div>
<button type="submit" name="submit" value="testVal">Save</button>
</form>
Generated Html:
<div><input type="hidden" data-val="true" data-val-required="The MyEntityId field is required." id="MyEntityId" name="MyEntityId" value="54321"></div>
<div class="form-group">
<label class="col-md-2 control-label" for="StateName">Prop1</label>
<div class="col-md-2">
<input class="form-control" readonly="" type="text" id="Prop1" name="Prop1" value="TestVal">
<span class="text-danger field-validation-valid" data-valmsg-for="Prop1" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="TestCode">TestCode</label>
<div class="col-md-2">
<input class="form-control" type="text" id="TestCode" name="TestCode" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="TestCode" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="StartDate">Start Date</label>
<div class="col-md-10">
<input type="date" class="form-control" id="StartDate" name="StartDate" value="2015-10-01">
<span class="text-danger field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Prop2">Test Prop2</label>
<div class="col-md-1">
<input class="form-control" data-val="true" data-val-required="Test Prop2 is required." id="Prop2" name="Prop2" style="zoom:0.5;margin-top:25px;" type="checkbox" value="true">
<span class="text-danger field-validation-valid" data-valmsg-for="Prop2" data-valmsg-replace="true"></span>
</div>
</div>
I'm assuming your issue is that TestCode does not have validation on it, despite having both RegularExpression and StringLength attributes applied. MyEntityId and Prop2 are non-nullable, so there's an implicit required validation for those, while Prop1 and StartDate are nullable and do not have any explicit validation applied. As a result, those are rightly not validated.
TestCode is weird, though. I'm not sure you'd actually get data-* attributes, as both the regular expression and string length can be satisfied using the HTML attributes pattern and maxlength, respectively. But, you should then have pattern and maxlength applied to the input for TestCode which is not the case.
According to the docs, the code you have should work, and at the least, it seems that StringLength is applied via data-val-maxlength rather than (or perhaps in addition to) using the maxlength attribute. There's either some bug at play, or there's something else in your codebase that is preventing the correct behavior from occurring. However, without more code, it's impossible to say.
I have following code on my view.
This HTML code is used for search in website.
This view is not strongly typed view, so I can apply use DataAnnotation through model.
What is best view to validate that, this textbox should accept only alpha numeric characters?
HTML
<form action="Search" method="post" >
<div class="col-md-8">
<input type="text" name="name" placeholder="search" class="fullwidth" onkeypress="return BlockingHtml(this,event);" />
</div>
<div class="col-md-4">
<input type="submit" title="Search" value="Search" />
</div>
</form>
Javascript
function BlockingHtml(txt) {
txt.value = txt.value.replace(/[^a-zA-Z 0-9\n\r.]+/g, '');
}
Model:-
[StringLength(100)]
[Display(Description = "Name")]
[RegularExpression("(/[^a-zA-Z 0-9\n\r.]+/g", ErrorMessage = "Enter only alphabets and numbers of Name")]
public string Name{ get; set; }
Updated:-
View:-
<form action="Search" method="post" >
<div class="col-md-8">
<input type="text" name="name" id="txt" placeholder="search" class="fullwidth" onkeypress="BlockingHtml(this);" />
</div>
<div class="col-md-4">
<input type="submit" title="Search" value="Search" />
</div>
</form>
function BlockingHtml(txt) {
txt.value = txt.value.replace(/[^a-zA-Z 0-9\n\r.]+/g, '');
}
<form action="Search" method="post" >
<div class="col-md-8">
<input type="text" name="name" placeholder="search" class="fullwidth" onblur="return BlockingHtml(this,event);" />
</div>
<div class="col-md-4">
<input type="submit" title="Search" value="Search" />
</div>
</form>
Changed event onkeypress to onblur.