[ASP.NET] Extend EditorFor control

You may familiar with EditorFor control, but it renders supported types only. What do you do to extend EditorFor to render your own type?

Table of Contents

No doubt the most useful control is Editor Extensions class with EditorFor, EditorForModel methods, which can render all the necessary input for a whole model.

1. The usage EditorFor and EditorForModel

Why I don’t mention the Editor control: Since MVC2, the Editor control shipped with MVC first release can be replaced by EditorFor. The ‘For’ word indicate that this is a strongly typed html helper. You can detect typos when choosing the property from your model

The model (or ViewModel)

To render a form, you need to know what data it take in. And to display these data, you will need a class with Properties

The model

public class Lesson
{
    // ScaffoldColumn mark that EditorFor should render it or not
    [ScaffoldColumn(false)]
    public int Id { get; set; }

    // To display as label
    [Display(Name = "Lesson Name")]
    public string Name { get; set; }

    [Display(Name = "CD Number")]
    public int CDNumber { get; set; }

    [Display(Name = "CD Track")]
    public int CDTrack { get; set; }
}

The ViewModel

public class LessonViewModel
{
    public Lesson LessonItem { get; set; }
}

The View

Your view code will be in the .cshtml file
* EditorFor control must be inside a form tag
* Razor support you render the form tag

@model LessonViewModel

@using(Html.BeginForm("ActionName","ControllerName", FormMethod.Post,new {@class = "myformclass"}))
{
    @Html.EditorFor(x => x.LessonItem)
}

If you don’t have ViewModel, and want to render directly from the Lesson model

@model Lesson

@using(Html.BeginForm("ActionName","ControllerName", FormMethod.Post,new {@class = "myformclass"}))
{
    @Html.EditorForModel()
}

2. Extend the EditorFor

Create a new class to hold the data

public class TextBoxWithCheck
{
    [Display(Name = "Fancy Text")]
    public string MyText { get; set;}

    public bool IsTrue { get; set; }
}

Add this newly created class to Lesson model

public TextBoxWithCheck FancyBox { get; set; }

Now what if you want to render a textbox with checkbox like this

textbox with checkbox

Obviously there is no default control can do this, and EditorFor cannot know what to choose to render the “FancyBox” property of type “TextBoxWithCheck”.

So you will teach it how to do so

2.1 Create EditorTemplates

  • Create new folder “EditorTemplates” inside Views > Shared

folder structure

  • Add new View to that folder, name it “TextBoxWithCheck.cshtml” (it must be the same with the name of you custom class)
@model TextBoxWithCheck

@Html.LabelFor(x => x.MyText)
<div class="input-group">
    @Html.TextAreaFor(x => x.Answer, new {@class="form-control"})
    <span class="input-group-addon">
        @Html.CheckBoxFor(x => x.IsTrue)
    </span>
</div>

That it. Now EditorFor know how to render all the instance of TextBoxWithCheck. Quite simple right?

Advertisements

2 thoughts on “[ASP.NET] Extend EditorFor control

  1. Pingback: [ASPNET] EditorFor with List and add more item to list with AJAX | Tuan Tran Blog in English

  2. Pingback: [ASPNET] Editor for với List và thêm mới item dùng AJAX | Tuan Tran's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s