ASP.Net MVC TextAreaFor unable to change width - c#

I am working with ASP.Net MVC for the first time and I am trying to set the width of a textarea.
This should (and most probably is) really simple, however the width of the area is not changing regardless of what I try.
So far I have tried the following:
#Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {#class = "form-control", })
#Html.EditorFor(m => m.RequestDetails, new { htmlAttributes = new { #class = "form-control" } })
#Html.TextAreaFor(m => m.RequestDetails , new { #class = "form-control", #cols = 80, #rows = 10 })
I am able to change the number of rows no problem.
Initially I thought that this was down to bootstrap and the grid system so I took it out of the gird, and started again with all the above and got the same problem.
I have looked here:
asp.net-mvc How to change width Html.TextBox
TextAreaFor Cannot Set Width
asp.net-mvc How to change width Html.TextBox
along with a few other Stack questions and everything that I would have thought would work hasn't.
The ViewModel of this particular property is
[Display(Name = "What is required")]
[DataType(DataType.MultilineText)]
[StringLength(4000, MinimumLength=50, ErrorMessage="Please provide more information about your requirements")]
public string RequestDetails { get; set; }
I am looking to have this span the width of the div that it will be going in so would be very grateful for some help.
The last resort on this for me will be to use a HTML control rather than Razor and get the data in and out this way, but I do believe this should be easily possible with what I want. Its just me doing it wrong.
Thanks
Simon

The problem here is dealing with max-width.
This is the correct implementation:
#Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {#class = "form-control", })
All you have to do is give that text-area another class name and then in your CSS set a max-width of that class, like so:
Razor/HTML
#Html.TextAreaFor(m => m.RequestDetails, 10, 10, htmlAttributes: new {#class = "form-control width-textarea", })
CSS
.width-textarea{
max-width: /* whatever you please */ !important
}
Let me know if this helps!

<style>
.areaWidth
{
width: 100px;
}
</style>
#Html.TextAreaFor(m => m.RequestDetails, new { #class = "form-control areaWidth" })

Related

asp.net mvc set textbox value from value in url without jquery or javascript

I have a textbox inside a form tag like this:
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", #type = "email", #aria_describedby = "emailHelp", #text=Request.QueryString["Email"], #value=Request.QueryString["Email"] })
<label>Email</label>
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger", #style = "float:right;" })
Now here is the trick... I have an url that goes like this:
example.com/Registration?Email=someemail#example.com
Now I'm trying to set the value of my textbox automatically by setting the value like this:
#text=Request.QueryString["Email"], #value=Request.QueryString["Email"]
But this doesn't works... The textbox is still empty after the page is loaded...
And I have looked into the html for example and I can see for example text attribute of my input text tag being set to someemail#example.com
What am I doing wrong here?
Okay I found a way to do it. Turns out this is the valid way to do it:
public ActionResult Registration()
{
var regViewModel = new UserRegistrationViewModel { Email = Request.QueryString["Email"] };
return View(regViewModel);
}

Added placeholder text to input element in CSHTML

I'm currently writing an ASP.Net MVC application
I've successfully made an input box in CSHTML.
#Html.EditorFor(model => model.Test, new { htmlAttributes = new { #class = "form-control"} })
I now want to take the content of a string from the controller and add is as placeholder text. I've tried the following
#Html.EditorFor(model => model.Test, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayFor(model => model.Test) } })
But that set the placeholder like so: placeholder=""
If I instead use #Html.DisplayNameFor it sets the placeholder to the variable's name Test, but I want the actual string content. I'm aware that one can use the Viewbag to pass text to the view, but there must be a way of doing it this way.
Any help is greatly appreciated.
You can't use #Html.DisplayFor() as a placeholder but you can use Html.DisplayNameFor().
Example:
#Html.EditorFor(model => model.Test, new { htmlAttributes = new { #class = "form-control", #placeholder = "Your Place Holder" } })
OR
#Html.EditorFor(model => model.Test, new { htmlAttributes = new { #class = "form-control", placeholder = #Html.DisplayNameFor(model => model.Test) } })
I think you need to add the [Display (name="Your Text")] attribute in the propriety of the model like this:
[Display (Name="Name Of Client:")]
Public string Name {get; set;}
Make a Property in your Model which you are passing to view.
Assign the string into that property.
Model.SomeName= YourVariableName;
Then Try Like This :-
#Html.EditorFor(model => model.Test, new { htmlAttributes = new { #class = "form-control", placeholder = #Model.SomeName }

How to give javascript unique ID in htmleditfor method in .net MVC?

I want to give a unique id to htmleditfor method. I want to add Jquery datepicker in it. Please guide...
#Html.EditorFor(model => model.AdExpiryDate, new { htmlAttributes = new { #class = "form-control", placeholder = "MM/DD/YYYY" } })
Your generated html will look like this
<input type="text" id="AdExpiryDate" value="AdExpiryDate" />
You just need to add following javascript code at bottom of your view
<script>
$('#AdExpiryDate').datepicker();
</script>
As others have said, MVC will automatically add the property name from your model to the id and name attributes on the HTML element. However if you want to specify your own id for the element, just update your htmlAttributes:
#Html.EditorFor(model => model.AdExpiryDate, new { htmlAttributes = new { #class = "form-control", placeholder = "MM/DD/YYYY", id = "ad-expiry-date" } })
Then just update your javascript to target the new id that you added:
<script>
var expireDate = $('#ad-expiry-date').val();
alert(expireDate);
</script>

Placeholder in #Html.EditorFor(model => model.Name) in MVC 5

I used [prompt("name")] in Controller and
#Html.EditorFor(model => model.Email,
new {placeholder=ViewData.ModelMetadata.Watermark})`
in view but nothing showed
I also used help of Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?
but nothing happened
I need Placeholder for #EditorFor not for Textbox
Any Help Appreciated
You can write HTML attributes into Html.EditorFor using the following syntax. Make sure you use # before class and placeholder so that the renderer knows this is HTML markup.
#Html.EditorFor(model => model.Email, new {
htmlAttributes = new {
#class = "form-control",
#placeholder = "Email Address"
}
})
EditorFor doesn't accept HtmlAttribut argument you have to use TextBoxFor instead of it ;)
try this:
#Html.TextBoxFor(model => model.Email, new {placeholder=ViewData.ModelMetadata.Watermark})`
Work for me just with TextBoxFor.
#Html.TextBoxFor(model => model.emailContact, new {#placeholder = "Your Placeholder Text" }

Html.ValidationMessageFor Text Color

Probably a simple question, but i cant seem to find the answer.
using MVC 2 i have a series of Html.ValidationFor controls. I want to assign a CSS class to the text and cant seem to do it.
<%= Html.TextBoxFor(Model => Model.Chest, new { #class = "textBoxMeasure" })%>
<%= Html.ValidationMessageFor(Model => Model.Chest) %>
if i try the same method as textboxfor i get errors because it requires a string, when i put a string in it still wont work!
thanks
I added a comment to the accepted answer, but I cannot to format it for better view. So, here is my already formatted comment from the accepted response.
I had similar case and I used solution from accepted answer. But I desired to use message from model annotation. I tried this:
#Html.ValidationMessageFor(Model => Model.Chest, null, new { #class = "text-danger" });
and it correctly worked for me. I used MVC4 with bootstrap.
There's a variant that takes htmlAttributes as the third argument (the second is the message that should be displayed, or you can use null for the default validation message)
Html.ValidationMessageFor(
Model => Model.Chest,
"Please enter a value",
new { #class = "redText" })
For more info see http://msdn.microsoft.com/en-us/library/ee721293%28v=vs.98%29.aspx
Use the classes assigned to the span tag holding the message. If the field is valid the class is field-validation-valid. If there is an error its field-validation-error.
I use
.field-validation-error {
color:Red;
}
simplest way to do this to put #Html.ValidationMessageFor in div tag and apply css to div tag
<div style="font-size:15px !important;">
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
This way the color range will be wider.
#Html.ValidationMessageFor(x => x.WriterName, "", new { #style = "color:red" })

Categories