在不引起页面加载的情况下，定时更新ASP.NET中的HTML标签值

huangapple
go评论64阅读模式
英文:

Update html tag value after an interval without causing page load asp.net

问题

以下是您要翻译的内容：

I have a web form, which consists of HTML tags, The value of these HTML tags needs to be updated periodically after an interval without causing a page load event. The data will be coming from the code behind of the page.

我有一个Web表单，其中包含HTML标签，这些HTML标签的值需要定期在一段时间间隔后进行更新，而不会引起页面加载事件。数据将来自页面的后端代码。

I know the concept of an update panel in asp but I am not sure how we can apply this to multiple HTML tags

我了解ASP中更新面板的概念，但我不确定如何将其应用于多个HTML标签。

This is part of the HTML tags in .aspx

这是**.aspx**文件中的一部分HTML标签

<!-- language: lang-html -->
<li class="list-group-item d-flex justify-content-between align-items-center">
	<table style="width: 100%">
		<tr>
			<td style="text-align: left; width: 25%">
				<h4 style="color: black; display: inline-block;">Asking Rate</h4>
			</td>
			<td style="text-align: left; width: 30%">
				<h4 class="value_h4">0.04716667 Hr/P</h4>
			</td>
			<td style="text-align: left; width: 25%">
				<h4 style="color: black">Efficiency</h4>
			</td>
			<td style="text-align: left; width: 25%">
				<h4 class="value_h4" style="color: black">100 %</h4>
			</td>
		</tr>
	</table>
</li>
<!-- end snippet -->

这是**.aspx**文件中的HTML标签的一部分。

both tags with class name value_h4 need to be updated from the backend .cs page after every interval.

需要从后端的.cs页面中更新具有类名value_h4的两个标签，每隔一段时间。

I need help with the approach to this. I am unable to figure it out.

我需要关于此方法的帮助。我无法弄清楚。

Thanks

谢谢

英文:

I have a web form, which consists of HTML tags, The value of these HTML tags needs to be updated periodically after an interval without causing a page load event. The data will be coming from the code behind of the page.

I know the concept of an update panel in asp but I am not sure how we can apply this to multiple HTML tags

This is part of the HTML tags in .aspx

<!-- language: lang-html -->

&lt;li class=&quot;list-group-item d-flex justify-content-between align-items-center&quot;&gt;
	&lt;table style=&quot;width: 100%&quot;&gt;
		&lt;tr&gt;
			&lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
				&lt;h4 style=&quot;color: black; display: inline-block;&quot;&gt;Asking Rate&lt;/h4&gt;
			&lt;/td&gt;
			&lt;td style=&quot;text-align: left; width: 30%&quot;&gt;
				&lt;h4 class=&quot;value_h4&quot;&gt;0.04716667 Hr/P&lt;/h4&gt;
			&lt;/td&gt;
			&lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
				&lt;h4 style=&quot;color: black&quot;&gt;Efficiency&lt;/h4&gt;
			&lt;/td&gt;
			&lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
				&lt;h4 class=&quot;value_h4&quot; style=&quot;color: black&quot;&gt;100 %&lt;/h4&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
&lt;/li&gt;

<!-- end snippet -->

both tags with class name value_h4 need to be updated from the backend .cs page after every interval.

I need help with the approach to this. I am unable to figure it out.

Thanks

答案1

得分: 1

好的，这里是代码的翻译部分：

首先，你可以使用更新面板 - 这不是一个坏主意。

然而，最重要的是更新面板实际上具有页面生命周期，并且还会触发页面加载事件。

换句话说，更好的术语是部分页面后退。

然而，在99%的情况下，这都不重要，因为我创建的最后200多个网页都会在页面加载事件中始终有一个!isPostBack代码存根。事实上，如果不遵循这个规则，你甚至无法创建一个正常工作的网页。

接下来：

由于你希望在代码后台获取这两个"h4"标签，那么只需为这两个f4标签添加"id"标签和"runat="server""，你就可以帮助减少一些世界贫困。

现在，可能你总是想要更新所有的f4标签，但现在，我会假设你只关心这两个，所以只需向这两个控件添加一些"id"标签并加上"runat="server""不是什么大问题。

所以下一个问题是"interval"。有很多方法可以做到这一点，但如果我们采用更新面板，那么最好在页面上加一个定时器控件。这样我们就不需要编写任何客户端JavaScript代码。

所以，让我们走这条路来解决问题（不需要编写任何客户端js代码）。

所以，我们将用时间更新这两个h4标签。

记住，更新面板内的任何简单按钮或任何东西都可以引发更新 - 包括添加一个定时器控件。

步骤如下：

从工具箱中拖放一个ScriptManager

所以，我们有这个：


然后从工具箱中拖放一个更新面板

我们有这个：

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

</asp:UpdatePanel>

添加内容模板（键入内容 - 智能感知将帮助你）

所以，我们有这个：

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

</ContentTemplate>

</asp:UpdatePanel>

现在，剪切/粘贴/移动你的示例内容到更新区域。所以这个：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<li class="list-group-item d-flex justify-content-between align-items-center">
    <table style="width: 100%">
        <tr>
            <td style="text-align: left; width: 25%">
                <h4 style="color: black; display: inline-block;">Asking Rate</h4>
            </td>
            <td style="text-align: left; width: 30%">
                <h4 class="value_h4">0.04716667 Hr/P</h4>
            </td>
            <td style="text-align: left; width: 25%">
                <h4 style="color: black">Efficiency</h4>
            </td>
            <td style="text-align: left; width: 25%">
                <h4 class="value_h4" style="color: black">100 %</h4>
            </td>
        </tr>
    </table>
</li>

</ContentTemplate>

</asp:UpdatePanel>

现在，拖放我们的定时器，我们可以设置定时器每隔1秒触发一次。

所以，在我们的标记底部（但仍然在更新的内容模板中）。

并让我们轻松地为h4添加一些"id"标签。

（使用属性表，或者键入我们需要/想要的定时器控件设置）

所以，现在我们有这个：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<li class="list-group-item d-flex justify-content-between align-items-center">
    <table style="width: 100%">
        <tr>
            <td style="text-align: left; width: 25%">
                <h4 id="askrate" runat="server" style="color: black; display: inline-block;">Asking Rate</h4>
            </td>
            <td style="text-align: left; width: 30%">
                <h4 id="hours" runat="server" class="value_h4">0.04716667 Hr/P</h4>
            </td>
            <td style="text-align: left; width: 25%">
                <h4 id="Efficiency" runat="server" style="color: black">Efficiency</h4>
            </td>
            <td style="text-align: left; width: 25%">
                <h4 class="value_h4" style="color: black">100 %</h4>
            </td>
        </tr>
    </table>
</li>
    <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="1000" OnTick="Timer1_Tick">
    </asp:Timer>

</ContentTemplate>

</asp:UpdatePanel>

注意，我们如何为要轻松更改的h4控件添加了"id"和"runat="server""。

好，就是这么多了。

让我们只在这些控件中显示当天的时间，因为对于这个示例代码，我没有太多其他事情可做。

所以，这是代码后台：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 第一次页面加载的代码在这里
// 因此，设置控件，遛狗 - 做任何事情

    askrate.InnerText = DateTime.Now.ToString();
    hours.InnerText = "0.00";
    Efficiency.InnerText= DateTime.Now.ToString();

    Timer1.Enabled= true;   // 启动计时器

}

}

protected void Timer1_Tick

英文:

Ok, 2 things:

first up, you can use a update panel - not all that bad of a idea.

However, MOST imporant is that update panels actually do have a page life cycle, and ALSO will trigger the page load event.

In other words, the better term is a partial page post-back.

However, in 99% of cases, this will not matter, since the last 200+ web pages I have created will ALWAYS but ALWAYS but ALWAYS have a !isPostBack code stub in the page load event. In fact, you can not even create a proper working web page with setup code in page load if you don't follow this rule.

next up:

Since you want code behind to get its grubby hands on the 2 "h4" tags, then you will save some world poverty by just adding "id" tags to the 2 f4 tags and a runat="server".

Now, it possible you ALWAYS want to update any and all f4 tags, but for now, I'm going to assume you only have the 2 in question, so not a huge deal to just add some "id" tags to those 2 controls.

So, next issue, is the "interval". There are quite a few ways to do this, but if we adopt a update panel, then might as well drop on the page a timer control. The result is we don't have to write any client side JavaScript code.

So, lets go down this road for a solution (not having to write any client side js code).

So, we will update the 2 h4 tags say with the time.

Remember, any simple button or ANYTHING inside of the update panel is fine to cause the update - including that of dropping in a timer control.

So, steps are:

drag + drop in a scriptmanger from toolbox

So, we have this:

&lt;body&gt;
    &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
        &lt;asp:ScriptManager ID=&quot;ScriptManager1&quot; runat=&quot;server&quot;&gt;
        &lt;/asp:ScriptManager&gt;

then drag from toolbox a update panel

we have this:

    &lt;asp:ScriptManager ID=&quot;ScriptManager1&quot; runat=&quot;server&quot;&gt;
    &lt;/asp:ScriptManager&gt;

    &lt;asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;&gt;


    &lt;/asp:UpdatePanel&gt;

add content template (type it in - inteli-sense will help you)

So, we have this:

    &lt;asp:ScriptManager ID=&quot;ScriptManager1&quot; runat=&quot;server&quot;&gt;
    &lt;/asp:ScriptManager&gt;

    &lt;asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;&gt;
        &lt;ContentTemplate&gt;


        &lt;/ContentTemplate&gt;
    &lt;/asp:UpdatePanel&gt;

now, cut/paste/move your sample content into the up area. So this:

    &lt;asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;&gt;
        &lt;ContentTemplate&gt;

        &lt;li class=&quot;list-group-item d-flex justify-content-between align-items-center&quot;&gt;
            &lt;table style=&quot;width: 100%&quot;&gt;
                &lt;tr&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 style=&quot;color: black; display: inline-block;&quot;&gt;Asking Rate&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 30%&quot;&gt;
                        &lt;h4 class=&quot;value_h4&quot;&gt;0.04716667 Hr/P&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 style=&quot;color: black&quot;&gt;Efficiency&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 class=&quot;value_h4&quot; style=&quot;color: black&quot;&gt;100 %&lt;/h4&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/li&gt;

        &lt;/ContentTemplate&gt;
    &lt;/asp:UpdatePanel&gt;

Ok now drag + drop in our timer, we can set that timer to trigger say every 1 second.

So, at bottom of our markup (but still inside the content template of the up).

And lets add some "id" tags to the h4 we want to change with ease.

(use the property sheet, or type in the settings we need/want for timer control)

So, we have this now:

    &lt;asp:UpdatePanel ID=&quot;UpdatePanel1&quot; runat=&quot;server&quot;&gt;
        &lt;ContentTemplate&gt;

        &lt;li class=&quot;list-group-item d-flex justify-content-between align-items-center&quot;&gt;
            &lt;table style=&quot;width: 100%&quot;&gt;
                &lt;tr&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 id=&quot;askrate&quot; runat=&quot;server&quot; 
                            style=&quot;color: black; display: inline-block;&quot;&gt;Asking Rate&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 30%&quot;&gt;
                        &lt;h4 id=&quot;hours&quot; runat=&quot;server&quot;  
                            class=&quot;value_h4&quot;&gt;0.04716667 Hr/P&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 id=&quot;Efficiency&quot; runat=&quot;server&quot; 
                            style=&quot;color: black&quot;&gt;Efficiency&lt;/h4&gt;
                    &lt;/td&gt;
                    &lt;td style=&quot;text-align: left; width: 25%&quot;&gt;
                        &lt;h4 class=&quot;value_h4&quot; style=&quot;color: black&quot;&gt;100 %&lt;/h4&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/li&gt;
            &lt;asp:Timer ID=&quot;Timer1&quot; runat=&quot;server&quot; 
                Enabled=&quot;False&quot; Interval=&quot;1000&quot; 
                OnTick=&quot;Timer1_Tick&quot; &gt;
            &lt;/asp:Timer&gt;

        &lt;/ContentTemplate&gt;
    &lt;/asp:UpdatePanel&gt;

Note how we added a "id" and runat="server" to the h4 controls we want o change (at least do so with great ease!!!).

Ok, that's quite much it.

Lets just show the time of day in those controls, since I don't have anything much else to do for this sample code.

So, then this code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // first time page load code goes here
            // so, setup controls, walk the dog - do whatever

            askrate.InnerText = DateTime.Now.ToString();
            hours.InnerText = &quot;0.00&quot;;
            Efficiency.InnerText= DateTime.Now.ToString();  

            Timer1.Enabled= true;   // start the timer

        }
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        askrate.InnerText = DateTime.Now.ToString();
        hours.InnerText = &quot;0.00&quot;;
        Efficiency.InnerText = DateTime.Now.ToString();

    }

And the result is this:

在不引起页面加载的情况下，定时更新ASP.NET中的HTML标签值

So a few things:

I set the timer as enabled = false to start out with. So, you can have a button, or any code behind "turn on" the timer.

Any and all setup code you have in page load? For the next 100+ years ALWAYS put that code stub inside of the !isPostback stub. (you can't build working web form pages if you don't).

In that page load (!IsPostBack), we setup some controls, start the timer. Of course on any and all future post-backs on that page, that !isPostBack stub will not run.

And if you look close at the above screen gif capture, note how the browser does NOT show a spinner/wait or looks like any post-backs are occurring. But, keep in mind, the update panel does not mean no post-back (the page life cycle occurs, but ONLY for the content inside of the update panel, and the browser looks for all intents like no post-back occurred. However, page load triggers for any button click on a page, or any post-back, and THIS IS ALSO true for update panels. The correct term here is "partial page" post-back.

So, any button click, or even our timer? yes, that will trigger page load event, but as per above, we never care about that fact anymore.

答案2

得分: 0

你可以在单个UpdatePanel中包含多个字段，只需绑定不同的变量。例如，查看这里的示例。该示例包含一个UpdatePanel中的多个字段和一个页面上的多个UpdatePanels。

对于定期刷新，请使用更新触发器（示例代码在此）。

英文:

You can include multiple fields in a single UpdatePanel, just bind different variables. For example, see example here. The example contains both multiple fields inside one UpdatePanel and multiple UpdatePanels on one page.

For periodical refresh, use update trigger (example code here).

huangapple
  • 本文由 发表于 2023年3月31日 18:12:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/75897327.html
  • asp.net
  • c#
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定