jquery ajax调用后如何重新加载asp.net GridView？答案

【问题标题】：How to reload asp.net GridView after jquery ajax call?jquery ajax调用后如何重新加载asp.net GridView？
【发布时间】：2012-10-08 12:17:15
【问题描述】：

我有 GridView、文本框、一个 html 按钮。它的作用是文本框包含一个值，单击 html 按钮后将保存在数据库中。

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>

这是该页面背后的代码：

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();
    }
}

这是网络服务的代码：

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);
    }



}

我想要与 GridView.DataBind() 具有相同效果的东西，这样当我执行删除和更新时，GridView 会根据数据库中的记录重新加载。

先生/女士，您的回答会很有帮助。谢谢++

【问题讨论】：

标签： asp.net web-services jquery webforms

【解决方案1】：

您可以使用UpdatePanel 并将GridView 放入其中。然后，为了从 javascript 发起回发，您必须使用 __doPostBack 并定位您的 UpdatePanel。

这里的一些信息可以帮助您实现这一点：http://encosia.com/easily-refresh-an-updatepanel-using-javascript/

【讨论】：

感谢您的回复，我想知道是否也可以不使用更新面板：D
是的，但你必须做一个完整的回发（我猜你不想这样做）。

【解决方案2】：

您必须将 GridView 放在更新面板中并以某种方式从客户端刷新它。如果你想在客户端做所有事情，你可以重新发明轮子并使用 jTables 之类的东西并创建自己的网格，但我不建议这样做

你可以使用__doPostbackJavascript
或者在您的页面上放置一个隐藏按钮字段并在您的关闭按钮客户端调用其点击事件，例如

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

【讨论】：

【解决方案3】：

您在单独的方法中编写 gridview 绑定代码。像这样

public void dataBind()

{

GridView1.DataSource = db.LoadCourses();
GridView1.DataBind();

}

[WebMethod]
public void insert(string name)
{
    Database db = new Database();
    db.Add(name);
    //after successful insertion call dataBind

    dataBind() //this method will update the grdivew with new data

}

如果需要，可以在代码隐藏中将 webmethod 定义为 pagemethod。

希望这会有所帮助..

【讨论】：

insert 方法位于 Web 服务中，（除非我遗漏了什么）这不起作用。
是的，这是行不通的，因为我无法访问 web 服务中的 gridview，所以调用类似 bind(GridView1);做不到。

【解决方案4】：

我意识到它有点旧的论坛。但是，我在按钮上使用 UseSubmitBehavior = false 。当然，使按钮成为 asp:Button。并且，声明 Onclick 和 OnClientClcik 事件。这样，它会先触发 onclientclick 事件，然后触发 onclick 事件。

斯里

【讨论】：

【解决方案5】：

将下面的行添加到 jQuery 的末尾：

$("#YourGridView").load(location.href + " #YourGridView");

【讨论】：