How to reload asp.net GridView after jquery ajax call?

Question

I have GridView, textbox, an html button. What it does is the textbox contains a value that will be saved in the database after clicking the html button.

Here is the code for the page:

<div>
        <div id="Gridview-container">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type="button" id="btn" value="insert" />

    </div>
    </form>

    <script type="text/javascript">

        $("#btn").click(function () {
            var a = $("#TextBox1").val();

            $.ajax({
                url: 'WebService.asmx/insert',
                data: "{ 'name': '" + a + "' }",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                success: function () {

                    //alert('insert was performed.');
                    $("#Gridview-container").empty();


                }
            });

        });


    </script>

Here is the code behind of that page:

public partial class GridViewCourses : System.Web.UI.Page
{
    Database db = new Database();

    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.DataSource = db.LoadCourses();
        GridView1.DataBind();
    }
}

Here is the code for the webservice:

public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 

    }

    [WebMethod]
    public string HelloWorld() {

        return "Hello World";
    }

    [WebMethod]
    public void insert(string name)
    {
        Database db = new Database();
        db.Add(name);
    }



}

I want something that has the same effect as GridView.DataBind() so that when I perform delete and update the GridView is reloaded based on the record from the database.

Sir/Ma'am, your answers would be of great help. Thank you++

Solution 1

You could use an UpdatePanel and place the GridView in it. Then in order to raise a post-back from javascript you will have to use the __doPostBack and target your UpdatePanel.

Some information here that should help you implement this: http://encosia.com/easily-refresh-an-updatepanel-using-javascript/

Solution 2

You have to place your GridView inside an update panel & somehow refresh it from clientside. If you want to do everything clientside you can reinvent the wheel & use something like jTables & create your own grid but I will not recommend that

1. You can do either use __doPostback Javascript
2. Or place a hidden button field on your page & call its click event on your close button clientside like

document.getElementById('yourButton').click();

Comments

[Randel Ramirez]

thank you for the reply, I would just like to know if it's also possible to do without an update panel :D

[martinwnet]

Yes, but you would have to do a full postback (which I presumed you wouldn't want to do).

[martinwnet]

The insert method is located in the web service, (unless I'm missing something) this won't work.

[Randel Ramirez]

yes this won't work because I cannot access the gridview in the webservice so calling something like bind(GridView1); can't be done.