What does DJME do?
In Mvc when we want to use jQuery we maybe write the code like this:
If we must write such code like this we actually could not release the power of the jQuery! Because we must write more and more, and the code could not be reuse!
How about write the code like this in DotNetAge?
DJME encapsulated all jQuery ui plugins, jQuery methods, and DJP. DJME allows developers using jQuery in Mvc server syntax.
For another example :
That is what the DJME bring us! The jQuery plugin options are strongly type in DJME that we are not needs to remember the jQuery options again. This is call”Write less and do more in Mvc”
The core concept of DJME
All Mvc extensions in DJME are base on lightweight UI framework. Let’s learn more about this framework and then you can write your jQuery Mvc extensions in a simple way.
At the beginning let’s take a look of jQuery first, almost all jQuery plugin may has “options” parameter:
Javascript:
DJME has a low level jQuery extension helper method to generate the script block and scripts in jQuery syntax: C#:
<%:Ajax.jQuery(“#btnName”,”button”,new {label:”Test button”});%>
This method definition is:
jQuery(string name,string plugin name,object options)
We can write the jQuery in server syntax now by using jQuery(),but we still needs to remember the options of the jQuery plugin. All jQuery developers will know the options maybe has many parameters, most of those parameters are hard to remember and fall short of the C# naming specification. So we must make the options easy to remember and easy to use.
We can write a strongly type class of the options to fix it:
Exp: ButtonOptions.cs
public class ButtonOptions
{
[jQueryOption(“label”)]
public string Text{get;set;}
}
<%:Ajax.jQuery(“#btnName”,”button”,new ButtonOptions{Text=”Text button”}) %>
Let the helper method generate the html element for button:
<%:Ajax.Button(“btnName”,new ButtonOptions({Text=”Text button”}))%>
Overload the helper method make more easily:
<%:Ajax.Button(“btnName”,”Text button”)%>
From this example we could found the steps:
- Define the Options class to provide strongly type class of options and refactoring the options premasters naming.
- Define the extensions helper method，generate scripts and html outputs. DJME has two important property level attributes class to control the serialization of option class.
- jQueryOptionAttribute: Define the real name and type for the property output.
- jQueryIgnoreAttribute: Tells the jQuery method do not serialize this property.
Handling Hierarchical data
In applications develop we often need to handling hierarchical data structure such as site navigation, article categories, file system structure ext. In the past we can handle the hierarchical data structure by using Hierarchical data source in asp.net but none in Mvc!
From view level to modal level there is no solution found in Microsoft Mvc that will be make a big trouble for Mvc developers. For this reason the DJME provide a solution to improve the hierarchical data handling in Mvc.
For logical layer (Controller) DJME defines IHerarchicalNodeProvider interface to control the hierarchical data behaviors, and defines the HerarchicalNode class to define the hierarchical data structure and contains data entities. Implement IHerarchicalNodeProvider brings more control for HerarchicalNodes, or using HerarchicalNodes directly
For presentation layer (View) DJME provides a builder class to generate the hierarchical html elements. DJME including MenuExtensions and TreeViewExtensions that using the HerarchicalNodes/IHerarchicalNodeProvider to generate hierarchical ui control.
Take a look in Hierarchical classes of the DJME:
- HierarchNode : HierarchNode defines the necessary properties and methods to build the hierrachcal structure and it is a data container that contains the data instance or data key of the DataModels.
- IHierarchNodeProvider: Use to manipulate the HierarchNodes from DataModel.
- HierarchNodeUIBuilder: The hierarchical UI helper class that use to build the html elements for HierarchNode(s). HierarchNodeUIBuilder builds the unorder list (<ul><li></li></ul>) structure to present the hierarchical data.
- MenuExtensions & TreeViewExtensions: The hierarchical UI extensions that build html elements for the hierarchical UI and add menu/tree behavior to the hierarchical UI.
Hierarchical data handling is complex topic for Mvc, in order to understand the hierarchical data handling in DotNetAge we need to know some user scenarios of using hierarchical data.
1. There are small quantities of the hierarchical data and show all the hierarchical data in UI at once such as MainMenu or article categories menu. The code is like
var provider=new ArticalCategoriesProvider();
<%:Ajax.Menu(provider) %>
Or //build the nodes by manual
<%:Ajax.Menu(categoryNodes) %>
2. There are a huge quantities of the hierarchical data the hierarchical UI populate the specified level data for needs such as file explorer. In this scenario we need to use an Action to populate the specified nodes when user expands the parent node.
Exp1: Popluate ParticalView
<%:Ajax.TreeView(new TreeViewOptions (){ Url=Url.Action(“Popluate”) }) %>
Exp2: Popluate Content
<%:Ajax.TreeView(new TreeViewOptions (){ Url=Url.Action(“Popluate”) }) %>
3. Find the specified data node in hierarchical such as current page of menu, SiteMapPath. In this senior you need to impalement the IHierchicalNodeProvider to search the node or set the node state.
The jQuery form
For using pure jQuery client code the DJME provide a form extensions helper method. The jQuery form use jQueryAjaxOption to control the ajax behavior.
By default the jQuery form will update itself using the response result. It can block the form ui when the AutoBlocking property set. Also can show the confirm dialog before the form post just like the Ajax.BeginForm helper.
Pure jQuery client validation
For use pure jQuery in using DataAnnotations and jQuery.validation that can use EnableClientjQueryValidation method to do this.
Client-side error handling
All client scripts registered by DJME and all DJME jQuery plugins will wrap with try{}catch{} block to prevent some jQuery plugin or javascript has fail in runtime then cause another scripts run fail.
After all page loaded ,the DotNetAge will catch all ajax error on client side automatic ,when ajax error occurs the DotNetAge will show a dialog that display the fail information for user.
-
Average:3.5
-
Reads(2517)
-
Permalink
