I have a form with two text boxes. What I would like is when the user clicks in the text boxes the default values disappears. I am using razor so not sure how to add the onfocus event I think I need.
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "newsletterform" }))
{
#Html.TextBoxFor(m => m.Name, new { #Value = "Name"})
#Html.TextBoxFor(m => m.Email, new { #Value = "Email"})
<input type="submit" class="newsletterGo" value="Go" />
}
You can user the placeholder attribute. An example of it is the search box at the top of this page
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "newsletterform" }))
{
#Html.TextBoxFor(m => m.Name, new { placeholder = "Default Name"})
#Html.TextBoxFor(m => m.Email, new { placeholder = "person#example.com"})
<input type="submit" class="newsletterGo" value="Go" />
}
Also, you don't need to specify the #Value attribute. The HTML helpers take care of setting the input values for you.
Related
Hopefully this is an easy one...
I am having an issue with Bootstrap 5 floating labels not working when I create HTML elements using Razor syntax.
If I use plain HTML they work as expected. Using razor the labels are appearing in the state you'd expect if the text box has focus (top left of input)
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
Here is an image of the above on load -
Code output in UI
Has anyone had this issue, know a way to get around it or spot what I am doing wrong? (I need the input tag to be populated from the model as the form can be used to create a new request or update and existing request)
Thanks
Do you want something like below?
<div class="form-floating">
<input asp-for="Recipient" class="form-control" />
<label asp-for="Recipient"></label>
<span asp-validation-for="Recipient" class="text-danger"></span>
</div>
Thanks but I figured out what I was doing wrong. The issue was simple...
ISSUE - There was no placeholder tag which this animation relies on.
RESOLUTION - Add #placeholder = "Recipient Name"
To provide a bit more info the text input looks different when in focus/not focused. This was the issue.
It should have looked like this when not focused - Not Focused
But it was looking like this - Focused
The code that fixed the issue is
<div class="form-floating mb-3">
#Html.EditorFor(model => model.Recipient, new { htmlAttributes = new { #class = "form-control", #onchange = "javascript: Changed( this, 'recipient-name' );", #placeholder = "Recipient Name" } })
#Html.ValidationMessageFor(model => model.Recipient, "", new { #class = "text-danger" })
#Html.LabelFor(model => model.Recipient)
</div>
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email)
#Html.ValidationMessageFor(x => x.Email)
</div>
When using right click -> paste label gets overlapped with the pasted email:
When typing or using Ctrl+v (paste) work well:
I dont know if using a razor oncopy event is the way to fix this:
#Html.TextBoxFor(x => x.Email,
new {
#class = "input_box",
id = "txtDays",
onpaste=""
}
)
Try the placeholder attribute. It will clear the watermark when you paste the text.
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email, new {placeholder="Your Email" })
#Html.ValidationMessageFor(x => x.Email)
</div>
Hi Im new to MVC5 and I just want to ask how can I add the attribute for my Editor so i can add phone mask in it
Heres the code
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
and heres the attribute that i want to add
data-mask="(999) 999-9999"
I tried it in a simple input and it works
<input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="Phone">
Thanks in advance
new { htmlAttributes = new { #class = "form-control", data_mask = "(999) 999-9999" } }
(underscore will be converted to hyphen by razor engine)
great answer by user3559349
I have one text area field called Description in my view. I wish to increase the size of that field.
My code
<div class="col-sm-3">
<div class="form-group">
<span style="color: #f00">*</span>
#Html.LabelFor(model => model.Description, new { #class = "control-label" })
#Html.TextAreaFor(model => model.Description, new { #class = "required", style = " rows=10, columns=40" })
#Html.ValidationMessageFor(model => model.Description)
</div>
</div>
My TextArea
I want to bring as like which is mention in the below image
So i gave Rows and columns in textarea field. It increase the size of the text area. But when i shrink the page to phone size means all fields got shrink . But this textarea field is not shrink up to the page size. This is the issue
I kept validation for my fields. I want to show that validation in Red color. I'm using Model validation.
Try This:
#Html.TextAreaFor(model => model.Description, 10,40, htmlAttributes: new {style="width: 100%; max-width: 100%;" })
While this is already answered, Someone out there might still need this.
#Html.TextAreaFor(model => model.comments,
new { #cols = "100", #rows = "8", #style="width:100%;"})
Rows and Cols does not come under style tag. Its an independent attribute for textarea. You can write it as below.
#Html.TextAreaFor(model => model.Description, new { #class = "required", #cols = 40, #rows = 10})
Remove textArea element from site.css file. In site.css textarea max-width set as 280px;
Do like
input
,select
/*,textarea*/
{
max-width: 280px;
}
#Html.TextAreaFor(m => m.Description, 10, 40, new { #class = "form-control required", style="max-width:75% !important;" })
#Html.TextAreaFor(model => model.Description, new { #class = "form-control", #cols = 10, #rows = 10,#style="resize:both;" })
#Html.TextAreaFor(model => model.Description,10,40, new { #class = "required"})
I'm a little bit confused with Html helpers in MVC3.
I used this syntax when creating my forms before:
#using (Html.BeginForm("action", "controller", FormMethod.Post, new { #class = "auth-form" })) { ... }
this gives me
<form action="/controller/action" class="auth-form" method="post">...</form>
fine, that's what I needed then.
Now I need to pass ReturnUrl parameter to the form, so I can do it like this:
#using (Html.BeginForm("action", "controller", new { ReturnUrl="myurl" } )) { ... }
that would give me
<form action="/controller/action?ReturnUrl=myurl" method="post"></form>
but I still need to pass css class and id to this form and I can't find the way to do it simultaneously passing ReturnUrl parameter.
If I add FormMethod.Post it adds all my parameters as attributes to the form tag, without FormMethod.Post it adds them as query string parameters.
How do I do it?
Thanks.
You can use:
#using (Html.BeginForm("action", "controller", new { ReturnUrl="myurl" }, FormMethod.Post, new { #class = "auth-form" })) { ... }
this will give:
<form action="/controller/action?ReturnUrl=myurl" class="auth-form" method="post">
...
</form>
1-Harder way: define routeValues externally and then use the variable
#{
var routeValues = new RouteValueDictionary();
routeValues.Add("UserId", "5");
// you can read the current QueryString from URL with equest.QueryString["userId"]
}
#using (Html.BeginForm("Login", "Account", routeValues))
{
#Html.TextBox("Name");
#Html.Password("Password");
<input type="submit" value="Sign In">
}
// Produces the following form element
// <form action="/Account/Login?UserId=5" action="post">
2- simpler inline way: Use the Route value internally with Razor
#using (Html.BeginForm("Login", "Account", new { UserId = "5" }, FormMethod.Post, new { Id = "Form1" }))
{
#Html.TextBox("Name");
#Html.Password("Password");
<input type="submit" value="Sign In">
}
// Produces the following form element
// <form Id="Form1" action="/Account/Login?UserId=5" action="post">
Just note that in case you want to add post (FormMethod.Post) or get explicitly it comes after routeValues parameter
official source with good examples