How to perform validation on server side, if I am not creating strongly typed views. Just plain views with
<input id="in1" name="in1" value="" />
<input id="in2" name="in2" value="" />
<input id="in3" name="in3" value="" />
This will depend on what framework you are using for validation on your server side. Data Annotations work by decorating your view model classes with validation attributes. If you don't use view models (which would be very bad design) you could always perform the validation manually (which would be very bad design):
// NEVER WRITE CODE LIKE THIS! USE VIEW MODELS
[HttpPost]
public ActionResult Index(string int1, string int2, string int3)
{
if (string.IsNullOrEmpty(int1))
{
ModelState.AddModelError("int1", "int1 is required");
}
....
}
Related
I created a edit view for a EF Model and have a problem with the datepicker.
Whenever i try to edit a `dataset, the edit view don't show me the old date values.
This is my Edit.cshtml Code:
<div class="form-group">
<label asp-for="BestellungsDatum" class="control-label"></label>
<input asp-for="BestellungsDatum" type="date" class="form- control" value="#Model.BestellungsDatum" />
<span asp-validation-for="BestellungsDatum" class="text-danger"></span>
</div>
This is what it looks like, but there have to be the old value at this position:
When i change the input to type="text", the value is shown but there is no datepicker.. Any solutions on this?
type="date" generates the browsers HTML-5 datepicker if supported. The specifications require that the value be formatted in ISO format (yyyy-MM-dd) which is then displayed in accordance with the browsers culture.
Add the asp-format to format the value, and remove the value attribute (Tag Helpers correctly generate the value attribute for correct 2-way model binding and you should never attempt to add it yourself)
<input asp-for="BestellungsDatum" type="date" asp-format="{0:yyyy-MM-dd}" class="form-control" />
Note the HTML-5 datepicker is not supported in IE, and only in recent versions of FireFox. If you want a consistent UI, then consider using a jQuery datepicker instead.
Just like to add an addition to the accepted answer:
<input asp-for="BestellungsDatum" type="date" class="form-control" />
Rather than adding asp-format to the view, add DataFormatString to the data Model or ViewModel, so you don't have to add it to every view that uses it:
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime BestellungsDatum { get; set; }
I am new to Angular2/Typescript, since I come from the Java world, I decided to learn Typescript and Angular2 directly.
I want to leave most of the logic on the server, thus I don't need complex validation management on the client. So all I want is the user to fill out forms, and post/put all the fields to the REST Service.The goal is to leave the client side as light as possible.
I have a form:
<form role="form" (ngSubmit)="onSubmit()" #ArbeitstagForm="ngForm">
and a field in it, some datepickers too: similar like this:
<input type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
When I submit the form, I call this function:
model = new Arbeitstag();
onSubmit(form:any) {
alert(JSON.stringify(this.model));return false;
}
So that alerts me the the entered data as JSON, which I will after send to a REST Service. It works actually great, BUT only when I actually type something into the field, when I have a default value, or I set the field with a datepicker, the model object values will remain empty.
I've found out about the dirty setting of the fields, which are false by default and are getting true when I type something in and that's also what I see when I check firebug, but that's definitely not what I want to achieve.
Is there a way to set all the fields dirty in a form in Angular2? I've found many examples for Angular.js 1, but not for Angular2/Typescript.
Control has a markAsDirty() (and markAsTouched()) method
<input #datePicker="ngForm" type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
<button (click)="datePicker.control.markAsDirty()">update dirty status</button>
Plunker example
What I usually do is get a reference to the form in my component, using ViewChild. With that reference I can mark to form dirty or touched when I need to. Like so:
export class MyComponent implements OnInit, OnDestroy {
#ViewChild('form') form: NgForm;
...
public methodWithFormChange(): void {
this.form.control.markAsDirty();
}
}
;-)
I'm using the Play Framework. I want to use the HTML5 input type 'search'. So, I want to output:
<input type="search" />
I've tried:
#inputText(field = myForm("myField"), 'type -> "search")
but it still kept the type="input"
the method inputText represents an HTML input text (see the source code here).
You have to define your own template to define the input of type search. Take a look at the Play documentation.
#helper.input(myForm("myField")) { (id, name, value, args) =>
<input type="search" name="#name" id="#id" #toHtmlArgs(args)>
}
Most probably your search field will not use many typical things from common form element (like constraints or error messages) so you can just use plain HTML to insert it, and add field's value in the proper attribute (if required at all):
<input type="search" name="myField" value="#myForm("myField").value" />
If it's just a search form (with this only field) you even don't need to wrap it with the Form class
(of course Nico's suggest is advisable in more sophisticated scenarios)
Some helpers you're looking for are avalaible in a play 2 module. The html5 input helpers are not in the core part of the framework because play authors want to keep it light.
Here is the module page on github : https://github.com/loicdescotte/Play2-HTML5Tags
Posted this to Play user group; I account for the sole view, so hoping to get a view, or perhaps even an answer ;-)
Nested forms are great, but there's one glitch that adds boilerplate to either javascript or scala templates.
For example, given:
#inputText(field = _form("user.email"),
'_label-> "Email Address*",
'class-> "required email",
'placeholder-> "jdoe#gmail.com"
)
the generated input field is something like:
<input id="user_email" name="user.email" ...>
Now, when you want to validate the email address client-side you then have to reference DOM id: $('#user_email')
Where $('#email') would be more natural.
I know I can set the id attrib manually in the template but would prefer to, by default, have the nested name (user in this case) stripped out from the id attrib.
Looking in github views helper directory, I am not finding where I can get access to the generated id (i.e. which file I need to overload and how).
Anyone know how to pull this off and/or have a better approach?
Here is where the field's ID is auto-generated:
https://github.com/playframework/Play20/blob/master/framework/src/play/src/main/scala/play/api/data/Form.scala#L274
There's not really any way you can override that behaviour, but you could write your own #inputText helper that strips the "user_" part from the ID when generating the HTML.
Basically copy-paste the default helper and replace
<input type="text" id="#id" ...
with your own code, e.g.
<input type="text" id="#processFieldId(id)" ...
or (untested!):
<input type="text" id="#(id.split('_').last)" ...
Then just import your custom helper in your template, and use it just like you would use #inputText.
Using the Model Binders in ASP.NET MVC 2.0, you can do something like this...
[DisplayName("User Name")]
public string Name
{
get;
set;
}
<%: Html.TextBoxFor( m => m.Name ) :%>
and then in your HTML, you get a result like this..
<label for="UserName">User Name</label>
<input type="text" id="UserName" name="UserName" />
That works fine, but I want to have better control over the HTML ID. Is there any way to do this through the model binding method?
You need to override the editor template for a string to control how the editor for a string is rendered. This basically involves creating a String.ascx partial view. You can find more detailed information in the "Overriding Templates" section of this blog post.