MVC5 placeholder for input not working - c#

My code is like this
#Html.EditorFor(model => model.CreatedUser, new { htmlAttributes = new { #class = "form-control" ,#placeholder = "Your Placeholder Text" }})
I expect the placeholder to come up as I added in the code, but it's not showing. Can anyone point out what I am doing wrong?
Output HTML
<input class="text-box single-line" id="CreatedUser" name="CreatedUser" type="text" value="" autocomplete="off" style="cursor: auto; background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">

That EditorFor overload that accepts the htmlAttributes is MVC 5.1 only.
See HERE
If upgrading is not an option, use TextBoxFor:
#Html.TextBoxFor(model => model.CreatedUser, new { #class = "form-control" ,#placeholder = "Your Placeholder Text" })

Related

Applying bootstrap switch to checkbox

In my asp.net mvc application, in the form there are couple of inputs I have created.
Here I also using theme and I want to change my check box for model.Add_GeneralRequest to switch button.
I found a switch button from the theme I have using, but I got troubling adding that style to this existing code.
This is my html code.
<div class="form-group">
#Html.LabelFor(model => model.Add_GeneralRequest, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Add_GeneralRequest)
#Html.ValidationMessageFor(model => model.Add_GeneralRequest, "", new { #class = "text-danger" })
</div>
</div>
</div>
This is the class that I got from the theme,
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstrap-switch-on bootstrap-switch-focused" style="width: 86px;">
<div class="bootstrap-switch-container" style="width: 126px; margin-left: 0px;">
<span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 42px;">ON</span>
<span class="bootstrap-switch-label" style="width: 42px;">
</span>
<span class="bootstrap-switch-handle-off bootstrap-switch-danger" style="width: 42px;">OFF</span>
<input type="checkbox" name="my-checkbox" checked="" data-bootstrap-switch="" data-off-color="danger" data-on-color="success"></div></div>
I have added all scripts to the view, but It won't works like wise in the theme switch works. Also I want to know how to apply this switch for the required column (model.Add_GeneralRequest this should update true or false from the switch ) .

Adding Html required to TextAreaFor not working c#

I'm trying to add a required to my TextAreaFor, but it won't give the error message when i post it. I'm trying to do it on the followinng line:
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
And this is my full code:
#using (Html.BeginForm("_Create", "Comments", FormMethod.Post))
{
#Html.HiddenFor(m => m.ThreadId)
<div class="form-group">
<div class="col-md-10">
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
#Html.ValidationMessageFor(model => model.Content, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
<div>
<input type="submit" value="Post" class="btn btn-default" />
</div>
</div>
}
If anyone wanst to do it with html attribute,
#Html.TextAreaFor(model => model.Content, new { required = "required", htmlAttributes = new { #class = "form-control"} })
You don't need required as a html attribute. It should be a data annotation on the model.
[Required]
public string Content { get; set; }
#Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { #class = "form-control", required = "" } })
Should be:
#Html.TextAreaFor(model => model.Content, new { #class = "form-control", required = "required" })
Or if you want to explicitly name the parameter your anonymous object is for:
#Html.TextAreaFor(model => model.Content, htmlAttributes: new { #class = "form-control", required = "" } })
But, if you do not use data-annotation, it could be even easier this way:
<textarea id="Content" name="Content" required class="form-control">#Model.Content</textarea>
(id attribute may be optional, depending on your usages.)
Side note: I tend to minimize uses of html helpers methods. For me, MVC is also about letting you control very precisely the browser client code, which is imo better done by writing it yourself. WebForm is, on this subject, about hiding most of browser client code handling.
Using extensively html helpers, built-in validation logic, and so on, may cause you to lose the precise control of how your page should work.

TextBoxFor value not passed to model when disabled

I have a disabled input-field displaying data from a model.
<div class="form-group">
#Html.LabelFor(model => model.first_name, "Förnamn", new
{
#for = "inputFirstname",
#class = "col-lg-3 control-label"
})
<div class="col-lg-9">
#Html.TextBoxFor(model => model.first_name, new
{
#type = "text",
#class = "form-control",
#id = "inputFirstname",
text = Html.DisplayNameFor(model => model.first_name),
disabled="disabled"
})
</div>
</div>
I can submit this data to a controlelr method:
[HttpPost]
public ActionResult Index(RegistrationModel RegistrationModelViewModel)
{}
When i add disabled="disabled" the first_name data is null, if i remove it i get the correct data.
What am i doing wrong?
You may want to use readonly property, if you want to also display the data:
#Html.TextBoxFor(model => model.first_name, new
{
#readonly = "readonly"
})
You need to add an <input type="hidden" name="whateverName" /> on the page which matches the disabled field. By default, it will not be sent to the server.

MVC Helper TextArea - Placeholder not displaying

I have the following code in my .cshtml:
#Html.TextArea("txtComments", new { style = "width: 450px;", placeholder = "Enter Comments here" })
But the placeholder is not displaying at all. Am I missing something?
Source:
<textarea cols="20" id="txtComments" name="txtComments" placeholder="Enter Comments here" rows="2" style="width: 450px;">
</textarea>
Put an # before the style and placerholder, like so, maybe even put htmlAttributes: before it.
#Html.TextArea("txtComments", htmlAttributes: new { #style = "width: 450px;", #placeholder = "Enter Comments here" })
And this is the exact output I get:
<textarea cols="20" id="txtComments" name="txtComments" placeholder="Enter Comments here" rows="2" style="width: 450px;"></textarea>
If this shows a placeholder but it still isn't showing, make sure you're using an up-to-date web browser, you can find a list of the supported browsers here: http://caniuse.com/input-placeholder
< IE10 does not support it.
If you do need support in those browsers, maybe this solution will help you: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
This one is working for me (asp.net v4.6.2 mvc5) :
#Html.TextAreaFor(model => model.MyMessageForm.MessageText, new { placeholder = "Your msg here...", #class = "form-control" } )

How can I change the size of a multi-line editor-field?

I'm working on an MVC project using C#. Right now, I'm trying to customize my views a little, and I'd like to make the text boxes bigger.
I followed the suggestions in this question to move from a single-line to a multi-line text field:
Changing the size of Html.TextBox
Now I'm trying to resize that multi-line field, but I'm not sure where or how to do so.
Here are snippets from my Edit view
<div class="editor-label">
#Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Body)
#Html.ValidationMessageFor(model => model.Body)
</div>
and from my model:
[DataType(DataType.MultilineText)]
[DisplayName("Body:")]
public string Body { get; set; }
I would do this with CSS:
<div class="editor-multiline-field">
#Html.EditorFor(model => model.Body)
#Html.ValidationMessageFor(model => model.Body)
</div>
and then in your CSS file define the width and height to the desired values:
.editor-multiline-field textarea {
width: 300px;
height: 200px;
}
You can also use #Html.TextArea ou TextAreaFor
#Html.TextAreaFor(model => model.Text, new { cols = 25, #rows = 5 })
In MVC 5 you can use
#Html.TextAreaFor(model => model.body, 5, 50, new { #class = "form-control" } )
Works nicely!
If you are using mvc and bootstrap
try this:
#Html.TextAreaFor(model => model.Property, new { #class = "form-control", #rows = 5 })
To adhere to a previously created view style, you can also do this:
<div class="col-md-10 editor-multiline-field">
try
#Html.TextAreaFor(model => model.Descricao, 5, 50, null)
in View Page
I just wanna share in mvc 5
#Html.EditorFor(model => model.Body,
new {htmlAttributes = new {#style="width:yourdesiredwidth;"}
})
or use a custom class

Categories