如何在Web服务调用后重新绑定gridview?

时间:2013-11-27 16:01:53

标签: jquery gridview

我有一个页面,其中有一个放置在更新面板中的GridView。 GridView中的每一行都有一个更新按钮,当单击时,将弹出一个模态对话框,您可以在其中编辑相应的行并通过Web服务调用将记录保存到数据库。以下是aspx和jquery代码。我的问题,如何更新记录后重新加载GridView?我尝试了__doPostBack,它似乎没有用。

<div id="dvMainContainer">
        <asp:UpdatePanel ID="upMainPanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
            <ContentTemplate>

                <table summary="content" id="Table3">
                    <tr> 
                        <td>   
                            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                                AllowSorting="false" AutoGenerateColumns="False" PageSize="20" 
                                onpageindexchanging="GridView1_PageIndexChanging">
                            <Columns>
                                <asp:TemplateField >
                                    <ItemTemplate>
                                        <div><input type="button" value="update" /></div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField >
                                    <HeaderTemplate>Vendor<br />
                                        <asp:DropDownList ID="ddlVendor" runat="server" AutoPostBack="true" AppendDataBoundItems="true" OnSelectedIndexChanged="OnVendorChanged">
                                            <asp:ListItem Text="- Select a Vendor -" Value=""></asp:ListItem>
                                        </asp:DropDownList>
                                    </HeaderTemplate>
                                    <ItemTemplate><%#Eval("Vendor") %></ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Name" >
                                    <ItemTemplate><%#Eval("Name")%></ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description" >
                                    <ItemTemplate><%#Eval("Description")%></ItemTemplate>                
                                </asp:TemplateField>
                            </Columns>
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </div>

    <div id="dvUpdatePrompt" style="display: none;" runat="server">
        <table>
            <tr>
                <td>Vendor:</td>
                <td><select name="VendorList" id="VendorList"></select></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" id="txtName"/></td>
            </tr>
            <tr>
                <td>Description:</td>
                <td><input type="text" id="txtDescription"/></td>             
            </tr>
        </table>
    </div>

    this.BindEvents = function () {
        var myself = this;

        $(myself.get_element()).find("input[value='update']").each(
            function () {
                var input = $(this);

                if (input.closest('tr').find('td')[1].innerText.replace('&nbsp;', '') != '') {
                    input.click(
                        function () {
                            myself.UpdateButtonClicked(this);
                        }
                    );
                }
                else {
                    input.attr('disabled', 'disabled');
                }
            }
        );
    }
    this.UpdateButtonClicked = function (button) {
        var myself = this;
        var btns = {};
        var Vendor = "";
        var Name = "";
        var Description = "";

        …
        btns["Save"] = function () {
            myself.UpdateVendor(button);                   
        };

        btns["Cancel"] = function () { $("#dvUpdatePrompt").dialog('close'); };

        …
        $("#dvUpdatePrompt").dialog({
            modal: true,
            buttons: btns,
            width: 500,
            height: 300
        });
    }

    this.UpdateVendor = function (button) {
        var myself = this;

        …
        var parmIn = "…";

        myself.Utilities.CallWebService('WebService.asmx/UpateVendor', parmIn,
            function (result) {
                $("#dvUpdatePrompt").dialog('close');
                //TODO rebind GridView1
                __doPostBack('$("#upMainPanel")', '');
            }
        );
    }

更新:我添加了以下按钮和触发器,我调用了click(),但似乎没有用。

<div id="dvMainContainerTonnyMadeUp">
        <asp:Button ID="btnReBind" runat="server" Text="ReBind" Visible="false" />
        <asp:UpdatePanel ID="upMainPanel" runat="server" RenderMode="Inline" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnReBind" EventName="click"/>
            </Triggers>

myself.Utilities.CallWebService('DBMaintenanceService.asmx/UpateXrefProductCode', parmIn,
            function (result) {
                $("#dvUpdatePrompt").dialog('close');
                //TODO rebind GridView1
                $("#btnReBind").click();
            }

1 个答案:

答案 0 :(得分:1)

由于您已经在更新面板中包装了gridview,因此一个快速的解决方案就是拥有一个按钮(比如刷新)。

指定此按钮作为gridview的触发器。在服务调用完成后,在jquery代码中的此按钮上调用click()

<asp:UpdatePanel ID="upMainPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnRefresh" />
</Triggers>
...
<asp:Button ID="btnRefresh" style="display:none;" UseSubmitBehavior="false" runat="server" OnClick="btnRefresh_Click" />
<asp:GridView...
...

在您的代码中:

Protected Sub btnRefresh_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnRefresh.Click
    'Your routine to populate / databind gridview
End Sub

注意:只有在以编程方式对gridview进行数据绑定时才需要上述处理程序。

在你的javascript / jquery代码中:

function callRefresh() {
    // if your clientid mode is static then
    document.getElementById('btnRefresh').click();
    // otherwise if id is mangled then something like this
    document.getElementById('ctl00_ContentPlaceHolder1_btnRefresh').click();
}

作为触发器,按钮单击将导致部分回发,从而导致页面生命周期在服务器上运行。如果您在标记中使用数据源(或在init中进行数据绑定),则无需执行任何操作。否则,在按钮服务器中单击,您需要再次数据化gridview。