Quick learning of Ajax-7 Ajax modification of user information

Source: Internet
Author: User

Ah, this course was intended to continue to improve the Ajax picture without refreshing the new picture, but it could be tested for a long time later. I think uploading images may not work very well, so I have to take this course today, first, implement ajax to modify materials.

Upload a large file course using Ajax, and focus on the Progress display function.

Now, we can continue to modify user data and user data. The first thing we need to do is to display all user information first.
The latest website structure, which is marked by arrows below, is the addition of several new files today.

Showstudent.htm is added as follows:Code.

     <  Link  Href  = "Style/basestyle.css"  REL  = "Stylesheet"  Type  = "Text/CSS"/> <  Script  SRC  = "JS/basejs. js" Type  = "Text/JavaScript"> </  Script  > <  Script  Type  = "Text/JavaScript"> Function Getstudents () {createxmlhttprequest (); sendmethod ( "Get" , "Showstudent. ashx" , Null );} Window. onload = getstudents (); </  Script  > </ Head  > <  Body  > <  Div  ID  = "Returnlogin"  Style  ="  Text-align  : Center "> </  Div  > </  Body  > 

This is to directly request data. Then add the following code in showstudent. ashx.

 Public void Processrequest (Httpcontext Context) {context. response. contenttype = "Text/html" ; Stringbuilder SB = New  Stringbuilder (); Sb. append ( "<Table> <tr> <TH> name </Th> <TH> gender </Th> <TH> email </Th> <TH> operation </Th> </tr>" ); Foreach ( VaR Item In  User . Getusers () {sb. append ( "<Tr> <TD>" + Item. Name + "</TD> <TD>" + Item. Sex + "</TD> <TD>" + Item. Email + "</TD> <a hrefpolic'editstudent.htm? Id =" + Item. ID + "'> Modify </a> </TD> </tr>" );} Sb. append ( "</Table>" ); Context. response. Write (sb. tostring ());}

Of course, you need to add the user. getusers method.

I still don't want to explain the content of this method. Haha, ASP. NET fetch data, and then let's look at the effect.

 

Okay, the storage is finished. Easy,

Oh, let's continue to improve our user class.

This time we will add the student information based on the ID.

Oh, forget it. Let's modify the table first. Haha, add the number. I will only give you one. The Code will not be displayed, but remember, this is only the number in the table, but not the ID field in the database.

After clicking modify, we will jump to the editstudent.htm page. Of course, you can also implement it on this page. There are many implementation methods. Here we will jump

New Page


Now, the jump is successful. Let's write down the editstudent.htm code first.

     <  Link  Href  = "Style/basestyle.css"  REL  = "Stylesheet"  Type  = "Text/CSS"/> <  Script  SRC  = "JS/basejs. js" Type  = "Text/JavaScript"> </  Script  > <  Script  Type  = "Text/JavaScript"> Function Geturlparam (name ){ VaR Reg = New Regexp ( "(^ | &)" + Name + "= ([^ &] *) (& | $ )" ); VaR R = Window. Location. Search. substr (1). Match (REG ); If (R! =Null ) Return Unescape (R [2]); Return null ;} Function Getuser () {createxmlhttprequest (); sendmethod ( 'Get' , "Editstudent. ashx? Id =" + Geturlparam ( 'Id' ) + "" , Null );} Window. onload = getuser (); </  Script  > </ Head  > <  Body  > <  Div  ID  = "Returnlogin"  Style  ="  Text-align  : Center "> </  Div  > </  Body  > 

Actually, you can get the parameters in the URL. Note that you can use js to add a regular expression. Then send the data to editstudent. ashx

Page, where the corresponding processing logic is provided.

Public void Processrequest ( Httpcontext Context) {context. response. contenttype = "Text/html" ; VaR Id = Convert . Toint32 (context. request [ "ID" ]. Tostring ()); VaR User = User . Getuser (ID ); Stringbuilder SB = New  Stringbuilder (); Sb. append (@ "<Input type = 'den den 'name = 'id' value =' @ id'/>  <Table> <tr> <TD> User Name: </TD> <input type = 'text' name = 'name' value = '@ name'/> </TD> </ tr> <TD> password: </TD> <input type = 'Password' name = 'Password' value = '@ password'/> </TD> </ tr> <TD> Email: </TD> <input type = 'text' name = 'email 'value =' @ email '/> </TD>/ tr> <TD> </TD> <input type = 'button 'value = 'Submit'/> </TD> </tr> </table >" ); Sb. Replace ( "@ ID" , Id. tostring (). Replace ("@ Name" , User. Name). Replace ( "@ Email" , User. Email). Replace ( "@ URL" , User. Photo). Replace ( "@ Password" , User. Password); context. response. Write (SB );}

Here I use another method. The method of generating a page is to replace some special data to form a new page. Let's take a closer look.

Add a new method to the user class.

After writing this method, it is the main content of this lesson. Okay,

First, modify the method in our editstudent. ashx file.

 Public void Processrequest ( Httpcontext Context) {context. response. contenttype = "Text/html" ;If (Context. request [ "Name" ] = Null ){ VaR Id = Convert . Toint32 (context. request [ "ID" ]. Tostring ()); VaR User = User . Getuser (ID ); Stringbuilder SB = New  Stringbuilder (); Sb. append (@ "<Form action = 'editstudent. ashx 'method = 'post'> <input type = 'den den 'name = 'id' value =' @ id'/>  <Table> <tr> <TD> User Name: </TD> <input type = 'text' name = 'name' value = '@ name'/> </TD> </ tr> <TD> password: </TD> <input type = 'Password' name = 'Password' value = '@ password'/> </TD> </ tr> <TD> Email: </TD> <input type = 'text' name = 'email 'value =' @ email '/> </TD>/ tr> <TD> </TD> <input type = 'submit 'value = 'Submit'/> </TD> </tr> </table> </form>" ); Sb. Replace ( "@ ID" , Id. tostring (). Replace ( "@ Name" , User. Name). Replace ( "@ Email" , User. Email). Replace ( "@ URL" , User. Photo). Replace ( "@ Password" , User. Password); context. response. Write (SB );} Else { User User = New  User (); User. ID = Convert . Toint32 (context. request [ "ID" ]); User. Name = context. request ["Name" ]; User. Password = context. request [ "Password" ]; User. Email = context. request [ "Email" ]; VaR Newuser = User . Updateuser (User ); VaR Htmldata = @ "Modified successfully <Table> <tr> <TD> User Name: </TD> <TD> @ name </TD> </tr> <TD> password: </TD> <TD> @ password </TD> </tr> <TD> Email: </TD> <TD> @ email </TD> </tr> </table>" ; Htmldata = htmldata. Replace ( "@ Name" , User. Name). Replace ( "@ Email" , User. Email). Replace ( "@ URL" , User. Photo). Replace ( "@ Password" , User. Password); context. response. Write (htmldata );}}

The above is our main logic code. The implemented function is of course to modify materials. Of course, for simplicity, I only changed several items, names, passwords, emails that are easy to modify, other knowledge is similar.

 

Haha, the modification is coming soon.

First, we use Ajax for loading for the first time. Second, we use form for submission. It turns out that you can write your own Ajax application on your own.

 

This lesson is over.

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.