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, Dec 23 '12 at 07:29

CoffeeCode · Accepted Answer · 2012-12-23T15:04:45.310

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 '12 at 15:04

answered Dec 23 '12 at 09:08

CoffeeCode

4,296
9
40
55

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 – Billa Dec 23 '12 at 09:32
check my updated answer. you can get the display text from the ModelMetadata – CoffeeCode Dec 23 '12 at 09:39
1

Can you please update your answer something like public static class HtmlHelperExtensions { public static MvcHtmlString CustomFormFieldFor(this HtmlHelper html, Expression> expression) { //etc} .. so it will be helpful. I am struggling with the syntax you provided – Billa Dec 23 '12 at 09:43
sorry for that, I'm not on my computer... Hope it is more meaningful for you – CoffeeCode Dec 23 '12 at 09:52
Yes got it. I try myself. But your answer is very useful +1 – Billa Dec 23 '12 at 09:59

score 0 · Answer 2 · edited May 23 '17 at 12:27

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 '17 at 12:27

Community

1
1

answered Dec 23 '12 at 09:56

Kundan Singh Chouhan

13,952
4
27
32

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 – Billa Dec 23 '12 at 10:00

ASP.Net MVC 3 Custom HTML Helper

2 Answers2