<input type="text" name="search" id="search" style="border-style:ridge;" />
Thats the line of Html I'd like to have it as a html helper. I tried:
#Html.TextBox(" ", "",new { id="search", name="search", style="border-style:ridge;"})
but it won't post back for that text box when i press enter. It works fine for the input tag.
That would just be a regular box:
#Html.TextBox("search", null, new { style = "border-style: ridge;" })
Or assuming your model has a search property, it would be:
#Html.TextBoxFor(x => x.search, new { style = "border-style: ridge;" })
Both of these produce the same HTML. Unless there's any funny stuff going on, both the id and name of the textbox will be search.
Related
I have a search component that includes searching by name and by tags for now. I've decided to use a form to validate and create a Search object with the form's value.
The problem is that I have to add a tag to a list each time the user press enter in the tag input but how can I do that in a form way?
<form [formGroup]="searchForm" (ngSubmit)="onSearch()">
<input ... formControlName="name"...>
<input ... placeholder="Enter a tag">
<ul class="tags">
<li *ngFor"...">
</ul>
</form>
EDIT
I am using the form value like this:
this.searchEvent.emit(<Search>this.searchForm.value);
As you can see, only the tag input is attached to the form but not the list
export interface Search {
name?: string
tags: string[]
}
as i see , you want to add the new added tag to the list when you tap enter.
i advice you first to add a button click to add the tag to support tablet and mobile phones.
so , to have the list of the added tags, you need to use nested formGroup , in the nested formGroup you can add a formArray that containg the tag formGroup or formControl.
then every time you click to the add button , we add the new tag value into the tag formArray.
let's make the update of your code :
1- update the formGroup and add the formArray
this.searchForm = new FormGroup({
'name': new FormControl(),
'tag': new FormControl(),
'tags': new FormArray([])
})
2- add two method that allows us to add and get the list of tags
getTags() {
return this.searchForm.get("tags").value;
}
addTag(tagValue: string): void {
const tagControl = new FormControl(tagValue)
this.searchForm.get('tags').push(tagControl);
}
3- finally we update the html code to get the list of tags and add the addTag action
<form [formGroup]="searchForm">
Name : <input formControlName="name">
Tag : <input #tag formControlName="tag" placeholder="Enter a tag">
<input type="button" value="add tag" (click)="addTag(tag.value)">
<ul class="tags">
<li *ngFor="let tag of getTags()">
{{ tag }}
</li>
</ul>
</form>
<input type="button" (click)="onSearch()" value="search">
4- you will have something like this as a result
Catch keyboard events on the tag input (specifically key up), and if it's ENTER, add the tag to the list.
Two things to note:
You need a button for adding tags as well, tablet and mobile users don't always have ENTER keys.
If you have a button with type submit, it will also catch the ENTER key and try to submit the form.
I am using asp.net core razor engine. I am trying to set text inside of my text area. I looked on stack and followed previous answers, but nothing seems to be working.
Here is my code
<h1>#TempData["quote"]</h1>// this prints out the correct value
#model login.Models.Quotes
<h1>Edit Your Quote</h1>
#using(Html.BeginForm("EditQuote","Home"))
{
<p>
<label>Your Quote</label>
#Html.TextAreaFor(d=>d.quotes, new { #Value = #TempData["quote"]})
#Html.ValidationMessageFor(d => d.quotes)
</p>
<input type="submit" name="submit" value="Edit my quote!"/>
}
You don't use attributes to set the value in the view - you set the value in the controller through the model property and bind that property to the text box.
In your controller:
model.quotes = TempData["quote"];
In your view:
#Html.TextAreaFor(model=>model.quotes)
Seems like maybe your lamda expression is not being evaluated properly.
Try:
#Html.TextAreaFor(d => d.quotes, new { #Value = #TempData["quote"]})
I've created a form using html validations with Angular 2.
I want to to check the sate of the inputs (no empty, correct format, etc) when the user click to a certain button. At the moment I'm doing it as following:
<form id="memberForm" #memberForm="ngForm" >
<input
type="text"
id="MemberName"
required
name="MemberName"
[(ngModel)]="newMember.name">
</form>
<div
[ngClass]="{'button_disabledButton' : !memberForm?.valid}"
(click)="onSubmit(memberForm?.valid, memberForm);">
<span>Next</span>
</div>
With this, I'm only evaluating the input once clicked and focus out. How can I make it hapens when the user click in the "Next" element?
You should make getter/setter solution for your ngModel input.
In the .ts file in the appropriate class put this:
savedVar:string = '';
get variable(): string {
return this.savedVar;
}
set variable(str: string) {
this.savedVar = str;
// do your validation
}
In template use ngModel=variable like this:
<input [(ngModel)]="variable">
I am searching for the same answer that was given here:
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
But I want to do this in MVC4.
I got the following view:
#using (Html.BeginForm("Kompetens", "KumaAdmin"))
{
<div class="three columns" style="margin-right: 627px;">
<h6>Kompetens</h6>
<div style="width:456px;"> #Html.ListBox("kompetensId", (SelectList)ViewBag.KomId)</div><br/>
<h6>Lägg till kompetens</h6>
<div class="focus">
#Html.EditorFor(mm => mm.KompetensTest)
</div>
<input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
</div>
}
Since this is my textbox:
#Html.EditorFor(mm => mm.KompetensTest)
I don't know how to apply the "onfocus" & onblur attributes on it like in the link above.
You need to create an Editor Template. Because the Html.EditorFor does not have the "object htmlattributes" parameter to do "new { onfocus = "js here" }".
Over the Views>Shared,
Create a folder called EditorTemplates
Then, you create a view using #model string/whathever this object is. Name the file as you want.
When you put the #model on a view you are specifying that it only accepts this type mas a model.
Inside this view, you create a Html.TextBox (not TextBoxFor) and voila.
On the Html.EditorFor method there is also a way to set which editor template you want to use. Choose the one you created by typing its name like this:
#Html.EditorFor(mm => mm.KompetensTest, "GreyedTemplate")
Code for the View I named as: GreyedTemplate.cshtml
#model string
#Html.TextBox("", Model, new { onfocus = "", onclick="" })
Note that the first parameter is empty. This was done on purpose, because when you use EditorFor(mm => mm.KompetensTest,"GreyedTemplate") it uses KompetensTest as the name of the field automatically.
You want to use the placeholder html attribute (http://www.w3schools.com/tags/att_input_placeholder.asp)
Something like #Html.EditorFor(mm => mm.KompetensTest, new { placeholder = "Text" })
#Gmoliv It worked finaly! I googeld arround and found that the "Editfor" does not have access to html attributes. Although I found "TextBoxFor" which has access to them, so the soloution is:
#Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })
#Pedro I really tried hard to make it work but the problem was that i could not get the value to be set so it was alwasy empty, i treid setting it in the view and in the templateView and it simply did not take. If you could i would appreciate a full code sample
Thanks alot!
How can i get the input field below to be rendered as follows
<input name= "NIALL" type="text" />
using the knockout model and html below. NOTE that I want to create the name of the element based on the knockout model. Heres what ive tried but it dosent work.
HTML
<input type="text" data-bind="value: stringValue,attr: { 'name': ElementName}" />
//Knockout model
function MyViewModel() {
var self = this;
self.stringValue = "sss";
self.ElementName = "NIALL";
}
The code is fine, it will work in IE's developer tools if you hit Refresh on the dev tools toolbar. Or look at it with firebuglite's bookmarklet from inside IE.