How to Use jQuery UI control in ASP. net mvc 2

BKJIA exclusive Article: ASP. net mvc input form to add a date Selection control, but the Model-View-controller MVC) does not provide such an auxiliary method, how do I add controls?

A: ASP. NET Web forms are different. The MVC Architecture does not provide stateful server controls that can be dragged and dropped on the design panel. On the contrary, MVC encourages the use of simple HTML layout elements and data-based labels as elements of the page layout. The functions and final layout are controlled using the client JavaScript and CSS style sheets.

MVC provides a set of extension methods based on HtmlHelper to render most HTML tags. For more complex functions, you need to write your own HTML/JavaScript code, buy a third-party MVC control package or use an Open Source JavaScript library. Currently, jQuery is the most popular open source JavaScript library. When you create a new MVC 2 project in Visual Studio 2010, actually, the jQuery core library is included.

JQuery architecture has always followed the principle of "not abrupt JavaScriptUnobtrusive JavaScript)". It separates HTML tags from JavaScript scripts that add client behavior. This technology is used, developers can use simple <div>, <span>, and <table> labels and class attributes to create a page layout, and use an HTML list that is not connected to JavaScript events, the final page will be clean and displayed in any browser by collecting and displaying data using the anchor and form-based labels, and it is more suitable for search engine robot capturing. The developer adds a jQuery script to the selected control in the Document Object Model DOM, and adds attributes, events, and additional labels. This script creates a specific appearance and responds to the UI behavior, execute animations and manage remote calls.

The jQuery library is subdivided into the core library and Other plug-in libraries, including a set of UI Widgets. The core library provides selection, style setting, DOM operations, and Ajax functions, the jQuery library can be expanded by creating plug-ins. jQuery UI is a set of plug-ins that contain many advanced behaviors, such as dialog box, drag-and-drop, and size adjustment, and theme components, such as automatic completion and sidebar, tag and date selector.

JQuery UI plug-in

If you want to use the UI library, you must first start with the jQuery development file. Under the decompressed folder, you should see Multiple folders, including CSS and JS folders.

Add the downloaded custom topic to the project, and copy the style folder from the CSS directory to the Content folder of the MVC project, copy the custom jQuery UI Script library from the js folder to the Script folder of the project. I downloaded the latest version 1.8.4. To deploy your project using a Web deployment package, you must add the style folder and JavaScript file to your Visual Studio project, otherwise, you will find that the program can run in the local environment, but it will fail in the production environment.

ASP. net mvc Architecture is composed of models, views, and controllers. In short, the model is a data class decorated using the DataAnnotation attribute. All URLs are converted to public methods on the call controller, the data that the controller operation passes to it and the data required for creating the view. The main task of the view is to render the data, views, and ASP created by the Controller. NET pages are a bit similar, but there is no code behind them, and views can be strongly typed, which means they expect to create a data object control and pass it to them for rendering, this object can be accessed through a strongly typed model variable in the entire view. To render form-based controls, such as text boxes and radio buttons, the view uses a set of HtmlHelper methods, access through a variable called Html. These extension methods generally access the Model data and metadata of the Model based on the DataAnnotation attribute of the Model class and field.

Add the following script to the Master page of the view page. The default value is Site. Master. Replace <your style here> with the jQuery UI library you downloaded. here I use the "Microsoft" style.

 
 

  
  
<link href="<%=Url.Content("~/Content/<your style here> 
  
  
/jquery-ui-1.8.4.custom.css")%>" rel="stylesheet" type="text/  
  
  
css" />      
  
  
<script type="text/javascript" src="<%=Url.Content("~/Scripts/  
  
  
jquery-1.4.1.min.js")%>" ></script>     
  
  
 <script type="text/javascript" src="<%=Url.Content("~/Scripts/  
  
  
 jquery-ui-1.8.4.custom.min.js")%>" > 
 
 

Make sure that the jQuery core library is jquery-1.4.1.min.js here) the script tag appears before the tag of the jQuery UI library, otherwise when you run the program, you will receive a script error similar to "jQuery undefined.
To add a calendar control to a view page, first use the HtmlHelper TextBox Extension Method to add a TextBox to the view:

 
 

  
  
<%= Html.TextBox("TestDatePicker"  
  
  
, Model.TestDatePicker.ToString("d"),   
  
  
new { @class = "myDatePickerClass" })%> 
 
 

All the strong-type view pages that obtain Model variables representing a C # class instance are passed to the view through the Controller. In this example, Model refers to a class that contains a DateTime character TestDatePicker, note that TextBox uses the ToString () method to set an initial formatted value for the TestDate-Picker field, which is required, because the jQuery DatePicker control only applies the dateFormat option when you select a date in the calendar control.

Next, add the following jQuery script to your Master page. The myDatePickerClass class must match the class added to the TextBox.

 
 

  
  
<script type="text/javascript"> 
  
  
      $(document).ready(  
  
  
          function () {  
  
  
$(".myDatePickerClass ").datepicker({  
  
  
buttonImage: '<%=Url.Content("~/Content/                             
  
  
         images/calendar.gif")%>',  
  
  
             dateFormat: 'm/d/yy',  
  
  
              showOn: 'button',  
  
  
             buttonImageOnly: true  
  
  
              })  
  
  
          }  
  
  
      );  
  
  
  </script> 
 
 

 

Open the page. When you click the calendar icon on the right of the text box, a calendar control shown in 1 is displayed. Select a date to fill the text box. You can also modify the date in the text box, the displayed calendar control changes accordingly. Note that jQuery does not allow you to enter an invalid date in the text box.

Edit recommendations]