CODEWITHSUNDEEP
c#htmlasp.net-mvcrazor
user1765862
user1765862

Reputation: 14205

mvc helper for rendering custom textbox

Inside razor view I'm using html helper 

 @Html.TextBoxFor(model => model.YearsInService, new { @class = "col-lg-1" })

which renders following html

<input id="YearsInService" class="col-lg-1" type="text" value="" name="YearsInService" 
       data-val-required="The YearsInService field is required." 
       data-val-number="The field YearsInService must be a number." 
       data-val="true" disabled="disabled">

since I want to implement validation with tooltip messages like this I need solution input element to be rendered like this

<input 
  data-msg-number="The field YearsInService must be a number."       
  data-rule-number="true"    
  data-rule-required="true"   
  id="YearsInService" name="YearsInService" type="text" value="" />

question is: how can build custom mvc helper for rendering second html code in razor view?

Upvotes: 0

Views: 1545

Answers (3)

user3559349
user3559349

Reputation:

You can create a HtmlHelper extension method to output your html.

public static MvcHtmlString ToolTipTextBoxFor<TModel, TValue>(this HtmlHelper<TModel> helper, 
    Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
    IDictionary<string, object> attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    attributes.Add("data-msg-number", "The field YearsInService must be a number.");
    attributes.Add("data-rule-number", true);
    ... other 'fixed' attributes as required
    return InputExtensions.TextBoxFor(helper, expression, attributes);
}

and then in the view

@ToolTipTextBoxFor(m => m.YearsInService, new { @class = "col-lg-1" })

and of course you could create other overloads to match the TextBoxFor() method overloads.

Edit

From your comments, you also want to generate data-rule- attributes based on the properties validation attributes. To do this, you can get the ModelMetatdata

ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);

and then check its properties

for example

if (metaData.IsRequired)
{
    attributes.Add("data-rule-required", true);
}

Upvotes: 1

Dmitri Trofimov
Dmitri Trofimov

Reputation: 763

You can add custom html attributes using one of the TextBoxFor overloads:

@Html.TextBoxFor(x => x.YearsInService, new { data_msg_number = "The field YearsInService must be a number.", data_rule_number="true" })

If you are OK with using EditorFor instead of TextBoxFor then I would suggest creating editor templates. There is nice article describing the basics.

If you would like to create a new Html.MySuperTextBoxFor extension method, then check out this.

Upvotes: 0

user2216
user2216

Reputation: 839

If I correctly understood what you want, I am sure you need Editor Template

Upvotes: 0

Related Questions