0

i was reading a post on EditorTemplates

from this url http://stackoverflow.com/questions/4872192/checkboxlist-in-mvc3-0

after seeing their code i just do not understand area like how it would work

view model:

public class MyViewModel
{
    public int Id { get; set; }
    public bool IsChecked { get; set; }
}

A controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new[] 
        {
            new MyViewModel { Id = 1, IsChecked = false },
            new MyViewModel { Id = 2, IsChecked = true },
            new MyViewModel { Id = 3, IsChecked = false },
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<MyViewModel> model)
    {
        // TODO: Handle the user selection here
        ...
    }
}

A View

(

~/Views/Home/Index.cshtml

):

@model IEnumerable<AppName.Models.MyViewModel>
@{
    ViewBag.Title = "Home Page";
}
@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <input type="submit" value="OK" />
}

and the corresponding Editor template

(

~/Views/Home/EditorTemplates/MyViewModel.cshtml

):

@model AppName.Models.MyViewModel
@Html.HiddenFor(x => x.Id)           
@Html.CheckBoxFor(x => x.IsChecked)

see this code

@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <input type="submit" value="OK" />
}

1) what this line will do

@Html.EditorForModel() ?

2) if this line would load a view called

MyViewModel from this location

/Views/Home/EditorTemplates/MyViewModel.cshtml

3) then how mvc engine would understand that it has to load view called

MyViewModel from this location /Views/Home/EditorTemplates/

4) i saw people always create

EditorTemplates

folder in shared view but in this case it is created in home folder.....why ?

5) if there are so many other view in this location then how this line

@Html.EditorForModel()

would load this specific view

MyViewModel.cshtml

from this location

/Views/Home/EditorTemplates.

i am new in mvc and learning. so please help me to understand how the above code will work?

also please answer my 5 questions. thanks

Mou
  • 15,673
  • 43
  • 156
  • 275

1 Answers1

1

Before answer to your specific question, you have to know that asp .net mvc relay heavily on Convention over Configuration.

1) what this line will do

@Html.EditorForModel() ?

It just tell the view to render the model pass in as a whole thing to the EditorFor.

2) if this line would load a view called

MyViewModel from this location

/Views/Home/EditorTemplates/MyViewModel.cshtml 3) then how mvc engine would understand that it has to load view called

MyViewModel from this location /Views/Home/EditorTemplates/

Mvc knows it by convention. It will look into Views for a template same name to the viewModel type(in this case MyViewModel )

the pattern mvc look at is:

Views{Controller}\EditorTemplates\MyViewModel.cshtml Views\Shared\EditorTemplates\MyViewModel.cshtml

And if it find it, it will stop looking. Hence the view in Controller will be used even if there is one in the shared.

4) i saw people always create

EditorTemplates folder in shared view but in this case it is created in home folder.....why ?

If it is in Shared, that means any other controller with same ViweModel type name MyViewModel can use that same view. If it is in home, that means it is only available to "Home" controller specific.

5) if there are so many other view in this location then how this line

@Html.EditorForModel() would load this specific view

MyViewModel.cshtml from this location

/Views/Home/EditorTemplates. i am new in mvc and learning. so please help me to understand how the above code will work?

That is the convention, as I answered above, there is certain pattern which mvc looks view in, the first match get applied.

Edit

Thank Stephen Muecke for pointing out, I was typing too fast. The search Pattern for view is:

Views{Controller}\EditorTemplates\MyViewModel.cshtml Views\Shared\EditorTemplates\MyViewModel.cshtml

So if it find it, it will stop looking. This means if it found in the current controller (in your example is Home), then it stop looking. It only continue to look when it can not find it in the controller specific folder.

Edit 2 - include some reason to use Editor template

the reason for writting editor/display template is for code reuse.

Consider using jquery datepicker on a datetime property.

If you don't use Editor template, then you are going to duplicate code in the view to use jquery datepicker.

If you use editor template, then if some day you want to change jquery datepicker to some other plugin, you only change in the editor template, and no where else. Hence Don't Repate Yourself (DRY) principal. This also keep same consistency of ui across multiple page when showing same type of input.

The example I gave above is on one property, but if a template is for whole model, that is where EditorForModel comes in, but same idea.

Consider this article on some usage of template

https://www.simple-talk.com/dotnet/asp.net/extending-editor-templates-for-asp.net-mvc/

And below is a more depth detail on template written for asp .net mvc 2. But same thing apply to mvc 4 and 5

http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html

Alan Tsai
  • 2,465
  • 1
  • 13
  • 16
  • That should be `Views\{Controller}\EditorTemplates\MyViewModel.cshtml` (and best to mention that by convention the `EditorTemplates` forlder in the controller folder is searched first, then (if it does not find one) the Shared folder –  Sep 02 '15 at 11:08
  • @StephenMuecke thank you very much for pointing it out. I have modified my answer. – Alan Tsai Sep 02 '15 at 11:17
  • why some one create view in editor template rather we can write the whole html in main view instead of storing in another view and saved in editortemplate? please guide me to know the reason why some one create view in editor template. – Mou Sep 02 '15 at 17:06
  • anyone can redirect me to few good article to understand how to work with EditorTemplates's view. – Mou Sep 02 '15 at 17:07
  • @Mou I have added more info on Edit 2, see if it helps. – Alan Tsai Sep 03 '15 at 01:11
  • thanks...would u please redirect me to any code for jquery datepicker on a datetime property with EditorTemplates code. so i could understand how it is used. thanks – Mou Sep 03 '15 at 18:18
  • @Mou the first link I post in edit 2 https://www.simple-talk.com/dotnet/asp.net/extending-editor-templates-for-asp.net-mvc/ does shows a example of jquery datepicker. In his example, he assign a class to all the datetime input, which in his layout template use jquery datepicker to turn those input into datepicker. Imagine if you have another picker say from bootstrap ui or something, then you could create a editor template which set different class to those input and init the bootstrap datepicker. hope above description helps. – Alan Tsai Sep 03 '15 at 21:03