ASP.Net MVC 3 Custom HTML Helper

Question

I am using ASP.Net MVC 3 and Razor

How do i create a custom HTML helper for the below strucure. This should be bound to model property also i should pass parameteres to label, span, input.

Any code sample for this below mark up?

    <label class="field">
       <span class="td">User Name</span>
       <input type="text" name="UserName" class="highlight">
    </label>

Update:

I tried below but display text for not showing the text i used in model

   <label for="login_field">
      <span class="td"> @Html.DisplayTextFor(m=>m.UserName)</span>
        @Html.TextBoxFor(model => model.UserName, 
           new { style = "width:21em", @class = "text" })

   </label>

My View Model is below and use Resource file to fetch text

 using System;
using System.Collections.Generic;
using System.Linq;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Web.Mvc;
using System.Web;

namespace MVC.ViewModel
{
    public class LoginViewModel
    { 
        [Required]
        [Display(Name = "UserName", ResourceType = typeof(Resources.Global))]
        public string UserName { get; set; }

    }
}

Sounds like you should use either a PartialView or an EditorTemplate. I don't see a reason to extend HtmlHelper. — Erik Philips
– Erik Philips, Commented Dec 23, 2012 at 7:29

CoffeeCode · Accepted Answer · 2012-12-23 15:04:45Z

1

it is better to create a function that calls a helper. this should give you a hint how to implement yours

@functions
{
public HelperResult CustomFormTextboxFor<TModel,TProperty>(HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression)
{
    var textBox= html.TextBoxFor(expression, new {@class = "highlight"});
    var modelsMetaDatas = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
    string displayValue = modelsMetaDatas.DisplayName ?? (metaData.PropertyName ??   ExpressionHelper.GetExpressionText(expression));
    return RenderCustomControl(textBox, displayValue);
}
}

@helper RenderCustomFormTextbox(MvcHtmlString input, string labeltext)
{
   <label class="field">
       <span class="td">@labeltext</span>
       @input
    </label> 
}

The call of the function in you view will look something like this.

@CustomFormTextboxFor(Html, model => model.FirstName)

Hope this helps

edited Dec 23, 2012 at 15:04

answered Dec 23, 2012 at 9:08

CoffeeCode

4,3149 gold badges43 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Billa Over a year ago

I Updated my question. It shows more clarity. All i need is some html string place holder that renders the string configured in model using Data Annotation. Please help. Your answer looks great for re using HTML structure

CoffeeCode Over a year ago

check my updated answer. you can get the display text from the ModelMetadata

Billa Over a year ago

Can you please update your answer something like public static class HtmlHelperExtensions { public static MvcHtmlString CustomFormFieldFor<TModel, TProperty>(this HtmlHelper html, Expression<Func<TModel, TProperty>> expression) { //etc} .. so it will be helpful. I am struggling with the syntax you provided

CoffeeCode Over a year ago

sorry for that, I'm not on my computer... Hope it is more meaningful for you

Billa Over a year ago

Yes got it. I try myself. But your answer is very useful +1

Community · Accepted Answer · 2017-05-23 12:27:40Z

0

Replace this

@Html.DisplayTextFor(m=>m.UserName)

With

@Html.LabelFor(m=>m.UserName)

For more detail about the DisplayTextFor follow the below link

What's the point of Html.DisplayTextFor()?

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Dec 23, 2012 at 9:56

Kundan Singh Chouhan

14.4k4 gold badges30 silver badges33 bronze badges

1 Comment

Billa Over a year ago

If i use LabelFor it is not rendering as i expected. I want a label that wraps SPAN and input tags inside. Please see my HTML required in question

Collectives™ on Stack Overflow

ASP.Net MVC 3 Custom HTML Helper

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related