ajax with page method

I have a gridview inside an updatepanel and I have a javascript that calls a page method using jquery. I’d like the page method to refresh the gridview based on the parameter it receives from the ajax call.

So far, I have the following:

1) in the javascript, there’s a function that calls the page method:

function GetNewDate(thedateitem) {

    DateString = (valid json date format that works)

    $.ajax({
        type: "POST",
        url: "./CallHistory.aspx/ResetDate",
        contentType: "application/json; charset=utf-8",
        data: DateString,
        dataType: "json",
        success: successFn,
        error: errorFn
    }) 
};

2) In the aspx page I have:

    <asp:UpdatePanel ID="MyPanel" runat="server">
        <ContentTemplate>
                <asp:GridView ID="MyGrid">

3) In the code behind:

public partial class Pages_CallHistory : System.Web.UI.Page
{
    List<ViewCallHistoryModel> TheCallHistory;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            TheDate = new DateTime(2011, 1, 13);
            LoadCallHistory(TheDate);
            MyGrid.Datasource = TheCallHistory;
            MyGrid.Databind;
        }
    }

    protected void LoadCallHistory(DateTime TheDate)
    {
        linq query that fills the variable TheCallHistory
    }

    [WebMethod]
    public static void ResetDate(DateTime TheNewDate)
    {
        var test = new Pages_CallHistory();
        var test2 = test.LoadCallHistory(TheNewDate.Date);
        //test2 loads fine

        test.GridCallHistory.DataSource = test2; 
        //this is not underlined but bugs at runtime
        //Object reference not set to an instance of an object.

        test.GridCallHistory.DataBind();
        test.MyPanel.Update(); 
        //this is not underlined but doesn't get executed because
        //because it stops at the line above

        //I'd like to update the content of 
        //the gridview on the page with the updated gridview.
    }

What I’d like to do in the page method is 1) call LoadCallHistory with the new date parameter and 2) tell the gridview MyGrid to rebind with the new data that’s in TheCallHistory.

I’m struggling with this page method; it’s not working and I’m stuck. How is this done?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

ok so the solution is to use _doPostBack in javascript:

   __doPostBack('MyPanel', DateString);

The page method is for sending and receiving data only, not for doing postbacks on updatepanels.

Method 2

Take a look at my answer to this related question here. In short, you create a new instance of the grid and capture its output manually.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0