Project Optimization Experience Sharing (I) Automatic Data Matching

From today on, I will share with you the optimization experience of the most recent handled projects. The content we share today is: automatic matching!

Introduction:

You should be familiar with the automatic data matching in the input box. When using Baidu or google, you will be prompted to enter data in the search box, this makes our search very convenient. If I want to search the official ticket booking website, but I don't remember what the full name is, 12593? 12596 ?, In fact, I enter the railway station in the search box to see the full name of the website,

Of course, we need to use such practical functions in our own system to see how to implement them!

Ideas:

1. reference the packages encapsulated by jquery-easyui and import them to js and css files;

2. obtain data in the database asynchronously and convert the data to Json format. esayui automatically matches the data;

3. HTML code implementation;

Implementation:

1. Reference jquery-easyui and import js and css files (). Pay attention to the sequence when adding references to the page:

    <script  type="text/javascript" src="js/jquery.easyui.min.js"></script>    <script src="js/Student.js" type="text/javascript"></script>    <script src="js/RobCourse.js" type="text/javascript"></script>    <script src="js/ajax.js" type="text/javascript"></script>    <link href="css/Student.css" rel="stylesheet" type="text/css" />    <link type="text/css" href="css/easyui.css" rel="stylesheet" />    <link type="text/css" href="css/demo.css" rel="stylesheet" />

2. Html code

<Div id = "courseBlock" style = "margin-left: 10px;"> <label for = "txtCourse"> select priority: </label> <% -- <input type = "text" id = "txtCourse" style = "width: 103px; height: 22px; border-width: 1px; border-bottom: none; background-color: white; "/> -- %> <input id =" txtCourse "name =" txtCourse "class =" easyui-combobox "data-options =" valueField: 'indexing', textField: 'coursename', method: 'post', url: 'handler/AutoMatchingCourse. ashx? DropCourseCategoryValue = & dropCollegeValue = & dropExistValue = '"/> <input type =" button "id =" btnAddCourse "class =" btnadd "value =" + "/> </div>

3. obtain and process the parameters on the HTML page:

Public class AutoParttenCourse: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; // instantiate the table DataTable dt = new DataTable (); // instantiate the current course class ChooseCourseBLL chooseCourse = new ChooseCourseBLL (); // instantiate parameter object class CollegeEntity enCollege = new CollegeEntity (); CourseCategoryEntity enCourseCategory = new CourseCategoryEntity (); incluencurrentteachcourse = new category (); string dropCourseCategoryValue = context. request ["dropCourseCategoryValue"]; string dropCollegeValue = context. request ["dropCollegeValue"]; string dropExistValue = context. request ["dropExistValue"]; if (dropCourseCategoryValue = null) dropCourseCategoryValue = ""; if (dropCollegeValue = null) dropCollegeValue = ""; if (dropExistValue = null) dropExistValue = ""; // obtain the query condition enCourseCategory. courseCategoryID = dropCourseCategoryValue; enCollege. collegeID = dropCollegeValue; enCurrentTeachCourse. isEmpty = dropExistValue; // obtain data dt = chooseCourse. queryCurrentTeachCourseByGroup (enCollege, enCourseCategory, enCurrentTeachCourse); string res = ableable2jsoncom (dt); context. response. write (res );}}

4. convert data format: because the data obtained by layer B is in Dataset or able format, it must be converted to Json format for use. The Code is as follows:

# Region DataSet converted to Json format /// <summary> // DataSet converted to Json format /// </summary> /// <param name = "ds"> DataSet </param> /// <returns> </returns> public static string Dataset2JsonCom (DataSet ds, int total =-1) {StringBuilder json = new StringBuilder (); foreach (DataTable dt in ds. tables) {// json. append ("["); json. append (DataTable2JsonCom (dt); // json. append ("]"); // json. append ("");} return json. toString ();} # endregion # region dataTable to Json format // <summary> // dataTable to Json format /// </summary> /// <param name = "dt"> </param> /// <returns> </returns> public static string DataTable2JsonCom (DataTable dt, int pid =-1) {StringBuilder jsonBuilder = new StringBuilder (); jsonBuilder. append ("["); for (int I = 0; I <dt. rows. count; I ++) {jsonBuilder. append ("{"); for (int j = 0; j <dt. columns. count; j ++) {int id = pid; jsonBuilder. append ("\" "); dt. columns [j]. columnName = dt. columns [j]. columnName. toLower (); jsonBuilder. append (dt. columns [j]. columnName); jsonBuilder. append ("\": \ "" + dt. rows [I] [j]. toString () + "\", ");} if (dt. columns. count> 0) {jsonBuilder. remove (jsonBuilder. length-1, 1);} jsonBuilder. append ("},");} if (dt. rows. count> 0) {jsonBuilder. remove (jsonBuilder. length-1, 1);} jsonBuilder. append ("]"); return jsonBuilder. toString () ;}# convert endregion able to public bool IsReusable in Json format {get {return false ;}}

Effect:

Summary:

From the user's point of view, the user-oriented, closer to the user's usage habits, the higher the software affinity, the more popular the software development!