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

AlokSharma
March 31, 2023
100 views
0 votes
2 Answers

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

<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>

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

Tags: asp.net c#html

Answers

- Juha
- March 31, 2023 at 12:53 pm
- 0 votes
0
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).

Login or Signup to reply.

- AlbertDKallal
- March 31, 2023 at 5:53 pm
- 0 votes
0
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:
```
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
```
then drag from toolbox a update panel

we have this:
```
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

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


    </asp:UpdatePanel>
```
add content template (type it in – inteli-sense will help you)

So, we have this:
```
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

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


        </ContentTemplate>
    </asp:UpdatePanel>
```
now, cut/paste/move your sample content into the up area. So this:
```
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

        <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>
```
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:
```
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

        <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>
```
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 = "0.00";
            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 = "0.00";
        Efficiency.InnerText = DateTime.Now.ToString();

    }
```
And the result is this:

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.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.