I was trying to implement a 'CheckboxListFor' method but am having some issues with formating in which the text for the checkbox does not align on the side of the checkbox but instead is below the checkbox.
Code in View:
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.table, 4, null,
TextLayout.Default, TemplateIsUsed.No);
}
#Html.CheckBoxListFor(model => model.KeywordIDs,
model => model.Keywords,
model => model.KeywordId,
model => model.Name,
model => model.SelectedKeywords,
htmlListInfo
);
Any insight would be greatly appreciated.
Ok gr8.. Minor change.
Try this code.
have to apply css to fix it.
<style type="text/css">
label
{
display: inline-block !important;
padding: 5px !important;
}
</style>
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.table, 4, null, TextLayout.Default, TemplateIsUsed.No);
#Html.CheckBoxListFor(model => model.PostedCities.CityIDs,
model => model.AvailableCities,
city => city.Id,
city => city.Name,
model => model.SelectedCities,
htmlListInfo)
}
let me know your comments.
Related
I am wondering if there is anything built in to MVC (I am using 4 at the moment) that would allow me to change the display from a text field name to an image.
From model:
[Display(Name = "Red")]
public virtual int? RedManaCost { get; set; }
From view:
<div class="editor-label">
#Html.LabelFor(model => model.Cards.RedManaCost)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Cards.RedManaCost, new {style = "width:50px"})
#Html.ValidationMessageFor(model => model.Cards.RedManaCost)
</div>
This renders the word Red over my textbox. What I would like is an image of the red symbol instead. I know I can hardcode this into my views... I was hoping for a more efficient method. Thanks!
You could create a helper, that you pass the DiplayNameFor ("Red", "Blue", etc) and inside the helper you do a Switch putting the color instead of the label. In my example I'm using a colored DIV instead of an image... but you can change that DIV with a IMG using your icons.
Something like:
#helper CardColor(string myColor){
switch(myColor.ToUpper()){
case "RED":
<div style="background-color: #FF0000; width: 20px; height:20px;"></div>
break;
case "BLUE":
<div style="background-color: #0000FF; width: 20px; height:20px;"></div>
break;
}
And you use it like this:
#CardColor(Html.DisplayNameFor(model => model.Cards.RedManaCost).ToHtmlString())
Note: I'm not sure if DisplayNameFor was already present in MVC4 but if not... you could create an extension.
How can I enforce Form to validate a hidden field in a MVC page?
it is my View:
#Html.HiddenFor(model => model.t)
#Html.ValidationMessageFor(model => model.t)
Hidden fields are excluded from validation. On the other hand you could use a normal field that you would simply visually hide in your CSS:
#Html.TextBoxFor(model => model.t, new { #class = "hidden" })
#Html.ValidationMessageFor(model => model.t)
and in your CSS:
.hidden {
display: none;
}
I have a kendo grid in mvc with column property .Encoded(false)
In the controller I replaced Environment.NewLine with
<br>
But in the view there is a text instead of real new line. I tried both:
<br> or <br/>
It is not working either. What am I doing wrong?
Finally I solved it myself.
in the Grid:
columns.Bound(m => m.Address).Width(150).Encoded(false).ClientTemplate("#= getHtmlNewLinesString(Address) #");
and in the js:
function getHtmlNewLinesString(text) {
var regexp = new RegExp('\n', 'g');
return text.replace(regexp, '<br>');
}
You can also use css to solve this.
in html file:
col.Bound(c => c.Text)
//.Encoded(false)
.Title("text")
.HtmlAttributes(new { Class = "keepLineBreak" });
in css file:
.keepLineBreak {
white-space: pre-wrap;
}
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
The filter is not working in this case because the cell includes <br>.
Here is my code:
<%= Html.TextArea("txtMyTextArea", new { #style = "width: 100%; height:100%", #resize="horizontal" })%>
and it's not working. Why?
This can be accomplished more easily using the max-height attribute and setting it equal to the height. See this jsFiddle example.
You can also set a horizontal-constraint, by adding a max-width attribute. See this jsFiddle example.
I believe in your code this would 'translate' as:
<%= Html.TextArea("txtMyTextArea", new { #style = "width: 200px; height: 200px; max-height: 200px;"})%>
I just started using MVC3. I am using fields like this:
<div class="editor-field">
#Html.TextBoxFor(model => model.Status.RowKey, new { disabled = "disabled", #readonly = "readonly" })
</div>
Which creates this HTML
<div class="editor-field">
<input disabled="disabled" id="Status_RowKey" name="Status.RowKey" readonly="readonly" type="text" value="0001" />
</div>
But I notice all the input fields have the same width which is about 160px. Is there a way I can make them wider and why do they default to this. In my editor-field class I
You could set the size property:
#Html.TextBoxFor(model => model.Status.RowKey, new { size = 200, disabled = "disabled", #readonly = "readonly" })
Probably more appropriate would be set the input width in css and give the textbox a class, like:
#Html.TextBoxFor(model => model.Status.RowKey, new { #class = "myClass", disabled = "disabled", #readonly = "readonly" })
<style>
input.myClass { width = 200px; }
</style>
If your fields do not have any styling your browser will apply it's own default width to them. You need to add a style to them
By adding an external CSS file containing
div.editor-field input { width: 300px; }
Or by inline (not recomended)
#Html.TextBoxFor(model => model.Status.RowKey, new { disabled = "disabled", #readonly = "readonly", style="width:300px" })
You can use CSS for that.
For example:
input#StatusRowKey /* matches only the textfield with id StatusRowKey */
{
width: 250px;
}
input /* matches all input types */
{
width: 200px;
}
input.Normal /* matches all input fields with class="Normal" */
{
width: 100px;
}