Learn asp.net ajax step by step

Although I have learned asp.net for more than a year and have taken many detours, every experience is unforgettable. I am about to begin to summarize what I have done before, it is more about re-writing previous projects. Although I have participated in some projects before, I feel that all I have written is rubbish, stacked functions, and can be understood in the school environment. However, slowly begin to learn how to summarize and reconstruct on your own, and feel the progress of every day!

Today, I started to write a blog in the blog park, and I have accumulated my experiences! Make progress with everyone!

Task: Do an ajax job for loading news categories

 

Mainly implements dynamic data loading.

Let's first check the data content

Next we will learn how to use jquery to implement ajax news categories.

We must first familiarize ourselves with ajax requests. json data is transmitted through json,

Benefits: data is separated from the interface, and the interface changes have nothing to do with data. The background is only responsible for providing data. Our data can even directly call the background category management method, which is highly reusable.

In addition, the performance is very good. We can even cache categories through caching. Because category information is loaded, category loading on the foreground page is very frequent and easy to maintain and modify. the user experience is good.

Disadvantages: js and jquery skills are required, and jquery ajax scripts must be manually written.

First, we need to know two jquery functions, one of which is $. ajax is mainly used for ajax requests. One is $. parseJSON is used to escape ajax. Another one is $. the each is used for traversal, which is equivalent to foreach. For details, refer to the jquery api:

$. ParseJSON

Next is $. each

With these preparations, we also need to write a data provider in the background, which can be called directly from the background, which is only listed here.

Generation method,

Json data format generated

Then the process of processing json data

First, we need to use ajax to obtain the background data.

$ (Function (){

$. Ajax ({

Url: "Admin/News/Data/GetNewsInfo. ashx? Method = GetNewsTypeForCombox ",

Type: "get ",

Success: function (text) {// This is the callback function

// Alert (text );

Var JsonData = $. parseJSON (text );

$ ("# M2"). empty (); // first clear the content of the m2 sub-element

$. Each (JsonData, function (key, value) {// note this

$ ("# M2"). append ("<a href =" + value. TypeId + ">" + value. TypeName + "</a> ");

// Alert (key + "" + value. TypeId + "" + JsonData [key]. TypeId + "" + JsonData [key]. TypeName );

// The each method. You can test the method to view its meaning.

});

}

});

});

Effect

What we need to do next is to cache the category information, because the parent board pages are loaded frequently, and there is no need to read the database repeatedly, so we can cache the information and add a caching mechanism in the background.

This complete ajax is successfully completed!

Is it a sense of accomplishment?

The response speed of an ajax page is much faster in all aspects. In addition, it works well with caching!

I used three layers to rewrite the previous project. The three-layer architecture design was adopted at the backend. For the first time, I really felt the beauty of the architecture! Convenience of expansion! With the help of the handwritten code generator and distribution class, modification is simpler and more convenient!

.

Summary: in this way, we can implement a simple news category. Although simple, a high-performance and scalable website is more important than the main architecture. Here, ajax transmits data through json, the backend is implemented through the ashx page to separate services from data. The backend is only responsible for data supply and data display at the front end. This UI is separated from data, is the first step in website architecture.

Author: cnblogs tianzh