如何更新特定更新面板並防止其他更新？

Question

我正在嘗試在儀表板上添加考勤，但我有其他帶有過濾工具的更新面板，例如月份和年份，當計時器的刻度事件發生時，下拉選項已折疊，我無法選擇其中一個。 我只需要更新 TimerUpdatePanel 而不是其他更新面板的代碼：

 <asp:UpdatePanel ID="TimerUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> <ContentTemplate> <div class="row"> <div class="offset-2 col-md-4"> <div id="timer" class="bg-primary timer-div"> <div> <h2 id="Timer_Time" runat="server">00:00:00</h2> <h2 id="Timer_Day" runat="server">-------</h2> <h2 id="Timer_Date" runat="server">00-00-0000</h2> </div> </div> </div> <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" /> </div> <div class="hr-line-dashed"></div> <div class="row"> <div class="col-md-4 offset-5" style="padding-top: 12px; letter-spacing: 2px;"> <span id="PunchMsg" runat="server"></span> <br /> <span id="TimerOption" runat="server"></span> </div> <div class="col-md-3"> <h2 id="stopWatch" runat="server"><span></span><span id="Hours"

runat="server">00:00:00 <asp:Button ID="PunchIN" Text="Punch In" runat="server" Visible="true" CssClass="btn btn-primary" OnClick="PunchIN_Click"> </asp:Button> <asp:Button ID="PunchOut" Text="Punch Out" runat="server" Visible="false" CssClass="btn btn-warning" OnClick="PunchOut_Click"></asp:Button > </asp:UpdatePanel>

 Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Dim CurrentDay = DateTime.Now.ToString("dddd") Dim CurrentDate = DateTime.Now.ToString("dd-MM-yyyy") Dim CurrentTime = DateTime.Now.ToString("H:mm tt") Timer_Day.InnerText = CurrentDay Timer_Date.InnerText = CurrentDate Timer_Time.InnerText = CurrentTime If PunchIN.Visible = False AndAlso PunchOut.Visible = True Then If Session("TimerStatement") <> "" Then Dim h = Val(Hours.InnerText) Dim m = Val(Minutes.InnerText) Dim s = Val(Seconds.InnerText) s += 1 If s = 60 Then s = 0 m = m + 1 End If If m = 60 Then m = 0 h = h + 1 End If Hours.InnerText = h.ToString("00") Minutes.InnerText = m.ToString("00") Seconds.InnerText = s.ToString("00") Else TimerOption.InnerText = "Please select one of the below options first" End If End If TimerUpdatePanel.Update() End Sub [this image show filter tools that be collpsed every 1 second][1] [1]: https://i.stack.imgur.com/QYBCW.jpg

Answer 1

好吧，一些用計時器更新的面板？ 它不應該打擾頁面上的其他位和部分。

但是，請記住以下幾點：

雖然更新面板確實會阻止頁面重新刷新，但它確實會進行回發，或者更好地說，我們稱之為 PARTICAL 回發。

這意味着在每次計時器點擊時，web 頁面 LOAD 事件每次都會觸發。 因此，就像單擊表單上的任何按鈕一樣，您確實會收到回傳，並且每次都會觸發頁面加載事件。

這意味着什么？ 好吧，如果你加載說一個下拉列表，或者其他控件說像一些網格視圖？ 您最好確保頁面加載事件僅加載該網格，或者在真正的第一頁加載時下拉 - 因為頁面加載總是會一遍又一遍地觸發。

所以，假設我們將這個 div 放到頁面中 - （你的例子 - 被剝離了）。

 <asp:UpdatePanel ID="TimerUpdatePanel" runat="server" 
     UpdateMode="Conditional" ChildrenAsTriggers="true" >

    <ContentTemplate>
            <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"
                Enabled="false" />

        <div style="width:20%;padding:15px;border:solid">

        <h2 id="Timer_Time" runat="server">00:00:00</h2>
        <h2 id="Timer_Day" runat="server">-------</h2>
        <h2 id="Timer_Date" runat="server">00-00-0000</h2>
        <hr />

         <span id="PunchMsg" runat="server"></span>
         <span id="TimerOption" runat="server" > </span>

        <h2 id="stopWatch" runat="server" >
            <span id="Hours" runat="server" >00:00:00</span>
        </h2>

        <asp:Button ID="PunchIN" Text="Punch In" runat="server" Visible="true" 
            style="float:left"
            CssClass="btn btn-primary" OnClick="PunchIN_Click" >
        </asp:Button> 

        <asp:Button ID="PunchOut" Text="Punch Out" runat="server" Visible="false" 
            style="float:right"
            CssClass="btn btn-warning" OnClick="PunchOut_Click">
        </asp:Button> 
        <br />
        <br />
    </div>

    </ContentTemplate>

 </asp:UpdatePanel>

對於背后的代碼？ 好吧，就像約會一樣？ 我們不必 +1 到一個月等。我們所需要的只是您打卡時的凝視時間。從中我們可以得到經過的時間。 我們在這里甚至不需要計時器，我們可以說每 5 秒、10 秒更新一次 - 沒關系。

所以，我們的代碼現在看起來像這樣：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick

    Call Update

End Sub

Sub Update()

    Dim dtNow As DateTime = DateTime.Now

    Timer_Day.InnerText = dtNow.ToString("dddd")
    Timer_Date.InnerText = dtNow.ToString("dd-MM-yyyy")
    Timer_Time.InnerText = dtNow.ToString("H:mm tt")

    ' now show elapsed time
    Dim dtPunchIn As DateTime = Session("PunchIn")
    Dim MyTimeSpan As TimeSpan = (dtNow - dtPunchIn)

    Hours.InnerText = MyTimeSpan.ToString("hh\:mm\:ss")


End Sub
Protected Sub PunchIN_Click(sender As Object, e As EventArgs) Handles PunchIN.Click

    Session("PunchIn") = DateTime.Now
    Timer1.Enabled = True
    PunchIN.Visible = False
    PunchOut.Visible = True

End Sub

Protected Sub PunchOut_Click(sender As Object, e As EventArgs) Handles PunchOut.Click

    Timer1.Enabled = False

    Call Update()

    PunchOut.Visible = False
    PunchIN.Visible = True

    Session("PunchIn") = Nothing

End Sub

現在我們看到了：

打一拳，我們現在有這個：

好的，那么在這一點上，假設我們的頁面加載事件沒有搞砸？

然后你的其他控件 - 例如下拉等應該無關緊要 - 一點也不。 （但是，如果您在每個頁面加載時重新加載組合框 - 那么您就有大問題了）。

所以，讓我們再添加兩個“div”，雖然它們不需要是更新的面板，但我們可以並且將把它們變成這樣（稍微。）

第二個面板將是一些過濾器選項，第三個面板將是第二個面板可以過濾的網格。

所以，我們放入這個過濾器面板。 （在面板打孔旁邊向左浮動）

<div style="width:20%;padding:15px;border:solid 1px;float:left;margin-left:20px">
 <h3>Panel 2</h3>
  <h4>Filters</h4>
        <div style="float:left">
            <asp:Label ID="Label1" runat="server" Text="Select City"></asp:Label>
            <br />
            <asp:DropDownList ID="cboCity" runat="server" Width="160px"
                DataValueField="City"
                DataTextField="City" >
            </asp:DropDownList>
        </div>

        <div style="float:left;margin-left:20px">
            <asp:Label ID="Label2" runat="server" Text="Select Province"></asp:Label>
            <br />
            <asp:DropDownList ID="cboProvince" runat="server" Width="160px"
                DataValueField="Province"
                DataTextField="Province" >
            </asp:DropDownList>
        </div>

        <div style="clear:both"></div>
        <br />
        <div style="float:left">
            <asp:Label ID="Label3" runat="server" Text="Must Have Description"></asp:Label>
            <br />
            <asp:CheckBox ID="chkDescripiton" runat="server"  />
        </div>
        <div style="float:left;margin-left:20px">
            <asp:Label ID="Label4" runat="server" Text="Show only Active Hotels"></asp:Label>
            <br />
            <asp:CheckBox ID="chkActiveOnly" runat="server"  />
        </div>
        <div style="clear:both"></div>
        <br />
        <div style="float:left;">
            <asp:Button ID="cmdSearch" runat="server" Text="Search" CssClass="btn"/>
        </div>

        <div style="float:right;">
            <asp:Button ID="cmdClear" runat="server" Text="Clear Fitler" CssClass="btn"/>
        </div>
    </div>

然后是我們的網格視圖：（面板 3）

<div style="width:40%;padding:15px;border:solid 1px;float:left;margin-left:20px">
 <h3>Panel 3</h3>

    <asp:GridView ID="GridView1" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ID"  CssClass="table" Width="60%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName"  />
                <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:BoundField DataField="Active" HeaderText="Active"  />
            </Columns>
        </asp:GridView>
    </div>

要加載的代碼？ 這個：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData
    End If

End Sub


Sub LoadData()

    ' load combo box for filters
    Dim cmdSQL As New _
        SqlCommand("SELECT City FROM tblHotels WHERE City is not null GROUP by City")
    cboCity.DataSource = MyrstP(cmdSQL)
    cboCity.DataBind()
    cboCity.Items.Insert(0, New ListItem("All", "All"))

    cmdSQL.CommandText =
        "SELECT Province FROM tblHotels WHERE Province is not null GROUP by Province"
    cboProvince.DataSource = MyrstP(cmdSQL)
    cboProvince.DataBind()
    cboProvince.Items.Insert(0, New ListItem("All", "All"))

    ' load grid data
    cmdSQL.CommandText = "SELECT * FROM tblHotelsA ORDER BY HotelName"
    GridView1.DataSource = MyrstP(cmdSQL)
    GridView1.DataBind()

End Sub

注意超級關心，我們測試/檢查 IsPostBack = false - 否則我們的加載代碼每次都會觸發。 您的所有 web 頁面都需要在頁面加載時進行此 IsPostBack 測試 - 即使沒有更新面板。 （如果您不添加上述存根，您的頁面將無法正常工作）。

所以，現在我們有了這個：

所以，真的，第二個面板（還不是一個面板）中的組合框等並不重要。

但是，我可以從面板 2 得到任何回發，比如更新面板 3。我真的不需要這樣做，但我可以。

那么，如果我在上面的 2 和 3 周圍包裹一個更新面板呢？

然后對於第二個面板（過濾器），我需要觸發面板 3 的更新

所以，我將它添加到面板 2

        <Triggers>
        <asp:PostBackTrigger ControlID="cmdSearch" />
        </Triggers>

但是，總而言之？ 在您的頁面上使用組合框等？ 應該沒關系。

但話又說回來，每隔一天 - 我們在這里看到關於頁面加載事件的帖子，它們正在重新加載下拉列表、網格等，它們真的只需要在第一個頁面加載時運行和加載。 如前所述，不包含 If NOt IsPostback 代碼塊將破壞大多數頁面 - 即使沒有更新面板。

但是，請記住，頁面加載將在更新面板的任何回發時觸發 - 包括按鈕點擊和計時器事件。 雖然回發不是完整的頁面重新刷新，但它確實每次都會觸發頁面加載。

如何更新特定更新面板並防止其他更新？

問題描述

1 個解決方案

解決方案1
0 2022-07-25 21:22:10

如何更新特定更新面板並防止其他更新？

問題描述

1 個解決方案

解決方案1 0 2022-07-25 21:22:10

解決方案1
0 2022-07-25 21:22:10