1 Preface
A recent Ajax call has been made in asp.net: The client side first takes a page template from the ASP.net server and then takes some relevant data from the server when the page is initialized to implement the dynamic display of the page template. The specific implementation is:
1 Client to ASP. NET background send HTTP GET instructions
2 Send an HTML template to the client in the background while storing an XML String in memory (containing the data needed for the page template to display dynamically)
3 client when initializing page, send Ajax request, get XML String
4 using the XML String, the HTML template is customized to realize the dynamic display of the HTML page template.
2 Introduction and code examples of several key points
2.1 ASP.net server end
2.1.1 Generate XML String in C #
It can be implemented with several classes under System.xmlnamespace. Here is code sample,
Copy Code code 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 resulting XML is as follows:
Copy Code code 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 responds to Ajax requests and returns an XML stream
There's only one thing to note here, add an HTML Header, declare content-type.
Copy Code code as follows:
Response.Clear ();
Response.AddHeader ("Content-type", "Text/xml");
Response.Write (Global.repairsteps);
Response.End ();
2.1. Data sharing among more than 3 request
The way to implement data sharing across multiple request is straightforward, using a global object.
Copy Code code 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 End
2.2.1 Ajax Get XML
Copy Code code 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 received via Ajax
}});
2.2.2 Insert HTML List element dynamically
A more common approach is to generate HTML stream and then insert the stream into the DOM with append or HTML. There is a problem, if the stream has just double quotes or single quotes, use a lot of "\" separator, error prone, readability is not too convenient, and in fact, jquery has a create new element function. As long as the input parameter to $ contains <tag >, jquery does not interpret it as a selector expression, but instead understands it as a new DOM element. Here is a code sample.
Copy Code code 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 Code code 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 Summary
This article describes several key points that you might encounter when using Ajax in asp.net. C # generates XML streams, AJAX implementations (server-side and client-side), Global variables, and if you dynamically insert HTML elements in a better way.
4 references
Http://www.dotnetperls.com/global-variables-aspnet
http://api.jquery.com/jQuery/
