Asp grid view in web method and jquery

Question

1.00/5 (1 vote)

See more:

I try to use asp gridview for this i try webmethod and jquery to fetch data from database now when i use html gridview like this

What I have tried:

then gridview is display on page but when i use asp gridview like this

ASP.NET

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
    GridLines="None" onpageindexchanging="GridView1_PageIndexChanging" 
    onselectedindexchanged="GridView1_SelectedIndexChanged"  
    AutoGenerateColumns="False" AllowPaging="True"  OnRowCommand="GridView1_select"
    onrowdatabound="GridView1_RowDataBound">
    <AlternatingRowStyle BackColor="White" />
    <EditRowStyle BackColor="#7C6F57" />
    <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#E3EAEB" />
    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F8FAFA" />
    <SortedAscendingHeaderStyle BackColor="#246B61" />
    <SortedDescendingCellStyle BackColor="#D4DFE1" />
    <SortedDescendingHeaderStyle BackColor="#15524A" />
    <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID"/>  
    <asp:BoundField DataField="OwnerName" HeaderText="OwnerName"/> 
    <asp:BoundField DataField="RegNo" HeaderText="RegNo"/> 
    <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="lbViewChart" Text="View Chart" CssClass="lbViewChart"  runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

but grid is not display on page ..

Jquery code

<script type="text/javascript">

JavaScript

$(function () {
    $('[ID*=search_data]').on('click', function () {
        var fromdate = $('[ID*=fromdate]').val();
        var todate = $('[ID*=todate]').val();
        var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
        var GridView1 = $('[ID*=GridView1]');
        var obj = {};
        obj.fromdate = fromdate;
        obj.todate = todate;
        obj.regiondrop = regiondrop;
        Getdataa(obj);
        return false;
    });
});
  function Getdataa(obj) {
            $.ajax({
                type: "POST",
                url: "WebForm1.aspx/search_data",
    data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function (result) {
                    var final = JSON.parse(result.d).response;
                    console.log(JSON.parse(result.d).response)
                    $("#GridView1").empty();
                    if (final.length > 0) {
                        $("#GridView1").append(
                   "<tr><th>ID</th><th>OwnerName</th;");
                        for (var i = 0; i < final.length; i++) {
                            if (final[i] !== null) {
                                $("#GridView1").append("<tr><td>" +
                               final[i][0] + "</td> <td>" +
                               final[i][1] + "</td> <td>" +

                            }
                        }
                    }
                    else {
                        $("#GridView1").hide();
                        $("#Label4").text("No Data");
                    }
                },
                error: function (error) {
                    alert("error");

                }
            });
        }

so is this possible to use asp grid view ? ANY solution?

Posted 17-Jul-16 20:37pm

super_user

Updated 18-Jul-16 1:15am

v2

Add a Solution

Comments

F-ES Sitecore 18-Jul-16 4:35am

A gridview is a server-side component that generates a table in the client html. It's not a client-side control that you can interact with. If you want to update the data using jquery then don't use a gridview, just use a standard html table. You won't get the server-side functionality that a gridview provides though.

super_user 18-Jul-16 5:24am

if i use html table like this <table>
<tr>
<th>Firstname</th>
</tr>
<tr>
<td>Jill</td>
</tr>
</table>
then i dont want to insert data manually i fetch data from database so what i write instead of first name and jill

F-ES Sitecore 18-Jul-16 6:05am

Generate the html using asp:Repeater. Google "asp.net build html table with repeater" and you'll probably find examples.

super_user 18-Jul-16 6:33am

hi.. when i add this .. <asp:Repeater ID="gridata" runat="server">
<HeaderTemplate>
<table cellspacing="0" rules="all" border="1">
<tr>
<th>
</th>

</tr>
</HeaderTemplate>
<itemtemplate>
<tr>
<td>
</td>
</tr>

<footertemplate>
</table>

then this repeater not display on page

F-ES Sitecore 18-Jul-16 6:40am

You need to give the repeater a datasource and call databind

http://www.aspsnippets.com/Articles/Display-and-render-Repeater-control-as-HTML-Table-Layout-in-ASPNet.aspx

super_user 18-Jul-16 7:15am

i already bind in jquery.. if you check jquery which i posted and this is the webmethod..

[WebMethod]
public static string search_data(DateTime fromdate, DateTime todate, string regiondrop)
{
try
{
string result = "";
TrackDataEntities1 ts = new TrackDataEntities1();

var dq = (from table name ........ .. .ToList();
DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("OwnerName", typeof(string));
foreach (var c in dq)
{
dt.Rows.Add(c.ID, c.ownername);
}

result = DataSetToJSON(dt);

return result;
}
catch (Exception)
{
throw new Exception();

}

}
public static string DataSetToJSON(DataTable dt)
{

Dictionary<string, object=""> dict = new Dictionary<string, object="">();

object[] arr = new object[dt.Rows.Count + 1];

for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
arr[i] = dt.Rows[i].ItemArray;
}

dict.Add("response", arr);

JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
}

super_user 18-Jul-16 7:16am

and your link did not help

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)