JavaScript code for fetching list of items into a GridView

Question

I have a ASP.NET Web Application. On Page_Load a grid view with items is created. I also have a <asp:Textbox> and a search button. I am using PageMethods to get rid of the postback. The idea is that when the button is clicked it will call the javascript function and then it will call the WebMethod. The WebMethod returns a list of items based on the searched criteria.

How can I fetch these items and populate the GridView with them?

In other words it is something like a partial update - on button click it is supposed to update only the GridView.

Here is the code for the WebMethod:

[WebMethod]
    public static List<Item> SearchResults(string text)
    {
        ItemFunctions item_functions = new ItemFunctions();
        List<Item> items = new List<Item>();
        items = item_functions.searchResults(text);
        return items;
    }

And here is the GridView, the button and the textbox:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:TextBox ID="search_textbox" runat="server" />
        <input type="button" id="Button1" value="Search" onclick="SearchResults();" />
        <div id="searchResults_GridView" >
            <asp:GridView ID="GridView1" AllowPaging="true" GridLines="Both" runat="server" AllowSorting="True"
            AutoGenerateColumns="False"
            Width="740px"
            CausesValidation="False">
            <Columns>
                <asp:BoundField DataField="item_name" HeaderText="item_name" />
                <asp:BoundField DataField="item_description" HeaderText="item_description" />
                <asp:BoundField DataField="item_quantity" HeaderText="item_quantity" />
                <asp:BoundField DataField="category_name" HeaderText="category_name" />
                <asp:BoundField DataField="type_name" HeaderText="type_name" />
                <asp:BoundField DataField="item_available" HeaderText="item_available" />
                <asp:BoundField DataField="item_serial_number" HeaderText="item_serial_number" />
                <asp:BoundField DataField="item_permission_status" HeaderText="item_permission_status" />
                <asp:BoundField DataField="item_location" HeaderText="item_location" />
                <asp:CommandField ShowSelectButton="true" SelectText="View" />
            </Columns>
        </asp:GridView>
        </div>

This is the SearchResults functions that is called on button click:

<script>
    function SearchResults() {
        PageMethods.SearchResults(OnSucceeded, OnFailed);
    }

    function OnSucceeded(result, userContext, methodName) {
    }

    function OnFailed(error, userContext, methodName) {
        alert("An error occured :(");
    }
</script>

My javascript skills are very bad and I am still learning, otherwise in theory I think that the rest of the code should work.

Answer 1

You can do this in javascript, but at this point it would require you to dump the GridView's html (because after a GridView has rendered it is only HTML) and re-create a simply HTML Table. While this may be a preferred solution you will lose all data on a full postback and will be required to re-run the javascript.

You could look into using an UpdatePanel for this functionality. See the following links for help on using UpdatePanels :

http://msdn.microsoft.com/en-us/library/bb386454(v=vs.100).aspx

How do I use updatePanel in asp.net without refreshing all page?