Question

I have JavaScript code that calls a method in ASP.NET. Basically, I have a SqlDataSource connected to a GridView, and I want to change the SelectCommand of the DataSource without causing a postback.

Right now, I am using __dopostback method, but as I said I don’t want the page to reload. I just want the GridView to update. Is this possible?

Answer 1

That’s not how is done. There are many approaches to this but the easiest is to enclose your content inside an UpdatePanel and drop a ScriptManager on your page.

for example:

<asp:ScriptManager id="mymanager" runat="server" />

<asp:UpdatePanel id="mainPanel" runat="server">
<ContentTemplate>

<! -- Put your content here -->

</ContentTemplate>
</asp:UpdatePanel>

Now all interactions on your page will be done via Ajax.

Better approach (the one I use currently)

Use jQuery to make your Ajax calls in conjunction with a Web Service.

Sample code:

[System.Web.Script.Services.ScriptService]
public class MyWebService: System.Web.Services.WebService
{
    [WebMethod]
    public List<BusinessObject> GetSomeData(int dataID)
    {
        //Invoke your business layer and get some data here
        List<BusinessObject> result = BusinessLayer.GetSomeData();
        return result;
    }
}

Using jQuery on the client-side, you can do something like this:

$.ajax({
    type: "POST",
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    url: "MyWebService.svc/GetSomeData",
    data: {'dataId': you_id_here },
    success: function(result) {
        //result.d will contain an array of BusinessObject in JSON format
        //You can iterate through this list and populate your html using this data.
        //You can either use jQuery templates
        //or one of the many jQuery plugins for tabular data.
        //I use datatables:
        //http://datatables.net/
        for(int i=0;i<result.d.length; i++)
        {
            //do something here if you want to iterate one by one constructing your
            //html
        }
    },
    error: function(xhr, ajaxOptions, thrownError) {
           //display error here
        });
    }
});

I highly recommend looking at these links:

1. http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/
2. http://encosia.com/simplify-calling-asp-net-ajax-services-from-jquery/