Link Editor Template to TextBox

Question

i have the following situation.

I am developing a MVC 3 asp.net application. I want to make a searh form with datetime range filter. I wan to use a datepicker so the user can select the date range. I have followed this mvc tutorial

http://www.asp.net/mvc/tutorials/javascript/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4

My problem is that i can not get to link the editor template to a NON MODEL @editotfor or input or @textbox, i`ll put some code so you get my point.

I have the following EditorTemplate in my Shared folder (file Date.cshtml)

@model DateTime Using Date Template @Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()), new { @class = "datefield", type = "date" })

if I use this line in my view everything works

@Html.EditorFor(m => m.fecha_Modificacion,"Date")

But i want to use the datepicker in a NON model value just a simpletextbox textbox I have been trying this :

@Html.TextBox("fechaInicio", "", new { @class = "datefield" })

But not working I´d apreciate any help

UPDATE

I must explain my problem in more detail I have a

class Foo{

   private stirng name;
   private DateTime dateOfBirthday;
}

In the Foo view i am editing the list.cshtml so i can searh by dateOfBirthday by from to. So i want to make two textBoxes so the user can select with a date time picker the from anf to date range. I´d like to use a template so i can re-use it. But the list.cshtml view is already typed to @Model Foo but the two textboxes are not model fields

The EditTemplate i have made work perfectly on model typed @EditorFor filds so i am trying to use on my from to date range textboxes

For what i have read i can create a EditorTemplate but that does not mean that i use everywhere i can use just where i want

Thank you very much

Answer 1

De solution proposed by rcdmk did the work. I think that polutae a class for search porposes is the right way to do it. I think that working with ASP.net MVC we must use string typed views as Display Name pointed. Thank you for your help.

Answer 2

You can use a ViewModel to help you

Sometimes they can save your day and its considered a best practice to use them when you are using models from EF (Entity Framework) or other persistance aware classes that have important properties that can't be changed by the user on post for example.

Something like this may help you:

public class FooSearchViewModel
{
    public Foo Foo { get; set; }
    public DateTime From { get; set; }
    public DateTime To { get; set }
}

Then, you have to bind the view to this ViewModel instead of the model and use it like:

Name: @Model.Foo.name
From: @Html.EditorFor(model => model.From, "DateWithCalendar")
To: @Html.EditorFor(model => model.To, "DateWithCalendar")

The template can be archieved with a EditorTemplate, like the one @Display Name explained in his answer:

/Views/Shared/EditorTemplates/DateWithCalendar.cshtml

@model System.DateTime
@Html.TextBoxFor(model => model.Date, new { class = "date datepicker" })

Then you can use CSS to customize the input and apply the jQuery UI datepicker to it or wethever you like.

You can also define the template to use with DataAnnotations attributes in the ViewModel:

[UIHint("DateWithCalendar")]
public DateTime From { get; set; }

References:

http://blogs.msdn.com/b/simonince/archive/2010/01/26/view-models-in-asp-net-mvc.aspx
http://kazimanzurrashid.com/posts/asp-dot-net-mvc-viewmodel-usage-and-pick-your-best-pattern
ViewModel Best Practices

Answer 3

Try using partial views:

@* Views\Shared\_HandlingMyString.cshtml *@
@model string
This is my partial view to handle the string: '@Model'

Than you will call it this way from your main view (and I think this is the link you're looking for):

@model MyType // that has public string MyProperty that holds your date (start and end)
@Html.Partial("_HandlingMyString", Model.MyProperty)

Something along these lines. You might need to do some twicking, I didn't compile this code, but its is what you seems needing.

Please let me know if this helps.

Answer 4

From design perspective don't do non model things. Create view model that will contain everything the view needs to display and post back to controller, so you have everything you need in one class. This way strongly typed class is so much easier to work with.

With regards to your concrete question, in order for you to use Editor Template, all you need to do is to create folder EditorTemplates in the following hierarchy: Views/<ControllerName>/EditorTemplates and put the <TypeYouWantToUseThisEditorTemplate>.cshtml inside editor templates folder and have @model <<TypeYouWantToUseThisEditorTemplate> as one of the first lines in that editor template.

The link to editor template is the type of the property. For example if in the model you have property of type MyType, editor template needs to be called MyType.cshtml. That is all you have to do.

This will also work with primitive types, so if you create file string.cshtml under editor templates folder any string that your view isusing will go to that editor template.

Note that if your editor template will be used across multiple views and controllers, you can create your editor templates under /Views/Shared/EditorTemplates so its shared across application.

More about editor templates here: ASP.NET MVC 3 – How to use EditorTemplates

Hope this helps.

UPDATE

following your request, here's simple example of editor template used with view model (give you the idea how the whole construction works)

View Model:

public class Book
{
  public int BookId { get; set; }
  public string BookName { get; set; }
  public string Description { get; set; }
}

EditorTemplate called Book.cshtml and located under /Views/<ControllerName or Shared/EditorTemplates:

@model <MyAppName>.Models.Book

@Html.DisplayFor(p => p.BookId)
@Html.EditorFor(p => p.BookId)

@Html.DisplayFor(p => p.BookName)
@Html.EditorFor(p => p.BookName)

@Html.DisplayFor(p => p.Description)
@Html.EditorFor(p => p.Description)

No error handling, no validation, no nothing is done inside this editor template for sake of brevity.

View page that is using editor templates with type Book will have to do no work at all (all the work will be done by editor template):

@Html.EditorFor(model => model.Book)