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" })
Related
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);
}
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" })
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" }
I want to make an editing function where you can add metafields (= specific fields for a category) to a category.
What I want to do in the view is
foreach (App.Models.Metafield field in Model.Category.Metafields)
{
<div class="field">
#Html.TextBoxFor(model => field.Name, new { #class = "form-control title" })
#Html.DropDownListFor(model => field.Type, Model.MetaTypes, new { #class = "form-control type" })
</div>
}
The problem is that the Metafields are not added to the viewModel when I hit the save button. So I guess the field.Name and field.Type should be replaced by something else..
This can't work this way because the sent form can't contain these dynamically generated fields with the same name.
However, you can collect the data from these dynamic fields using js and serialize it into a hidden field just before submitting the form, then you can parse it in your server side.
Here is an example with jquery:
$('#save-btn').click(function(e) {
$hidden = $("#hidden");
$hidden.val(getDynamicData());
});
function getDyanmicData() {
var data;
$fields = $(".field");
// get children and calculate data
return data;
}
This may be a bit too 'manual work', but I find it useful to know what's happening. For other solutions you can search form dynamic forms in ASP.NET MVC.
Please try this code
#for(int i=0;i<=Model.Category.Metafields.count();i++)
{
<div class="field">
#Html.TextBoxFor(m=> m[i].Name, new { #class = "form-control title" })
#Html.DropDownListFor(m=> m[i].Type, Model.MetaTypes, new { #class = "form-control type" })
</div>
}
I want to display error messages dynamically i.e, when the cursor moves out of the field but not when the form is submitted.
My requirement is like this:-
I have to design a registration form with some fields like name,address,phone number,email,password etc.
i designed it & saved the data successfully in DB but what i exactly required in the sense i have to display error messages dynamically without using "ajax" as i have already stated ...
My code is like this:-
View:-
<div class="venfor_line5" popText><label>#Resources.Resources.VendorReg_phoneNumber<img src="~/images/star.png" /> </label>
#Html.TextBoxFor(model => Model.MobileNumber, new { #class = "input" })
#Html.ValidationMessageFor(model => model.MobileNumber)</div>
<div class="venfor_line1" popText = #Resources.Resources.VendorReg_emailHintStr>
<label>#Resources.Resources.VendorReg_email<img src="~/images/star.png" /> </label>
#Html.TextBoxFor(model => Model.Email, new { #class = "input" })
#Html.ValidationMessageFor(model => model.Email)</div>
I have gone through many references but not found exactly what i am looking for.Any help would be greatly appreciated. can anyone guide me in resolving this issue.
You could use jQuery's focusOut() method to perform validation. Something like:
$('#elementId').focusOut(function(){
//do validation here
});
If you are using unobtrusive jQuery validation you could eagerly enable it so that it is automatically triggered onblur without requiring the user to submit the form:
$(document).ready(function () {
var settngs = $.data($('form')[0], 'validator').settings;
settngs.onfocusout = function (element) { $(element).valid(); };
});