I have following hidden input:
<input type="hidden" class="deleted" name="Deleted" data-id="#Model.Id" value="#Model.Deleted" />
I was wanting to convert this to the MVC helper HiddenFor.
Got this far:
#Html.HiddenFor(x => x.Deleted, new { #class="deleted" })
So that covers the class. I also need the data-id attribute and value.
Tried to add the data-id as:
#Html.HiddenFor(x => x.Deleted, new { #class="deleted", data-id="#Model.Id" })
Well the helper doesn't seem to like the hyphen in the data-id.
So how to get it in there?
Also how to get the value="#Model.Deleted" in there also?
Use _ and MVC will convert that to - when rendering.
Also you do not need the # infront of Model.Id. Remove the double quotes also. The below code should work.
#Html.HiddenFor(x => x.Deleted, new { #class="deleted", data_id=Model.Id })
And Why are you giving a css class to a hidden field ?
try
#Html.HiddenFor(x => x.Deleted, new { #class="deleted", "data-id"="#Model.Id" })
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.
Am new to MVC, am am trying to apply CSS styles to Html.DisplayFor helper inside my template file: Shared>>EditorTemplate>>Contacts.cshtml. Below is my code:
#model People.Contacts
<div>
#Html.DisplayNameFor(m => m.Name) <span class="myclass">#Html.DisplayFor(m => m.FirstName) #Html.DisplayFor(m => m.LastName)</span></div>
and my css class outside this template looks like this:
.myclass{font:italic bold;}
Html.DisplayFor does not support passing HTML attributes, including class/style. At it's most basic it merely renders the value, without any HTML, and with editor/display templates, it just renders whatever's in the template.
First, if you have EditorTemplates\Contacts.cshtml, that will actually never be used by DisplayFor. For DisplayFor you need a separate template in Views\Shared\DisplayTemplates. As its name implies EditorTemplates is used by EditorFor.
Either DisplayFor or EditorFor are basically the same as calling Html.Partial. There's just some additional logic to deal with a specific model property and look by default in DisplayTemplates/EditorTemplates for the view. That said, you can pass additional data to them the same as you would with a partial, via ViewData.
For example, if you were to call #Html.DisplayFor(m => m.FirstName, new { #class = "myclass" }), then nothing would happen by default, but you would have a value of "myclass" in ViewData["class"]. You could then use that to modify a part of your template. For example:
Views\Shared\DisplayTemplates\Contacts.cshtml
<span #(ViewData["class"] != null ? "class='" + ViewData["class"] + "'" : string.Empty)>
#ViewData.TemplateInfo.FormattedModelValue
</span>
That checks to see if ViewData["class"] has a value, and if so, adds a class attribute with that value to the span.
As a different solutions you can use Html.DisplayFor in <Label> tag
<label class="control-label"> #Html.DisplayNameFor(p => p.HeadLine)</label>
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;
Am using MVC 4 and want to maintain some values on postback, so they're going into hidden fields. In essence:
#using (Html.BeginForm())
{
Html.HiddenFor(model => model.EventId);
Html.HiddenFor(model => model.paymentMethodId);
}
But the hidden fields are not appearing in the rendered markup and are therefore - obviously - missing on postback.
You need to add a #, #Html.HiddenFor(). Otherwise you're just executing the helper method, but not actually doing anything with the output.
As dombenoit says, missing the "#" directive, and also need to remove the ";" from the end of each line for some reason, so the corrected code sample looks like:
#using (Html.BeginForm())
{
#Html.HiddenFor(model => model.EventId)
#Html.HiddenFor(model => model.paymentMethodId)
}
Now renders the hidden fields as expected.
Hi I want to make my textbox's width longer.
The view that is generated, uses #Html.EditorFor which I noticed I can't modify nor I can add css style to it.
So I checked, TextAreFor and it works but it creates a scrollbar since it is a textarea
e.g.
#Html.TextAreaFor(model => model.Name, new { cols=50, #rows=1 })
How would I remove the scrollbar? so it looks like it is a textbox? or is there another way to generate a textbox with a custom width?
Thanks,
You can use TextBoxFor HTML Helper method for generating a input element with a custom class like this
#Html.TextBoxFor(m => m.Name, new { #class="yourCustomClass" })
and now you can define your custom styles in this class
.yourCustomClass
{
width:340px;
}
Use a CSS class with the following statement:
overflow:hidden
Maybe
#Html.TextBoxFor(m => m.Name, new { #style="width:150px; height:50px; overflow:hidden;" })