Use jquery ajax. net

Source: Internet
Author: User

Jquery is an excellent javascript framework, which greatly improves the simplicity of javascript code and reduces the difficulty of javascript. For more information about jquery functions, see http://www.cnblogs.com/greatxj/articles/2260357.html. For ajax in jquery, I mainly use the ajax () function. I will write a bit of usage experience below. I would like to ask you more about any shortcomings. The background code is C #

1. Add data to a table

Front-end code

1 $. ajax ({
2 type: "POST", // access WebService using Post request
3 contentType: "application/json", // WebService returns the Json type
4 url: "ajax. aspx/AddToTP", // WebService call address and method name combination ---- WsURL/method name
5 Data: '{TID: "' + TID + '", uid: "' + uid + '", score: "' + score + '", Degree: "'+ degree +'"} ', // The parameter to be passed in the format of data: "{paraname: paravalue }".
6 datatype: 'json ',
7 success: function (result) {// callback function, result, Return Value
8 alert (result. d); // return value in the background after the Ajax request is successfully popped up
9 If (result. d = "success "){
10
11 // successful event
12}
13}

14 });

C # You can use. aspx or. ashx (General transaction handler) to receive ajax requests. The web service in. aspx is used here.

 

1 [System. Web. Services. WebMethod ()]
2 public static string AddToTP (string tid, string uid, string score, string degree)
3 {
4 bool OK = DBHpler. executeNonQueryTwo ("Insert into trainingpeople (tid, uid, score, degree) Values ('" + tid + "', '" + uid + "', '"+ score +"', '"+ degree +"') "); // use the SQL help class to insert data to the trainingpeople table.
5 if (OK = true) {return "success";} // judge the return value of DBHpler. ExecuteNonQueryTwo
6 else {return "failed ";}
7}

2. when a user clicks the button, the ajax request returns the user-selected class personnel form and formatting the form. Here, the result is input for the class test. You can choose to enter the score directly or the level-2 system.

Front-end js Code

<Script language = "javascript" type = "text/javascript">


Function getpeople (){
Certificate ('{ssss'}.css ('visibility ', 'visable'); // loading Image Display
$. Ajax ({
Type: "Post", // WebService access request using post
Contenttype: "application/JSON", // WebService returns the JSON type
URL: "Ajax. aspx/getpeople", // address and method name combination of WebService call ---- wsurl/method name
Data: '{unit: "' + $ ('# Select1 '). val () + '"}', // here the parameter to be passed is the value selected in the user drop-down box. Here, it is a Sub Unit selected by the user.
DataType: 'json ',
Success: function (data) {// callback function, result, Return Value
$ ('. Dd'). empty (); // clear the <div class = "dd">
$ ('. Dd'). append (data. d); // enter the ajax return value for <div class = "dd">

Upload ('{ssss'}.css ('visibility ', 'den den'); // loading image hiding
Var ss = $ ('# Select3 option: selected'). val ();
// Format the form based on the selected value
If (ss = "score "){
$ ('. Dd. scoretxt'). each (function (I ){
$ ('. Dd. scoretxt') [I]). append ('<input type = "text" class = "score"/> ');
});

}
Else {

$ ('. Dd. scoretxt'). each (function (I ){
$ ('. Dd. scoretxt ') [I]). append ('<select class = "score"> <option value = "qualified"> qualified </option> <option value = "unqualified"> unqualified </option> <option value = "not tested"> not tested </option> </select> ');
});

}

}
});
}
</SCRIPT>

 

Background code

In Ajax. aspx

  • [System. Web. Services. WebMethod ()]
  • Public static string GetPeople (string unit)
  • {
  • System. Threading. Thread. Sleep (500); // delay: 0.5 seconds
  • Page page = new Page ();
  • UserScoreInput ctl = (UserScoreInput) page. LoadControl ("~ \ Samples \ UserScoreInput. ascx "); // loads the Form Control.
  • Ctl. unit = unit; // parameters passed to the Form Control

  • Page. Controls. Add (ctl );
  • System. Io. stringwriter writer = new system. Io. stringwriter ();
  • Httpcontext. Current. server. Execute (page, writer, false );
  • String output = writer. tostring ();
  • Writer. Close ();
  • Return output;

15}

User Control

 

UserScoreInput. ascx code 1 <% @ Control Language = "C #" AutoEventWireup = "true" Inherits = "UserScoreInput" ClassName = "UserScoreInput" %>
2
3 <script runat = "server">
4 protected override void OnLoad (EventArgs e)
5 {
6
7
8 if (int. Parse (this. unit)> 1000)
9 sqlDsOrders. SelectCommand = "SELECT [ID], [name] FROM [personnel] WHERE unit = '" + this. unit + "% '";
10
11 base. OnLoad (e );
12}
13
14
15 </script>
16 // duplicate columns are used here
17 <asp: SqlDataSource ID = "sqlDsOrders" runat = "server" ConnectionString = "<% $ ConnectionStrings: ConnectionString %>">
18 </asp: SqlDataSource>
19 <asp: Repeater ID = "List" performanceid = "sqlDsOrders" runat = "server">
20 <HeaderTemplate>
21 <table style = "width: 80%">
22 <tr>
23 <th> name </th>
24 <th> score </th>
25 <th> name </th>
26 <th> score </th>
27 </tr>
28 </HeaderTemplate>
29 <ItemTemplate>
30 <tr>
31 <td style = "width: 25%">
32 <div class = "hh"> <% # Eval ("name") %> </div>
33 </td>
34 <td style = "width: 25%">
35 <div class = "scoretxt" name = '<% # Eval ("id") %>'>
36 </td>
37
38 </ItemTemplate>
39 <AlternatingItemTemplate>
40
41 <td style = "width: 25%">
42 <div class = "hh"> <% # Eval ("name") %> </div> </td>
43
44 <td style = "width: 25%">
45 <div class = "scoretxt" name = '<% # Eval ("id") %>'>
46 </td>
47 </tr>
48 </AlternatingItemTemplate>
49 <FooterTemplate>
50 </table>
51 </FooterTemplate>

52 </ASP: repeater>

Userscoreinput. ascx. CS code

1 public partial class userscoreinput: usercontrol

2 {
3 public string unit
4 {
5 get {return (string) ViewState ["unit"];}
6 set {ViewState ["unit"] = value ;}
7}
8
9}

If you have any shortcomings, please leave a message and learn together.

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.