HTML and CSS Reference
In-Depth Information
value = viewData.TemplateInfo.FormattedModelValue.ToString();
if (string.IsNullOrWhiteSpace(value))
valueAttribute = string.Empty;
else
valueAttribute = "value=\"" + value + "\"";
// Determine the css class
string css = "range";
ModelState state;
if (viewData.ModelState.TryGetValue(name, out state)
&& (state.Errors.Count > 0))
css += " " + HtmlHelper.ValidationInputCssClassName;
// Format the final HTML
string markup = string.Format(Culture,
"<input type=\"range\" id=\"{0}\" name=\"{1}\" " +
"min=\"{2}\" max=\"{3}\" step=\"{4}\" {5} class=\"{6}\"/>",
id, name, min.ToString(), max.ToString(), step.ToString(),
valueAttribute, css);
return MvcHtmlString.Create(markup);
}
Adding the Range Template
Now you'll need to create an editor template for the
range
control that will use this new custom method.
eXerCISe 3-6. aDDING a raNGe teMpLate
1.
Right-click the Views\shared\EditorTemplates folder and select the Add ➤ View links.
2.
in the Add View dialog box, enter the name
Range
and unselect all of the text boxes.
3.
Replace the default implementation with the following:
@Html.Html5().RangeControl(0, 200, 20)
4.
open the
FeedbackModel.cs
file and add the
UIHint
attribute to the
Satisfaction
property like this:
[Display(Name = "Overall Satisfaction"),
UIHint("Range")
]
public string Satisfaction { get; set; }
5.
While you have the
FeedbackModel.cs
file open, add a
UIHint
attribute for the
Score
property as follows:
[Display(Name = "Average Score", Prompt = "Your average score"),
Range(1.0, 100.0),
UIHint("Number"),
Required]
public decimal Score { get; set; }
