asp.net 从Gridview单击按钮时UpdatePanel UI未更新

6g8kf2rb  于 2023-03-31  发布在  .NET
关注(0)|答案(1)|浏览(234)

当从gridview中单击链接按钮时,我的updatepanel的UI没有更新。我想要更新的Updatepanel不在gridview中。所以这是我的代码:

<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server">
 </asp:ScriptManager>

//<asp:GridView ID="attendanceGv" runat="server" CssClass="table table-striped table-bordered" AutoGenerateColumns="False" ShowHeader="False" OnRowDataBound="GridViewRowEventHandler" > //  I tried this with regular onlick but it did not work.
<asp:GridView ID="attendanceGv" runat="server" CssClass="table table-striped table-bordered" AutoGenerateColumns="False" ShowHeader="False" OnRowDataBound="GridViewRowEventHandler" OnRowCommand="GridView1_RowCommand"> 
  <Columns>
 <asp:BoundField DataField="Field1" SortExpression="Field1" ItemStyle-Width="8%" />
 <asp:TemplateField>
  <ItemTemplate>
  //  <asp:LinkButton ID="expandLBtn" runat="server" OnClick="expandLBtn_Click"><i class="fa-solid fa-arrow-right">
  </i></asp:LinkButton> // I tried this with the onclick command and trigger. (Also without the trigger)
<asp:LinkButton ID="expandLBtn" runat="server" CommandName="UpdateTextBox"
 CommandArgument='<%# Eval("nyeis_id") %>' ><i class="fa-solid fa-arrow-right">
  </i></asp:LinkButton>
  </ItemTemplate>
 </asp:TemplateField>
  </Columns>
</asp:GridView>

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
 <div class="row ">
  <div class=" col-12">
<asp:Label ID="Label2" CssClass="form-control" runat="server" Text="test1" Style="text-align: center;" Font-Bold="True" ></asp:Label> 
  </div>
 </div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="attendanceGv" EventName="RowCommand" /> // without this trigger, i kept getting regular post back. With this trigger I get Async but the UI does not update. 
 //<%--  <asp:AsyncPostBackTrigger ControlID="expandLBtn" EventName="Click" />--%> // tried this with the regular click event. 
</Triggers>
</asp:UpdatePanel>

C#:这是我在使用onclick时所做的

protected void expandLBtn_Click(object sender, EventArgs e)
        {

            GridViewRow row = (GridViewRow)((LinkButton)sender).NamingContainer;

           
            HtmlControl FlagAttendanceDetailsCol = (HtmlControl)attendanceDetailsCol.FindControl("attendanceDetailsCol");
            UpdatePanel FlagUpdatePanel2 = (UpdatePanel)FlagAttendanceDetailsCol.FindControl("UpdatePanel2");
            System.Web.UI.WebControls.Label FlagLabel2 = (System.Web.UI.WebControls.Label)FlagUpdatePanel2.FindControl("Label3");
            FlagLabel2.Text="test";

            Label2.Text = "New value2";
            UpdatePanel2.Update();
        }

C#:这是我在使用GridViewCommandEventArgs时尝试的

if (e.CommandName == "UpdateTextBox")
        {

            int rowIndex = Convert.ToInt32(e.CommandArgument);

            LinkButton FlagExpandLBtn = attendanceGv.Rows[rowIndex].FindControl("expandLBtn") as System.Web.UI.WebControls.LinkButton;
            ScriptManager1.RegisterAsyncPostBackControl(FlagExpandLBtn);

            // Here, you can retrieve the data associated with the row that contains the clicked button and
            // perform any necessary data operations.
            System.Web.UI.WebControls.Label txtBox2 = UpdatePanel2.FindControl("Label2") as System.Web.UI.WebControls.Label;
            System.Web.UI.WebControls.Label txtBox3 = UpdatePanel2.FindControl("Label3") as System.Web.UI.WebControls.Label;
            if (txtBox2 != null)
            {
                txtBox2.Text = "test2";
                // call the Update method on the UpdatePanel
            //    Label2.Text = "New value"; // Update the TextBox in the other UpdatePanel.
                attendanceDetailsCol.Visible = true;
               
            }
            if (txtBox3 != null)
            {
                txtBox3.Text = "test3";
                // call the Update method on the UpdatePanel
            //    Label3.Text = "New value"; // Update the TextBox in the other UpdatePanel.
                attendanceDetailsCol.Visible = true;

            }

            string test = Label2.Text;
            string test2 = Label3.Text;

            UpdatePanel2.Update();

        }

我试着调试,我没有得到任何错误,在我到达updatepanel2.update部分之前,文本框显示它被更改了,但它从未在UI中显示。

myzjeezk

myzjeezk1#

编辑:这可以工作!

好的,问题当然是按钮和gv在向上的外面。
作为一个“正常”规则,您可以让页面上的任何按钮触发更新面板。
但是,在gridview内部?否,因为更新面板需要:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ID"
    CssClass="table" Width="60%" ShowHeaderWhenEmpty="true">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" HtmlEncode="false" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" HtmlEncode="false" />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Province" HeaderText="Province" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="Button1" runat="server" Text="This row"
                    OnClick="Button1_Click" />
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>


<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <h3>Inside up <%= DateTime.Now.ToString() %></h3>

        Row click =
        <asp:TextBox ID="txtRowClick" runat="server"></asp:TextBox>

    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="onclick" />
    </Triggers>
</asp:UpdatePanel>

注意ControlID的设置。如果触发按钮不在GV内部,那就可以工作。
有几种方法,但如果你的GV只有那个按钮,还是其他几个?
然后,您可以将整个网格视图定义为触发器。
那么,这将起作用:

<Triggers>
                <asp:AsyncPostBackTrigger ControlID="Gridview1" />
            </Triggers>

所以,你说触发器是整个GV,你没有指定事件。
所以,下一个问题,它没有明确的海报,如果链接按钮点击工作或没有?
以下是对此的解决方案:
另一条可能的路?
将GV也放置在更新面板中。
当你这样做的时候,该页面上的所有面板都将被发送到服务器。所以,理论上,你所需要的只是GV中的一个工作按钮。如果你把GV放在同一个更新面板中,甚至是一个单独的面板,那么这也会起作用,因为默认情况下所有更新面板都被发送回服务器。结果是代码可以使用,修改任何up中的任何控件。
然而,下面的叙述仍然可以提供帮助,因为我经常看到链接按钮不起作用,下面解释了这个问题的解决方法:
首先,尝试转储命令名的使用。
只需在expandLBtn按钮上添加一个onclick事件(它是一个链接按钮,但您仍然可以有一个onclick事件)。
因此,按钮(链接按钮)看起来像这样:

<ItemTemplate>
                <asp:LinkButton ID="expandLBtn" runat="server"                         
                    CommandArgument='<%# Eval("nyeis_id") %>'
                    OnClick="expandLBtn_Click"
                    >
                    <i class="fa-solid fa-arrow-right"></i></asp:LinkButton>

            </ItemTemplate>

但是,一个大的:
我发现如果你为bootstrap图标添加一个“span”或“i”(或者在你的例子中是字体awsome),当整个gv(或列表视图)被放置在更新面板中时,click事件开始不起作用。
我还不能确定为什么会这样。(但是,带有图标的跨度的存在是什么情况下这会失败。
那么,要验证上面的内容?请尝试使用普通的jane按钮。(同样没有commandName,但您可以自由使用command参数。
实际上,首先尝试不使用commandName -和为Linkbutton指定的click事件。
如前所述,即使是现有的Linkbutton,也可以删除span或“i”,删除commandName,保留命令参数,并使用单击事件+命名容器来拾取当前行单击。
我倾向于只看到这个bug/问题,当你嵌套超过一个gv,然后把整个交易内的更新面板。
所以,如果你发现链接按钮工作正常(没有图标),那么:
你必须采用一个按钮-我只是没有一个更好的答案。
你也可以使用一个图像按钮(和一个图标)。
你也可以说你有1或2个图标?
请访问:
https://fontawesome.com/search?s=solid&f=sharp&o=r
现在,选择图标,您将有机会下载图标作为“图像”(svg)文件。
然后你可以像这样设计一个普通的简按钮:

<style type="text/css">
    .bEdit {
        border: 1px solid #563d7c;
        border-radius: 5px;
        color: white;
        padding: 5px 10px 5px 25px;
        background: url(Content/Icons/pencil-square.svg) left 3px top 5px no-repeat skyblue;
    }
</style>

然后你的按钮变成这样:

<asp:Button ID="cmdEdit3" runat="server" Text="Edit" CssClass="btn bEdit" 
                    OnClick="cmdEdit3_Click"
                    />

如果你想在按钮中使用图标+文本,请使用上面的方法。
如果你只想要/需要按钮中的图标?
然后当然使用基于该SVG的图像按钮。
你说:

<asp:ImageButton ID="cmdDelete" runat="server" 
                CssClass="btn btn-default"
                ImageUrl="~/Content/Icons/trash.svg"
                />

所以,上面更好的选择取决于你是否只需要图标,或图标+文本。如果你只需要图标?然后使用图像按钮+SVG图标。
建议的解决方案如下:
仅当有嵌套网格视图(或列表视图)时才需要。
只有当整个混乱是在一个更新面板。
如果你没有把这个gv嵌套在另一个gv中,那么一切都正常,实际上没有更新面板。
从我的经验来看?
插入图标的“span”或“i”是导致失败的原因。您可以保留现有代码作为测试,并删除图标,看看按钮是否为您工作。(它可能会)。
所以,要么:
采用一个普通的jane按钮+样式表来显示svg图标。(如果你需要/想要图标+文本,可以这样做)
采用一个图像按钮,指定图像-再次这将工作。(这建议是当你只想图标)。
然而:既然你当前的例子没有一个嵌套的网格视图在一个网格视图?
然后为该链接按钮使用普通的jane click事件应该可以工作。(删除命令名)。

相关问题