Ajax No refresh save user submit data

Last Update:2017-01-13 Source: Internet

Author: User

Tags httpcontext

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

We continue to modify the user data, modify the user data, first of all we need to do is, first show all the user information.
The latest structure of the website, the following with the arrow callout is today added a few new files.

showstudent.htm Add the following code.

<link href= "style/basestyle.css Tutorial" rel= "stylesheet" type= "Text/css"/>
    <script src= "js/" Basejs.js "type=" text/Web Effects "></script>
    <script type=" Text/javascript ">
         Getstudents () {
            createxmlhttprequest ();
            Sendmethod ("Get", "showstudent.ashx", null);
        }
        Window.onload = Getstudents ();
    </script>
</head>
<body>
    <div id= " Returnlogin "style=" text-align: Center ">
    </div>
</body>

This is the direct go to the data. Then add the following code inside the SHOWSTUDENT.ASHX.

public void ProcessRequest (HttpContext context)
{context
    . Response.ContentType = "text/html";
    StringBuilder sb = new StringBuilder ();
    Sb. Append ("<table><tr><th> name </th><th> sex </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><td><a href= ' editstudent.htm?id=" +item. Id+ "' > Modify </a></td></tr>");
    }
    Sb. Append ("</table>");
    Context. Response.Write (sb.) ToString ());
}

Of course, you need to add new user.getusers this way

The content of this method, I still do not explain, hehe, ASP. NET fetch the data, and then we look at the effect.

Well, the reserve work is done, it's easy,

Well, let's go ahead and refine our User class.

This time we are going to add a student's information based on ID.

Oh, forget, we first to our table to modify, hehe, plus number, this I only give you an effect chart, it does not show code, but remember, our this is just the number in the table, not the database tutorial in the ID field AH

Click to modify, after we jump to the editstudent.htm page, of course you can also be implemented on this page, the way to achieve a lot, we here for the sake of simplicity, to jump to

A new page

OK, jump succeeded. So 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 ">
    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>

In fact, is to get the parameters in the URL, note that you can use the JS Gazheng the expression of AH. Then send the data to the EDITSTUDENT.ASHX

page, in which there is the corresponding processing logic.

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= ' hidden ' name= ' id ' value= ' @id '/> src= ' upload/@url '  name= ' url ' id= ' image '/> <table> <tr> ;<td> Username: </td><td><input type= ' text ' name= ' name ' value= ' @name '/></td><td>< /td></tr> <tr><td> Password: </td><td><input type= ' password ' name= ' password ' value = ' @password '/></td><td></td></tr> <tr><td>E-mail:</td><td> <input type= ' text ' name= ' email ' value= ' @email '/></td><td></td></tr> <tr>& Lt;td></td><td><input type= ' button ' value= ' submitted '/></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 am using another, the way to generate a page is to replace the method I will some special data, replaced by the formation of new pages. Oh, look at it carefully.

Add a new method to the User class

After this method is written, that is the main content of our class, OK,

First, modify the methods 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= ' hidden ' name= ' id ' value= ' @id '/>  <table> <tr><td> username: </td& Gt;<td><input type= ' text ' name= ' name ' value= ' @name '/></td><td></td></tr> <tr><td> Password: </td><td><input type= ' password ' name= ' password ' value= ' @password '/></ td><td></td></tr> <tr><td>e-mail:</td><td><input type= ' text ' n Ame= ' email ' value= ' @email '/></td><td></td></tr> <tr><td></td>< Td><input type= ' Submit ' value= ' submitted '/></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 =@ "Modify success <table> <tr><td> user name:</td><td> @name </td><td>& lt;/td></tr> <tr><td> password:</td><td> @password </td><td></td>< ;/tr> <tr><td>E-mail:</td><td> @email </td><td></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); }
}

Above is our main logic code, the realization of the function of course is to modify the information Ah, of course, in order to, simple, I only modified a few easy to modify the project, name, password, mail, other knowledge of the same, hehe.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More