As of version 1.3.0.0, MVC.Controls include additional controls other than the jqGrid.

In this tutorial will go over some of the more common ones.

Before using the code in this tutorial, make sure you configured you project properly, and added the required assets.

If you haven’t, please visit setting up a project first.

 

First, before using any of the MVC.Controls controls, we need to add in the head of the view the following using:

<%@ Import Namespace="MVC.Controls" %>
<%@ Import Namespace="MVC.Controls.Tab" %>

 

DatePicker

The MVC.Controls library uses the Extender design pattern which means the library uses existing controls, and adds to them the required behavior.

For instance, assume we have a View with an existing TextBox:

<%=Html.TextBox("txtDate") %>

To force it to behave as a DatePicker, we simple change the above code to:

<%=Html.TextBox("txtDate2").AsDatePicker() %>

And here’s the result:

image

(Note: If you want to attach the DatePicker behavior to a contol manually, you could use the alternative approach:

<input type="text" id="txtDate2" /><%=new DatePicker().Render("txtDate2")%>
)

 

If we want to have better control on the DatePicker behavior, we pass the AsDatePicker method an instance of the DatePicker control.
For example, lets change the date format, and add a js callback for after a date was selected:

  1. <script language="javascript" type="text/javascript">
  2.     function onSelectCallback(selectedDate, datePickerElement) {
  3.         alert(datePickerElement.id + " : " + selectedDate);
  4.         return true;
  5.     }
  6. </script>
  7.  
  8. <%=Html.TextBox("txtDate2").AsDatePicker(new DatePicker(dateFormat:"dd/mm/yy", onSelectCallBack:"onSelectCallback")) %>

the onSelectCallback js method will fire after the user has picked a date, and can allow\prevent it (by returning true\false).

Another thing you can customize, is when the picker panel will show. The default behavior is on the input’s focus event:

<%=Html.TextBox("txtDate2").AsDatePicker(new DatePicker(buttonText:"Choose Date")) %>

This will automagically result in:

image

(You can use an image instead of a button and customize the look n’ feel of the button)

 

AutoComplete Textbox

Before writing the AutoCompleteTextBox, we first need to add a method in our Controller, that the AutoCompleteTextBox will use as its source.
Lets define the following mock action in our Controller:

  1. public ActionResult Search(string userInput, int resultCount)
  2. {
  3.     List<AutoItem> lst = new List<AutoItem>();
  4.  
  5.     for (int i = 0; i < resultCount; i++)
  6.         lst.Add(new AutoItem() { id = i, text = userInput + i.ToString(), value = userInput + i.ToString() });
  7.  
  8.     return Json(lst);
  9. }

The AutoComplete Extender sends 2 arguments to the Controller: the user’s input (userInput), and the max amount of results it is configured to show (resultCount).
The Controller, need to pass back a Json representation of an AutoItem List.

 

Now that we have the Controller configured, lets create the actual AutoComplete TextBox:

<%=Html.TextBox("txtValue").AsAutoComplete(new AutoComplete(valueId:"txtHidden", searchUrl:"Search")) %>

Like the DatePicker, the AutoComplete is an Extender, which means it adds the AutoComplete behavior to an existing input (the txtValue TextBox in this example).
The only required arguments are: how to call the hidden input it will store the value of the selected item (valueId), and what is the Controller’s Action to invoke (searchUrl).

The Result:

image

 

Have a look at the AutoComplete class for additional supported customizations.

Tab Control

The tab control supports 3 types of Tab initializers: Static, Remote & Partial

Static – Static simply means the html of the content of the Tab will be given as a simple string:

  1. .AddTabItem(new TabItem()
  2. .SetContent(MVC.Controls.ContentType.Static, "<b>Tab Content!</b>")
  3. .SetTitle("Static Tab Title"))

Partial – Partial allows you to use the PartialView MVC mechanism, and to specify a view name to be used as the content of the Tab item:

  1. .AddTabItem(new TabItem()
  2. .SetContent(MVC.Controls.ContentType.PartialView, "PersonView",this.Model.Person)
  3. .SetTitle("PartialView Tab"))

(The second parameter – this.Model.Person demonstrates the ability to pass any object the Model for the PartialView)

 

Remote – Remote allows you to set a Controller Action as the source of the Tab item, which will be rendered only when the user open the Tab:

  1. .AddTabItem(new TabItem()
  2. .SetContent(MVC.Controls.ContentType.RemoteAction, "ShowPerson")
  3. .SetTitle("Remote Tab"))

 

If you don’t want the Remote tabs to be re-rendered each time the user opens the tab, you can tell the TabControl to cache the tab’s results using the  “.SetCacheTabs(true)” method.

Here’s a complete example:

  1.  <%= Html.Tab(new TabControl()
  2.         .SetCacheTabs(true)
  3.         
  4.         .AddTabItem(new TabItem()
  5.             .SetContent(MVC.Controls.ContentType.RemoteAction, "Tab1")
  6.             .SetTitle("Remote Tab"))
  7.             
  8.         .AddTabItem(new TabItem()
  9.             .SetContent(MVC.Controls.ContentType.PartialView, "Tab2")
  10.             .SetTitle("PartialView Tab"))
  11.             
  12.         .AddTabItem(new TabItem()
  13.             .SetContent(MVC.Controls.ContentType.Static, "<b>Tab3</b><br /><br />")
  14.             .SetTitle("Static Tab")))
  15. %>

And the result:

image

 

The AccordionControl has the same API as the TabControl so it will not be covered in this tutorial.

Last edited Apr 28, 2011 at 9:55 AM by sternr, version 1

Comments

No comments yet.