How to create simple Gridview using JQuery and Ajax?

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to create simple JQuery Gridview using Ajax.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">One of my friends asked me to add, edit and delete a record to html table like Gridview on client side without postback. I have chosen JQuery for this. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Using JQuery Gridview, user can able to Add, Edit and Delete a record without refreshing the page.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">For displaying the records like Gridview, i am getting the records as Json object from the server using Ajax and binding with the html table. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="line-height: 13.5pt;"> <span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><a href="http://www.jqueryjohn.com/search/label/AJAX"><span style="color: #720000;">Ajax</span></a><span class="apple-converted-space"> </span></span><span style="font-family: Verdana, sans-serif; font-size: 10pt;">used to connect with the server side without reloading the page.<u1:p></u1:p></span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 13.5pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">If the user wants to add new row, it opens new dialog window with the input fields. Just add the values and save it. Added data will append with the html table without refreshing the page.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">If the user wants to update a particular record, click the update image on the row. It opens dialog window, modify the values and save it.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">While calling AJAX method through JQuery, the method should be static and it should be web method.<u1:p></u1:p></span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">Advantage of having JQuery Gridview is, there is no postback for every operation. It increases performance also.<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <b><u><span style="font-family: Verdana, sans-serif; font-size: 10pt;">Example program:<o:p></o:p></span></u></b></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <b><u><span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></u></b></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 1.0pt 1.0pt 1.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="Head1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">="jquery-ui-1.10.3.custom.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">link</span> <span style="color: red;">href</span><span style="color: blue;">="jquery-ui-1.10.3.custom.css"</span> <span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            LoadPage();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                title: <span style="color: maroon;">"PopUp Title"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                autoOpen: <span style="color: blue;">false</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                height: 200,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                width: 300,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                modal: <span style="color: blue;">true</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#btnSave"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                DoOperation();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#btnCancel"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                DefaultMode();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> DefaultMode() {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog(<span style="color: maroon;">"close"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> AddUpdateMode() {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog(<span style="color: maroon;">"open"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> LoadPage() {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                url: <span style="color: maroon;">"AJAXTABLE.aspx/GetRecords"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                data: <span style="color: maroon;">"{}"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                success: <span style="color: blue;">function</span> successcall(response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">"#tblGrid"</span>).empty();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">"#tblGrid"</span>).prepend(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">""</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">""</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">""</span> + <span style="color: maroon;">"</th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">""</span> + <span style="color: maroon;">"</th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"<iimg src='add.png' onclick=\"AddMode() \"/>"</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"</tr>"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">"#tblGrid"</span>).append(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"ID"</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"Name"</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"Age"</span> + <span style="color: maroon;">"</th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"Update"</span> + <span style="color: maroon;">" </th>"</span> + <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"Delete"</span> + <span style="color: maroon;">"</th>"</span> + <span style="color: maroon;">"</tr>"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < response.d.length; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">"#tblGrid"</span>).append(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<td>"</span> + response.d[i].Id + <span style="color: maroon;">" </td>"</span> + <span style="color: maroon;">"<td>"</span> + response.d[i].Name + <span style="color: maroon;">" </td>"</span> + <span style="color: maroon;">"<td>"</span> + response.d[i].Age + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"<td>"</span> + <span style="color: maroon;">"<iimg src='update.png' onclick=\"UpdateMode("</span> + response.d[i].Id + <span style="color: maroon;">",'"</span> + response.d[i].Name + <span style="color: maroon;">"',"</span> + response.d[i].Age + <span style="color: maroon;">")\" />"</span> + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"<td>"</span> + <span style="color: maroon;">"<iimg src='delete.png' onclick=\"DeleteMode("</span> + response.d[i].Id + <span style="color: maroon;">",'"</span> + response.d[i].Name + <span style="color: maroon;">"',"</span> + response.d[i].Age + <span style="color: maroon;">")\" />"</span> + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"</tr>"</span>); <o:p></o:p></span><span style="color: darkgreen; font-family: Consolas; font-size: 9.5pt;">//replace iimg to img</span><br /> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="color: darkgreen; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> </div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                },<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                error: <span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    alert(<span style="color: maroon;">"Error"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> DoOperation() {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span> hidvalue = $(<span style="color: maroon;">"#hdnMode"</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">if</span> (hidvalue == <span style="color: maroon;">"Add"</span>) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> pID = <span style="color: maroon;">"0"</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> name = $(<span style="color: maroon;">'#txtName'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> age = $(<span style="color: maroon;">'#txtAge'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">else</span> <span style="color: blue;">if</span> (hidvalue == <span style="color: maroon;">"Update"</span>) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> name = $(<span style="color: maroon;">'#txtName'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> age = $(<span style="color: maroon;">'#txtAge'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> pID = $(<span style="color: maroon;">'#hdnPkid'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">else</span> <span style="color: blue;">if</span> (hidvalue == <span style="color: maroon;">"Delete"</span>) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> name = <span style="color: maroon;">""</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> age = <span style="color: maroon;">""</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> pID = $(<span style="color: maroon;">'#hdnPkid'</span>).val();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                url: <span style="color: maroon;">"AJAXTABLE.aspx/DoOperation"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                data: <span style="color: maroon;">"{'Id':'"</span> + pID + <span style="color: maroon;">"','Name': '"</span> + name + <span style="color: maroon;">"','Age':'"</span> + age + <span style="color: maroon;">"','HidMode':'"</span> + hidvalue + <span style="color: maroon;">"' }"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">if</span> (response.d == <span style="color: blue;">true</span>) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">'#hdnPkid'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        DefaultMode();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        LoadPage();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">else</span> {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        alert(<span style="color: maroon;">"Failure!!!"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> AddMode() {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            AddUpdateMode();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtName'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtAge'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Add"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> UpdateMode(Id, Name, Age) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            AddUpdateMode();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Update"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtName'</span>).val(Name);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtAge'</span>).val(Age);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#hdnPkid'</span>).val(Id);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span> DeleteMode(Id, Name, Age) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Delete"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#hdnPkid'</span>).val(Id);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">if</span> (confirm(<span style="color: maroon;">"Do you want to delete this record"</span>)) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                DoOperation();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">style</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span> <span style="color: maroon;">table</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>: <span style="color: blue;">300px</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">border</span>: <span style="color: blue;">1px</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span> <span style="color: maroon;">table</span> <span style="color: maroon;">td</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>: <span style="color: blue;">60px</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">color</span>: <span style="color: blue;">Red</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">text-align</span>: <span style="color: blue;">center</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span> <span style="color: maroon;">table</span> <span style="color: maroon;">th</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>: <span style="color: blue;">60px</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">color</span>: <span style="color: blue;">Green</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">text-align</span>: <span style="color: blue;">center</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">style</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="ParentContent"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">table</span> <span style="color: red;">id</span><span style="color: blue;">="tblGrid"</span> <span style="color: red;">border</span><span style="color: blue;">="1px"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="PopupContent"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="lblName"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Name"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span> <span style="color: red;">style</span><span style="color: blue;">="</span><span style="color: red;">width</span><span style="color: blue;">: 50%"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="txtName"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="lblAge"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Age"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="txtAge"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnSave"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Save"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnCancel"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Cancel"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">input</span> <span style="color: red;">id</span><span style="color: blue;">="hdnMode"</span> <span style="color: red;">type</span><span style="color: blue;">="hidden"</span> <span style="color: red;">name</span><span style="color: blue;">="hdnMode"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">input</span> <span style="color: red;">id</span><span style="color: blue;">="hdnPkid"</span> <span style="color: red;">type</span><span style="color: blue;">="hidden"</span> <span style="color: red;">name</span><span style="color: blue;">="hdnPkid"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <u style="line-height: 14.4pt;"><span style="font-family: Verdana, sans-serif; font-size: 10pt;">Code behind:</span></u></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <u style="line-height: 14.4pt;"><span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></u></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 1.0pt 1.0pt 1.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">namespace</span><span style="font-family: Consolas; font-size: 9.5pt;"> JqueryJohn_sample<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;">public</span> <span style="color: blue;">partial</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">AJAXTABLE</span> : System.Web.UI.<span style="color: #2b91af;">Page</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">protected</span> <span style="color: blue;">void</span> Page_Load(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">EventArgs</span> e)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        [System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: #2b91af;">clsTSample</span>[] GetRecords()<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">clsTSample</span>> obj = <span style="color: blue;">new</span> <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">clsTSample</span>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">DataTable</span> dt = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataTable</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlConnection</span> con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=---;Initial Catalog=dbname;User ID=---;Password=---;"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            con.Open();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select * from TSample"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlDataAdapter</span> da = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            da.Fill(dt);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            con.Close();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">clsTSample</span> ClsObj = <span style="color: blue;">null</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">foreach</span> (<span style="color: #2b91af;">DataRow</span> tblerow <span style="color: blue;">in</span> dt.Rows)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj = <span style="color: blue;">new</span> <span style="color: #2b91af;">clsTSample</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Id = <span style="color: #2b91af;">Convert</span>.ToInt32(tblerow[<span style="color: #a31515;">"Id"</span>]);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Name = tblerow[<span style="color: #a31515;">"Name"</span>].ToString();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Age = <span style="color: #2b91af;">Convert</span>.ToInt32(tblerow[<span style="color: #a31515;">"Age"</span>]);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                obj.Add(ClsObj);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span> obj.ToArray();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        [System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">bool</span> DoOperation(<span style="color: blue;">string</span> Id, <span style="color: blue;">string</span> Name, <span style="color: blue;">string</span> Age, <span style="color: blue;">string</span> HidMode)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">try</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: #2b91af;">SqlConnection</span> con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=----;Initial Catalog=dbname;User ID=--;Password=---;"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                con.Open();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">if</span> (HidMode == <span style="color: #a31515;">"Add"</span>)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"insert into TSample (Name, Age) values('"</span> + Name + <span style="color: #a31515;">"','"</span> + Age + <span style="color: #a31515;">"')"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">else</span> <span style="color: blue;">if</span> (HidMode == <span style="color: #a31515;">"Update"</span>)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">int</span> SId = <span style="color: #2b91af;">Convert</span>.ToInt32(Id);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"update TSample set Name='"</span> + Name + <span style="color: #a31515;">"', Age='"</span> + Age + <span style="color: #a31515;">"' where id='"</span> + SId + <span style="color: #a31515;">"'"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">else</span> <span style="color: blue;">if</span> (HidMode == <span style="color: #a31515;">"Delete"</span>)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">int</span> SId = <span style="color: #2b91af;">Convert</span>.ToInt32(Id);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"delete from TSample where id='"</span> + SId + <span style="color: #a31515;">"'"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">true</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">catch</span> (<span style="color: #2b91af;">Exception</span> ex)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;">public</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">clsTSample</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">int</span> Id { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">string</span> Name { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">int</span> Age { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div class="MsoNormal" style="line-height: 14.4pt;"> <br /></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;">The above code tested successfully and it works fine.<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: 14.4pt;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div> <br /> <div class="MsoNormal" style="line-height: 14.4pt;"> <u><span style="color: #595959; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #595959; mso-style-textfill-fill-colortransforms: "lumm=65000 lumo=35000"; mso-style-textfill-fill-themecolor: text1; mso-themecolor: text1; mso-themetint: 166;">Create gridview dynamically using jquery,  Add, edit and delete data on gridview using jquery, create simple gridview using jquery, bind data to table or gridview using jquery,  perform operation on gridview without postback using jquery. </span></u><u><span style="color: #595959; font-family: Consolas; font-size: 9.5pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #595959; mso-style-textfill-fill-colortransforms: "lumm=65000 lumo=35000"; mso-style-textfill-fill-themecolor: text1; mso-themecolor: text1; mso-themetint: 166;"><o:p></o:p></span></u></div> </div> </div>

How to create simple Gridview using JQuery and Ajax?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to create simple JQuery Gridview using Ajax. On...

Read more »

How to read and get JSON data using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to read and get JSON data </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and AJAX</span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">JSON is nothing but text format that is easy to read and write. It’s like XML, fast and easy to parse.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">JSON is lightweight text interchange format, smaller than XML.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">When the document is ready, use AJAX request to read and Get the JSON values.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">Specify type as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">POST</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’ and datatype as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">json</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’.</span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Success parameter takes JSON data. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <span style="color: maroon;">')'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < jsonval.length; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">               <span style="color: blue;">var</span> city = jsonval[i].City_Name;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: Verdana, sans-serif; font-size: 13px;">In the below example, I am converting dataset values into JSON.</span><br /> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;"><br /></span></u></b> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Example program:<o:p></o:p></span></u></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="Head1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#btnReadGetJson'</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                $.ajax({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    url: <span style="color: maroon;">"ReadXml.aspx/GetJsonData"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">"#divArea"</span>).html(<span style="color: maroon;">"<b><u>Cities retreived from the database are</u></b><br />"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> city = <span style="color: maroon;">""</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <span style="color: maroon;">')'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">var</span> citylength = jsonval.length;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;">if</span> (citylength > 0) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            <span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < citylength; i++) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                                <span style="color: blue;">var</span> city = jsonval[i].City_Name;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                                $(<span style="color: maroon;">"#divArea"</span>).append(<span style="color: maroon;">'<li>'</span> + city + <span style="color: maroon;">'<li>'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    },<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    error: <span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        alert(<span style="color: maroon;">"Failure"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="divArea"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnReadGetJson"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Read & Get JSON Data"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">br</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Code behind:<o:p></o:p></span></u></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> [System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">string</span> GetJsonData()<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlConnection</span> con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=192.169.1.151;Initial Catalog=Example;User ID=sa;Password=welcome3#;"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       con.Open();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlCommand</span> cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select City_Name from City"</span>, con);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">SqlDataAdapter</span> da = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: #2b91af;">DataTable</span> ds = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataTable</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       da.Fill(ds);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: blue;">string</span> obj = GetJson(ds);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: blue;">return</span> obj;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <br /></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">static</span> <span style="color: blue;">string</span> GetJson(<span style="color: #2b91af;">DataTable</span> dt)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span> serializer = <span style="color: blue;">new</span> System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">List</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>> rows = <span style="color: blue;">new</span> <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Dictionary</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>> row = <span style="color: blue;">null</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">foreach</span><span style="font-family: Consolas; font-size: 9.5pt;"> (<span style="color: #2b91af;">DataRow</span> dr <span style="color: blue;">in</span> dt.Rows)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                row = <span style="color: blue;">new</span> <span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">foreach</span> (<span style="color: #2b91af;">DataColumn</span> col <span style="color: blue;">in</span> dt.Columns)<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    row.Add(col.ColumnName.Trim(), dr[col]);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                rows.Add(row);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">return</span><span style="font-family: Consolas; font-size: 9.5pt;"> serializer.Serialize(rows);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above program reads the JSON data and updates with the page without postback via JQuery AJAX.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Read Json data using jquery, jquery to read Json data, how to read and parse Json data, load Json data using Jquery Ajax, retrieve data from Json using jquery<o:p></o:p></span></u></div> </div>

How to read and get JSON data using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to read and get JSON data using Jquery and AJAX .   ...

Read more »