MVC Helper TextArea - Placeholder not displaying - c#

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" } )

Related

Adding bootstrap classes with html helper methods not working?

Is there any way to add bootstrap classes like form-control to asp.net mvc html helper methods like #html.Textbox("searchString");?
this is the code I have in the view
#this is the html output for the search bar taking searchstring param from controller in htmlhelper#
#using (Html.BeginForm())
{<div class="jumbotron">
<div class="row">
<div class="col-md-12">
<p>
Search: #Html.TextBox("SearchString")
<input class="btn btn-info" type="submit" value="Search" />
</p>
</div>
</div>
</div>
}
It seems like everything is playing nice with bootstrap except the #Html.Textbox and its messing up my UI.
is there a way to affect the #Html.Textbox with bootstrap form-control class?
ps the "SearchString" variable comes from my controller.
Yes.
You have the possibility to add HtmlAttributes:
#Html.TextBox("SearchString", null, new { #class = "form-control" })
And if you're using a property from your #model:
#Html.TextBoxFor(m => m.Property, new { #class = "form-control" })
#Html.TextBox("SearchString", null, new {#class="form-control"});
One variation of the #Html.TextBox helper takes an anonymous object that you can use to pass in HTML attributes. You would use it like:
#Html.TextBox("SearchString", null, new { #class = "form-control" })

Issue displaying money on view

I have the following
public decimal? Price {get;set;}
When I enter 3000.00 in to the textbox on the view (textbox below)
<div class="form-group">
<label class="col-lg-3 control-label no-padding-right">Price</label>
<div class="col-lg-5">
#Html.ValidationMessageFor(m => m.Price)
<div class="input-group">
<span class="input-group-addon">£</span>
#Html.TextBoxFor(m => m.Price, new { #class = "form-control", type = "text", id = "txtPrice", onkeypress = "return isNumberKey(event)" })
</div>
</div>
<label class="col-lg-4 control-label" style="text-align: left">Decimal format</label>
So it would look like this
It saves in the database as 3000.00 which is expected, but when I return back to the view to edit it the value in the textbox is 3000.0000
I have tried some of the solutions on here
Remove trailing zeros of decimal
I think the issue I have is the field on the view is of type decimal not a string, so I'm uncertain on how to format this decimal to remove the trailing zeros so it looks like picture above
You need to use the oveload of TextBoxFor that accepts a format string
#Html.TextBoxFor(m => m.Price, "{0:0.00}", new { #class = "form-control", type = "text", id = "txtPrice", onkeypress = "return isNumberKey(event)"})
Side notes:
Remove type="text". The html helper already adds this for you (add
is there a reason why you dont just use the default id rendered by
the helper, which would be id="Price"?).
Use Unobtrusive Javascript rather that polluting your markup
with behavior - e.g. $('#txtPrice').keypress(...

MVC .net textbox to texbox area (Razor)

I have a text box that I want to expand and add a few lines to make it a text area instead of a small box.
original code
#Html.EditorFor(x => x.emailBody)
<input type="submit" value="Send Mail" class="btn btn-default" />
I have found this on SOF, but it is not working and the field looks the same
#Html.EditorFor(x => x.emailBody, new { #class = "form-control", #rows = 5 })
<input type="submit" value="Send Mail" class="btn btn-default" />
Can anyone suggest a simple solution
#Html.TextAreaFor(model => model.emailBody, new { #rows = 3 })
you can use textarea for and set rows according to your choice its better way then increasing line of a normal textbox....
Add a DataType.MultilineText attribute to the property and #Html.EditorFor() will render a <textarea> instead of <input type="text" ../>
[DataType(DataType.MultilineText)]
public string emailBody { get; set; }
Note also (assuming your using MVC-5.1+), then to add html attributes, it should be
#Html.EditorFor(x => x.emailBody, new { htmlAttributes = new { #class = "form-control", #rows = 5 } })
If you have only MVC-5, then use #Html.TextAreaFor() or create a custom EditorTemplate and pass the attributes as AdditionalViewData (example here)
Why cant you use something like this
#Html.TextAreaFor(model => model.emailBody, new { #rows = 3 })
instead of EditorFor, you can use TextAreaFor to get multiple lines in a textbox

MVC5 placeholder for input not working

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" })

ASP.NET MVC Client Side Validation Message Error

Can somebody tell me why "This field is required" and "Please insert database name" are being displayed instead of just "Please insert database name"?
This is my model :
public class InstallViewModel
{
[Required(AllowEmptyStrings = false, ErrorMessage = "Please insert database name")]
public string DatabaseName { get; set; }
and this is my view :
<div class="input-group">
<span class="input-group-addon">Database</span>
#Html.TextBoxFor(w => w.DatabaseName, new { #class = "form-control", placeholder = "Database name" })
</div>
#Html.ValidationMessageFor(w=> w.DatabaseName)
Thank you.
EDIT:
Can you see the image attached ? I have some problems uploading images.
The view is a partial view and this is the whole partial view:
#Html.ValidationMessageFor(w => w.DatabaseName)
<div class="input-group">
<span class="input-group-addon">Database</span>
#Html.TextBoxFor(w => w.DatabaseName, new { #class = "form-control", placeholder = "Database name" })
</div>
<br />
#Html.CheckBoxFor(w => w.UseWindowsAuthentication, new { #checked = "checked" }) Use Windows Authentication<br /><br />
<div class="wizard-sqlauth" style="display: none">
<div class="input-group">
<span class="input-group-addon">User name</span>
#Html.TextBoxFor(w => w.UserName, new { #class = "form-control", placeholder = "User name" })
</div>
#Html.ValidationMessageFor(w => w.UserName)<br />
<div class="input-group">
<span class="input-group-addon">Password</span>
#Html.PasswordFor(w => w.Password, new { #class = "form-control" })
</div>
#Html.ValidationMessageFor(w => w.Password)
</div>
DatabaseName is "Required" and your input is empty. (There is only placeholder text)
Are you calling jquery validation "manually" anywhere in javascript, i.e.
$('#myform').valid() ?
That would trigger the default value for the required rule ("This field is required."), and would append it as a label after the input, which is exactly the behavior your are experiencing.
If you really need to use both (MVC's Unobstrusive validation + jQuery validation) you can configure jquery validation to ignore certain fields, for example
$('#myform').validate({
ignore: '#databasefieldId'
});
You have applied the RequiredAttribute attribute to a property to the property DatabaseName which implies that the property must contain a value.
A validation exception is raised if the property is null, an empty string (""), or contains only white-space characters.
You just add #Html.ValidationMessageFor(w=> w.DatabaseName) in the top of div. This will show the summary.

Categories