Ajax enables dynamic loading of data and ajax Dynamic Loading

Source: Internet
Author: User

Ajax enables dynamic loading of data and ajax Dynamic Loading

Preface:

1. This article provides an example of Ajax dynamic loading.

2. Use the. net MVC Framework for implementation.

3. This example focuses on frontend and backend interaction, while others are omitted.

Start:

1. The ActionResult code of the Controller (used to display the page)

/// <Summary> /// call query page /// </summary> /// <returns> </returns> public ActionResult PhoneSearch (string SQL) {phoneList = query data from the database; ViewBag. phoneList = phoneList; return View ();}

2. Main Code on the front-end page

Note: This is the table for displaying data. The fields in the table must match the model you have created.

<Table border = "1" cellspacing = "0" cellpadding = "0" class = "toLang" id = "phoneTable"> <tr> <th> NO. </th> <th> company </th> <th> Department </th> <th> group </th> <th> name </th> <th> position </th> <th> telephone </th> </tr> <tbody id = "todeListTBODY"> @ if (ViewBag. phoneList! = Null) {foreach (var item in ViewBag. phoneList) {number = number + 1; <tr> <td> @ number </td> <td> @ item. conpany </td> <td> @ item. department </td> <td> @ item. team </td> <td> @ item. name </td> <td> @ item. position </td> <td> @ item. phoneNumber </td> </tr >}</tbody> </table>

3. My query Conditions

<Div style = "display: block; float: left; width: 100%;"> company: <select class = "InputTestStyle" id = "company" onclick = "initDeptSelect () "> <option >== select company ==</option> </select> department: <select class =" InputTestStyle "id =" department "onclick =" initGroupSelect () "> <option >== select company ==</option> </select> group: <select class =" InputTestStyle "id =" group "onclick =" QueryPhoneNum () "> <option >== select company ==</option> </select> </div>

4. query condition initialization (take the company as an example)

4.1 front-end JavaScript code

// Execute window when opening the page. onunload = initCompanySelect (); // initialize the "Company" drop-down box function initCompanySelect () {$. ajax ({type: 'post', url: '/Home/GetCompantListForPhone', dataType: 'json', data :{}, success: function (data) {// 1. clear the data in the drop-down box // $ ('# company option '). remove (); // You can also successfully implement $ ('# company '). empty (); $ ("# company "). append ($ ('<option>' + '= select company =' + '</option>'); // 2. dynamically load the returned values into the drop-down list to dynamically generate tags. For (I = 0; I <data. length; I ++) {$ ("# company "). append ($ ('<option>' + data [I]. conpany + '</option>') ;}}, error: function (XMLHttpRequest, textStatus, errorThown) {alert ("operation failed! ");}})}

4.2 initialize the ActionResult code corresponding to the drop-down box

/// <Summary> /// obtain the telephone query company pull-down data /// </summary> /// <returns> </returns> [HttpPost] public JsonResult GetCompantListForPhone () {compantList = the set of data in the drop-down box retrieved from the database; return Json (compantList );}

The other two drop-down boxes follow this method. Then you can query by the condition. The following two are the JavaScript and background methods used.

5. Submit the query to the background, and assign a value to the table based on the returned set.

// Query the call function QueryPhoneNum () {if ($ ('# group') according to the condition '). val () = '= select group =') {return;} number = 0; $. ajax ({type: 'post', url: '/Home/PhoneSearchSubmit', dataType: 'json', data: {company: $ ('# company '). val (), dept: $ ('# department '). val (), group: $ ('# group '). val ()}, success: function (phoneList) {// 1. clear the data in this table $ ('# todeListTBODY tr '). remove (); // 2. dynamically load the returned values into the table. $. Each (phoneList, function (index, element) {number = number + 1; $ ('# todeListTBODY '). prepend (function (I) {return "<tr>" + "<td>" + number + "<td>" + element. conpany + "<td>" + element. department + "<td>" + element. team + "<td>" + element. name + "<td>" + element. position + "<td>" + element. phoneNumber + "</tr>" ;})}, error: function (XMLHttpRequest, textStatus, errorThown) {alert ("operation failed! ");}})}

5.1 ActionResult corresponding to the queried data

/// <Summary> // call query /// </summary> /// <returns> </returns> [HttpPost] public JsonResult PhoneSearchSubmit (string company, string dept, string group) {phoneList = query data based on conditions; return Json (phoneList );}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.