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
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>
I have a create view that allows users to enter some basic information. I need to be able to let them upload an image. This is the code that is generated when I add the controller to the project for it:
<div class="form-group">
#Html.LabelFor(model => model.Picture, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Picture, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Picture, "", new { #class = "text-danger" })
</div>
</div>
I don't know what code to put in this segment to give me the "choose a file" control. I know there has to be something out there pre-made but for the life of me I can't find it. On a related note: what should I define the type of the image to be in the model I created for it? After looking around, I saw that people were suggesting byte[] but I don't know how to display that in my index view. Any help would be greatly appreciated.
This question already has an answer here:
MVC Datatype Currency trigger numeric keypad
(1 answer)
Closed 6 years ago.
Trying to add a bootstrap class to an input generated by EditorFor but not working...
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
without helper working fine:
<input class ="form-control" name="Name" type="Text" value="#Model.Nome" />
Which version of MVC are you using?
Support for htmlAttributes was added to MVC 5.1. http://www.asp.net/mvc/overview/releases/mvc51-release-notes
You might need to assign the class inside the editor template and in the custom template as shown below:
#Html.EditorFor(x => x.Summary)
<div>
#Html.TextBoxForModel(x => x.Summary, new { #class = "form-control" })
</div>
For more information you might have a look at Html.EditorFor and htmlAttributes. Hope this helps...
I'm working on the simple webpage where user will be able to change some data.
I'm using #Html.EditorFor for changing that data. But I have some problems.
Here You can see my HTML Code:
<div class="form-group">
#Html.LabelFor(model => model.DeviceUser, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DeviceUser, new { #Value = ViewBag.id})
#Html.ValidationMessageFor(model => model.DeviceUser)
</div>
</div>
As You can see I'm trying to replace DeviceUser with new Id which is passed from Controler using ViewBag.
But for unknow reason for me this textbox always holds old value.
Can anyone suggest me how to fix it?
Try changing this
#Html.EditorFor(model => model.DeviceUser, new { #Value = ViewBag.id})
to
#Html.TextBoxFor(model => model.DeviceUser, new { #Value = ViewBag.id})
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.