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