WebForm using jquery to implement DropDownList no flush linkage

Directory (?) [-]

1. 1 JS Code
2. 2 page-related controls with platform-encapsulated controls the normal DropDownList can also
3. 3 Background C code
4. Precautions

The original Microsoft encapsulated AJAX control Updatepannel and ScriptManager to achieve no-flush linkage, but the unexpected phenomenon has been caused by abnormal linkage. Do the demo alone is nothing, put in the system on the problem, after debugging still puzzled. All roads lead to Rome, still not believe can be suppressed to death. As we all know, jquery encapsulates Ajax, calling it more useful than native Ajax, implementing asynchronous refreshes of course, although the function is simple, look directly at the code:

1. JS Code:

[JavaScript]View PlainCopy 

2. <span style="FONT-SIZE:18PX;" ><span style="FONT-FAMILY:KAITI_GB2312;FONT-SIZE:14PX;" > <script type="Text/javascript" language="JavaScript" >
4. $ (function () {
6. //Take advantage of DropDownList's Change event
8. $ ("#hbKeyWordsType"). Change (function () {
10. //Get keyword type
12. var keyType = $ ("#hbKeyWordsType"). Val ();
14. $.ajax ({
16. URL: "wxkeywords_wxmessagefunoperation.aspx/hbkeywordstype_selectedindexchanged", //Call back Method: Page/Method Name
18. Type: "POST",
20. Data: "{typecode:" + KeyType + "}", //To the background, the parameter name must be consistent with the parameters of the method
22. ContentType: "application/json;charset=uft-8",
24. Success: function (Datajson) {
26. $ ("#hbKeysName"). empty (); //Clear the original data from the Keyword drop-down box
28. var strnames = eval (DATAJSON.D); //Must be added. D, otherwise it cannot be resolved. Does not clear the reason, through debugging discovery exists, but the code in the smart hint does not have D
30. For (var i = 0; i < strnames.length; i++) {
32. $ ("#hbKeysName"). Append ($ ("<option value= '" + strnames[i]. Code + ">" + strnames[i]. Keywords + "</option>")); //This add keyword
34. }
36. },
38. Error: function () {
40. Alert ("Server error, please contact administrator!");
42. }
44. });
46. });
48. });
52. </script>
54. </span></span>

2. Page-related controls (using platform-encapsulated controls, normal DropDownList can also)

[HTML]View PlainCopy 

2. <span style="FONT-SIZE:18PX;" ><span style="FONT-FAMILY:KAITI_GB2312;FONT-SIZE:14PX;" ><TD Class="Fieldtitle">
4. Keyword type
6. </td>
8. <TD Class="Fieldvalue">
10. <soa:hbdropdownlist runat="Server" id="Hbkeywordstype" />
12. </td>
14. <TD Class="Fieldtitle">
16. Keyword name
18. </td>
20. <TD Class="Fieldvalue">
22. <soa:hbdropdownlist runat="Server" id="hbkeysname" />
24. </td></span></span>

3. Background C # code

[CSharp]View PlainCopy 

2. <span style="FONT-SIZE:18PX;" ><span style="FONT-FAMILY:KAITI_GB2312;FONT-SIZE:14PX;" > [WebMethod] //Call to the front office jquery
4. public static string hbkeywordstype_selectedindexchanged (string typecode)
6. {
10. Find a keyword entity collection based on the selected keyword type and public number encoding
12. string accountcode = WxMessageAdapter.Instance.GetCurrentWxAccountCode ();
14. int keywordstype =int.  Parse (TypeCode);
18. Wxkeywordscollection Wxkeycoll = WxKeywords_WxMessageAdapter.Instance.LoadByAccAndKeyType (AccountCode, Keywordstype);
22. //Use the encapsulated JSON serialization method to return the JSON string
24. string reutnjson=jsonserializerexecute.serialize (Wxkeycoll);
26. return Reutnjson;
30. }
32. </span></span>

Precautions:

1. Front page: ①url: "This page name/method name";  ② must add ContentType: "Application/json;charset=utf-8"; ③DATAJSON.D through the. D property to fetch the data returned by the server
2. Backstage method: ① method is modified by [WebMethod];  The ② method must be a public and static method; The parameter names in the ③ method must be the same as the parameter name of data in the script, and the order can be different

Previously Datajson did not add. D, has not been taken back from the background data, through debugging found actually returned, but is the form of DATA.D, such as:

As you can see, Datajson is an object, and the Eval function can only parse the string, resulting in a value not being taken. It took a long time to do this, and although it was done in the end, it was not much consolation, but the task at work didn't wait for anyone. But, everything is difficult at the beginning, as long as you get started, all will be well.

WebForm using jquery to implement DropDownList no flush linkage