AJAX calls instance code in ASP. NET

1 Preface
Recently in ASP. NET. NET Server obtains a page template in the background, and obtains some data from the Server during page initialization to achieve dynamic display of the page template. Specific implementation:
1) the Client sends an http get request to the ASP. NET background
2) the backend sends an HTML template to the Client and stores an XML String in the memory (including the page template to dynamically display the required data)
3) when the Client initializes the page, it sends an AJAX request to get the XML String
4) use the obtained XML String to customize the HTMl template to achieve dynamic display of the HTML page template.
2 key points and code examples
2.1 ASP. NET Server
2.1.1 use C # To generate XML String
You can use several classes under System. Xmlnamespace. Below is the Code sample,
Copy codeThe Code is as follows:
ArrayList steps = new ArrayList ();
String errordiscription = "Not in position ";
For (int I = 0; I <5; I ++)
{
Steps. Add (new Step (@ "images/1.jpg"," step21 description "));
}
XmlDocument doc = new XmlDocument ();
XmlNode docNode = doc. CreateXmlDeclaration ("1.0", "UTF-8", null );
Doc. AppendChild (docNode );
// Add the root
XmlNode rootNode = doc. CreateElement ("Root ");
Doc. AppendChild (rootNode );
// Add the error description node
XmlNode errorNode = doc. CreateElement ("ErrorDescription ");
ErrorNode. AppendChild (doc. CreateTextNode (errordiscription ));
RootNode. AppendChild (errorNode );
// Add the steps node
XmlNode productsNode = doc. CreateElement ("Steps ");
RootNode. AppendChild (productsNode );
For (int I = 0; I <steps. Count; I ++)
{
XmlNode productNode = doc. CreateElement ("step ");
XmlAttribute productAttribute = doc. CreateAttribute ("description ");
ProductAttribute. Value = (Step) steps [I]). description;
ProductNode. Attributes. Append (productAttribute );
// ProductNode. Value = (Step) steps [I]). imagePath;
ProductNode. AppendChild (doc. CreateTextNode (Step) steps [I]). imagePath ));
ProductsNode. AppendChild (productNode );
}
Global. Repairsteps = doc. InnerXml;

The generated XML is as follows:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
-<Root>
<ErrorDescription> Not in position </ErrorDescription>
-<Steps>
<Step description = "step21 description"> images/1.jpg</step>
<Step description = "step21 description"> images/1.jpg</step>
<Step description = "step21 description"> images/1.jpg</step>
<Step description = "step21 description"> images/1.jpg</step>
<Step description = "step21 description"> images/1.jpg</step>
</Steps>
</Root>

2.1.2 respond to Ajax requests and return XML streams
Here, we only need to note that an HTML Header should be added to declare Content-Type.
Copy codeThe Code is as follows:
Response. Clear ();
Response. AddHeader ("Content-Type", "text/xml ");
Response. Write (Global. Repairsteps );
Response. End ();

2.1.3 data sharing among multiple requests
The method for sharing data between multiple requests is simple and intuitive. You can use a Global object.
Copy codeThe Code is as follows:
Public class Global
{
/// <Summary>
/// Global variable storing important stuff.
/// </Summary>
Static string _ repairsteps;
/// <Summary>
/// Get or set the static important data.
/// </Summary>
Public static string Repairsteps
{
Get
{
Return _ repairsteps;
}
Set
{
_ Repairsteps = value;
}
}
}

2.2 Client
2.2.1 AJAX get XML
Copy codeThe Code is as follows:
$. Ajax ({
Type: "GET ",
Url: "http: // localhost: 3153/WebSite2 /",
Cache: false,
DataType: "xml ",
Error: function (xhr, status, errorThrown ){
Alert (errorThrown + '\ n' + status +' \ n' + xhr. statusText );
},
Success: function (xml ){
// Here we can process the xml encoded ed via Ajax
}});

2.2.2 dynamically insert HTML List elements
A common method is to generate an html stream and insert the Stream into the DOM using append or html. In this case, there is a problem. If a Stream contains double quotation marks or single quotation marks, a lot of "\" delimiters will be used, which are prone to errors and difficult to read. In fact, JQuery has the create new element function. As long as $'s input parameter contains <tag...>, JQuery does not understand it as a selector expression, but instead converts it into a new DOM element. The following is a code sample.
Copy codeThe Code is as follows:
$ (Xml). find ("step"). each (function (){
Var stepimagepath = $ (this). text ();
Var stepdescription = $ (this). attr ("description ");
Additem (stepimagepath, stepdescription );
});
Function additem (stepimagepath, stepdescription ){
$ ('. Ad-thumbs ul'). append (
$ ('<Li>'). append (
$ ('<A>'). attr ('href ', stepimagepath). append (
$ (''). attr ('src', stepimagepath). attr ('alt', stepdescription)
)));
}

The generated HTML section is as follows:
Copy codeThe Code is as follows:
<Ul class = "ad-thumb-list">
<Li> <a href = "images/1.jpg"> </a> </li>
<Li> <a href = "images/1.jpg"> </a> </li>
<Li> <a href = "images/1.jpg"> </a> </li>
<Li> <a href = "images/1.jpg"> </a> </li>
<Li> <a href = "images/1.jpg"> </a> </li>
</Ul>

3. Conclusion
This article describes several key points that may occur when Ajax is used in ASP. NET. C # generate XML streams, AJAX implementation (Server and Client), Global variables, and dynamic insertion of HTML elements using a better method.
4. Reference
Http://www.dotnetperls.com/global-variables-aspnet
Http://api.jquery.com/jQuery/