ASP. NET uses jquery for data binding and paging

Source: Internet
Author: User

Use jquery to implement data binding and paging for server-side data presentation controls such as GridView, Repeater, and so on. The focus of this article is on how data is implemented for data binding.

Content

The power and usability of jquery has made it fast and popular. Microsoft also released a patch that enabled VS to support the smart sense of jquery. Because of the complexity of controls such as Gridview,repeater, it is almost impossible to assign a value to the client through JavaScript. But we don't want to give up the power and convenience that these controls provide, especially because we're used to using these controls to show a lot of data. So if you can combine jquery with the GridView, that should be a very cool thing.

I have recently preferred to use the Repeater control, so here is a repeater to show the results of the query.

First, define the individual fields on the page that the control displays:

        <asp:placeholder id= "Specialredeemplaceholder" runat= "Server" visible= "false" > <table id= "spe                    Cialredeeminfo "> <caption> search Results </caption> <thead>                                                <tr> <th> Prize name </th> <th> name </th>                        <th> Beauty Consultant number </th> <th> quantity </th> <th> Required points </th> <th> dates </th> <th> status </t                   h> <th></th> </tr> </thead> <tbody> <asp:repeater id= "Rptspecialredeeminfo" runat= "Server" enableviewstate= "FAL Se "onitemdatabound=" rptspecialredeeminfo_itemdatabound "> <itemtem               Plate>             &LT;TR class= "Item" > <td><%# Eval ("PartName")%></td> <td><%# Eval ("Consultantname")%></td> &LT;TD ><%# eval ("Consultantid")%></td> <td><%# eval ("Quantity")%></ td> <td><%# Eval ("Pointcost")%></td> &L t;td><%# eval ("Insertedtime")%></td> <td><%# eval ("Displaystatus")% ></td> <td><input id= "Btnproce SS "type=" button "runat=" Server "/></td> & Lt;/tr> </ItemTemplate> </asp:repeater&gt                   ; </tbody> </table> </asp:PlaceHolder> 

Because an AJAX query is implemented, you can set repeater enableviewstate= "false". This placeholder defines the format in which the data is displayed, not where it appears on the page. So you need to define a location to display the results of the query, where a div is defined

        <div id= "QueryResult" >                                               </div>

OK, when the client handles the query event, you can take advantage of the jquery load method:

        $ ("#queryResult"). Load ("Specialredeemmanagement.aspx #specialRedeemInfo",
                         {Func: "Search", Consultantid:consultantid},//individual parameters
                           Ajaxcomplete);   This JS is called when the query is complete

The server side can obtain individual parameters by request.params["Func". When handling this query event, first

Specialredeemplaceholder.visible = true; Set the visible=true of placeholder

Then bind the data to the repeater (it is too simple to paste the code). (Onitemdatabound This event is still valid)

Then write this palcecontrol to the response stream:

StringWriter tw = new StringWriter ();
Simple Rendering-just write the control to the text writer//* * * works well for single controls without container Shtml32textwriter writer = new Html32TextWriter (TW); This.specialRedeemPlaceHolder.RenderControl (writer); writer. Close (); Response.Write (TW. ToString ()); Response.End ();
Explain this sentence: $ ("#queryResult"). Load ("Specialredeemmanagement.aspx #specialRedeemInfo",

Adding "#specialRedeemInfo" will make jquery get only the part of the control that returns the ID specialredeeminfo in the response. The advantage is that in a query, you can return multiple control flows for display, if needed.

In addition, one more thing to do is to rewrite a method:

public override void Verifyrenderinginserverform (Control control) {    //base. Verifyrenderinginserverform (control);}
As to what this method is to do, hehe, have an interest to check it yourself

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.