I am currently working on a ASP.NET MVC3 project and i created views to display contents , now i want to put watermark on #html.TextBoxFor() so i tried [Display(Prompt="WaterMarkText")],but its not working in IE8 and working well in Google chrome
Please help me to put watermark ..
here is my code
[Display(Prompt = "Scheme", Name = "Scheme")]
[Required(ErrorMessage = "*")]
public string name { get; set; }
view
<td>
#Html.LabelFor(model => model.scheme.name)
</td>
<td>
#Html.EditorFor(model => model.scheme.name)
</td>
<td>
#Html.ValidationMessageFor(model => model.scheme.name)
</td>
The Prompt parameter in the Display attribute just adds a "placeholder" attribute to the rendered input tag, like this:
<input type="text" placeholder="WaterMarkText" />
IE8 doesn't support the placeholder attribute, so you need to use javascript or CSS to achieve the same. You can do it with jQuery and this: http://www.standardista.com/html5-placeholder-attribute-script/
Related
There's a few questions on similar topics. However, they don't actually address my issue.
DisplayFormat for TextBoxFor in MVC
Display a formatted date in an EditorFor()
ASP.NET MVC EditorFor DateTime
I've been searching and reading up and cannot find an answer to this.
I'm currently using this to format my input box:
#Html.TextBoxFor(modelItem => item.Quantity, new { style = "width: 30px;" })
From my model, I have the brief data annotation:
[Required, Range(1, 100)]
public int Quantity { get; set; }
So I get this:
When I use
#Html.EditorFor(modelItem => item.Quantity, new { style = "width: 30px;" })
I get this:
What I want is the scroll, but to format the width.
I'm wondering, is there a way to format the width of an EditorFor with data annotations? If not, what is the easiest way to make such a format, to avoid repetition.. bootstrap, css? I'm not happy with the inline styling.
From the comments, your using MVC-4. You cannot pass html attributes to the EditorFor() method unless your using MVC-5.1 or higher (refer the release notes - the section on Bootstrap support for editor templates)
One option is to use the TextBoxFor() method and pass type="number" to render the browsers numeric control
#Html.TextBoxFor(m => m.Quantity, new { type = "number ", style = "width: 30px;" })
Another would be to create a custom EditorTemplate (say _NumericControl.cshtml)
#model System.Int32
#Html.TextBoxFor(m => m, new { type = "number ", style = "width: 30px;" })
and call it using #Html.EditorFor(m => m.Quantity, "_NumericControl")
but this would really only be of any real benefit if the template were also to include other html elements, for example #Html.LabelFor(m => m) and #Html.ValidationMessageFor(m => m) and perhaps even the associated button so that the EditorFor() method renders all elements.
I have Kendo MVC Grid with Popup Editor template.
I need to add Checkbox list for a model property. This is what I am doing
I declared a property in my view model like this...
public List<string> Category { get; set; }
This is how I am declaring Checkboxes in view
<ul>
#foreach (var g in (MultiSelectList)ViewData["BondPermitTypes"]) {
<li class="checkbox">
<label>
<input type="checkbox" name="Category" class="checkbox-removekvalid" id="Category_#g.Value" value="#g.Value.ToString()" />#g.Text
</label>
</li>
}
</ul>
This code is working fine when I edit the existing records...
The problem is when I try to create new record and select any checkbox, all of the checkboxes are getting checked
Moreover, even if I hack around using jquery and force it to check only selected checkboxes then when I post back the "Category" property has only one string all the time, which is "true".
I appreciate your help!
Sorry for the late reply...
To make it work, I have added the default value for the Category property in the Kendo Grid. Like this
.Model(model =>
{
model.Id(p => p.PkProperty);
model.Field(p => p.Category).DefaultValue(new List<string>());
})
Hope it helps you! :-)
In my ViewModel there is a property that needs a 2 line label but when I place a <br /> in the DisplayName attribute the HTML code is printed to the page instead of being interpreted as a line break. Is there a way to get a DisplayName to have a line break in it?
View:
<tr>
<td>
#Html.LabelFor(m => m.GrossGallons)
</td>
<td>
</td>
</tr>
ViewModel:
[DisplayName("Gross Gallons <br /> (Max: 6,000)")]
public decimal GrossGallons { get; set; }
Output trying to get:
Gross Gallons
(Max: 6,000)
There is a simple way of doing this - use \n instead of <br />, and use CSS to make it work.
Model:
[DisplayName("Gross Gallons\n(Max: 6,000)")]
public decimal GrossGallons { get; set; }
CSS:
label { white-space: pre-wrap; }
I would recommend making the CSS selector as specific as possible, so as not to catch other labels (in case you're using labels by hand elsewhere, where your source code may contain whitespace). For example, in bootstrap I would've applied this to label.control-label.
You could also attach a more specific style to that label only, and style only that class.
#Html.LabelFor(m => m.GrossGallons, new { #class = "multiline-label" })
I can think of a few options.
1) You could use #Html.Raw(). You can replace the string I have entered with a reference to a string.
#Html.Raw("Gross Gallons <br /> (Max: 6,000)");
1a) If you need to set it in the DisplayName attribute, then you might try using Html.Raw() but accessing the value through reflection. (Note: I haven't tried this, so don't know if it is possible)
2) You could use css styling to force the line to wrap where you want it to.
3) You could create a custom extension method or custom attribute to do this for you.
you can use #Html.Raw(), I think this is the most simple way.
It's not pretty, but you could use EditorTemplates and create a _layout.cshtml that all your Templates use. Then use this to pull/display the DisplayName:
<div class="form-group">
<label for="#ViewData.ModelMetadata.PropertyName">
#Html.Raw(ViewData.ModelMetadata.GetDisplayName())
</label>
#RenderBody()
#Html.ValidationMessageFor(x => x)
</div>
The serious drawback to this is you would have to create EditorTemplates for each of your types like this sample string.cshtml template:
#model string
#{
Layout = "_Layout.cshtml";
}
#Html.TextBoxFor(x => x, new { #class="form-control" })
A little off-topic but going this route allows me to encapsulate wrapping HTML around my form elements, so my forms in the views end up really simple like this:
<fieldset>
#Html.EditorFor(x => x.Email)
#Html.EditorFor(x => x.Address1)
#Html.EditorFor(x => x.Address2)
#Html.EditorFor(x => x.City)
</fieldset>
If use LabelFor(), another "possible" solution is to implement your own using the original source as a guide.
Replace
tag.SetInnerText(resolvedLabelText);
with
tag.InnerHtml = resolvedLabelText;
I am very new on MVC. How can I use a calender? Here is my div
<div class="editor-field">
#Html.EditorFor(model => model.CommunicationTime)
#Html.ValidationMessageFor(model => model.CommunicationTime)
</div>
But it shows only a text box. What should I do?
try to add Data annotations DateType(DateType.Date) within your model
here is a sample :
[Display(Name = "Date of Birthday")]
[DataType(DataType.Date)]
public DateTime DOB { get; set; }
this Should work in Chrome , Firefox , Safari or any browser Supports HTML5
that's because the produced html tags will contain type="Date" in date field
is it possible i fill model's fields by content of table's tds. of course without using javascript .
i wanna pass a model to view and get content of tds .
some thing like text box : #Html.TextBoxFor(m => m.username)
is it possible i have some thing like this for tds? what can i put in place of tds?
<tr class="darckTr">
<td>code :</td>
<td id="tdPobox" colspan="3">12345</td>
<td>Email :</td>
<td id="tdEmail">example#yahoo.com</td>
</tr>
It sounds like what you want is a display template. Create a .cshtml view, for example "ContactDetails.cshtml":
#model ContactDetails
<tr class="darckTr">
<td>code :</td>
<td id="tdPobox" colspan="3">#Model.PoBox</td>
<td>Email :</td>
<td id="tdEmail">#Model.Email</td>
</tr>
If the filename of your partial view matches the type in your model, it will be used automatically. Otherwise, you have a couple of options. Either specify the partial on your model, e.g.:
public class MyWrappingClass
{
[UIHint("_ContactDetails")]
public ContactDetails Details { get; set; }
}
And then do this in your view:
#model MyWrappingClass
#Html.DisplayFor(m => m.Details)
Or, just specify the template directly in your view:
#model MyWrappingClass
#Html.DisplayFor(m => m.Details, "_ContactDetails")
Brad Wilson wrote a good blog post on templates, including how they are resolved, here:
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html
Edit
If you want to persist these values back on POST, you need to have an input element containing the values. In your case, the best way to do this would be to use a hidden field, for example:
#Html.HiddenFor(m => m.Username)