locked
Controls stop working after page refresh RRS feed

  • Question

  • User-1158769213 posted

    I have a Blazor component (page) that was getting a little busy, so I added a Telerik tab strip. This works fine until the page is refreshed ie hitting f5). After that, none of the controls respond until I navigate away form the page and back again.

    When I refresh, I get the following in the browser console...

    blazor.server.js:8 Uncaught (in promise) Error: Found malformed component comment at Blazor:{"sequence":0,"type":"server","prerenderId":"431349d3918241faba061a34c08cbfa1","descriptor":"CfDJ8EGyNRpxAg1EkHsAnGbGRxPJaMJhz3MDhz53TxLBMaIVBK2vjVdFRih3cwRIezugweQHEf8xRwinlHkeC\u002BVA8jdPVjel/MzZHCxBHlutBavG0WeiYIzygQ6qSDefiQFYXKbIBPPHnFoA4gZdfm104glaK4ZHf9DixxjO6ZuyKm5IneMzx/aq18YNRcO7cBlrX/dZenZaANHn3JHe1W7vM2OjFkmKuxV1WGZzTMdKfQwwO5Vl8OC7rORJk2T/YOMiEqIgRyvpEbWRBQBfThvexYd\u002B9gMGo7zlPwM9L/OrYoHIWw/qxkpfw33fZeh\u002BK95\u002BwgH32rW5Msxw7lhNckGLWMbZdMxEaprl6/ffa0evdP27"}
        at i (blazor.server.js:8)
        at r (blazor.server.js:8)
        at r (blazor.server.js:8)
        at r (blazor.server.js:8)
        at blazor.server.js:8
        at Object.t.discoverComponents (blazor.server.js:8)
        at blazor.server.js:8
        at blazor.server.js:8
        at Object.next (blazor.server.js:8)
        at blazor.server.js:8

    This looks like a generic Blazor error and I don't see the Telerik components in the stack trace, so I'm not sure it's to do with Telerik specifically. However, everything worked fine before I wrapped sections in the tab strip, so I'm not sure.

    Anyone any ideas what may be going wrong? Here is the .razor markup...

    @page "/AchDetails/{id?}"
    @using Achim.Web.Models
    @attribute [Authorize(Roles = "Admin")]
    <PageTitle Title="Ach details" />
    
    @if (_ach == null) {
      <h2>Sorry, that ach cannot be found. Please use the <a href="/Achim">achim list</a>.</h2>
    } else {
      <Busy Data="_ach">
        <div class="section">
          <div class="container mb-70 mt-4">
            @if (Id is null) {
              <h2><span class="oi oi-person" aria-hidden="true"></span> New ach</h2>
            } else {
              <h1><span class="oi oi-person" aria-hidden="true"></span> @_ach.FullName</h1>
            }
    
            <style>
              .k-tabstrip > .k-content {
                background: transparent;
              }
              .k-tabstrip-items li.k-state-default {
                background: #ddd;
                color: #444;
              }
              .k-tabstrip-items li.k-state-active {
                font-weight: bold;
              }
            </style>
    
            <TelerikTabStrip>
              <TabStripTab Title="Details">
                <EditForm Model="@_ach" OnValidSubmit="@OnValidSubmit" class="k-form">
                  <PeterLeslieMorris.Blazor.Validation.Validate />
                  <FormRowText2 PropertyName1="@nameof(Ach.FirstName)" @bind-Value1="_ach.FirstName" PropertyName2="@nameof(Ach.Surname)" @bind-Value2="_ach.Surname" Caption="Name" Icon="user" />
                  <FormRowText PropertyName="@nameof(Ach.HebrewName)" Caption="Hebrew name" @bind-Value="_ach.HebrewName" Icon="torah" />
                  <FormRowText PropertyName="@nameof(Ach.Email)" @bind-Value="_ach.Email" Icon="at" />
                  <FormRowCheckbox PropertyName="@nameof(Ach.EmailConfirmed)" Caption="Email confirmed?" @bind-Checked="_ach.EmailConfirmed" Icon="check-circle" />
                  <FormRowText PropertyName="@nameof(Ach.Mobile)" @bind-Value="_ach.Mobile" Icon="mobile-alt" />
                  <FormRowDropdownEnum PropertyName="@nameof(Ach.Level)" @bind-Value="_ach.Level" Icon="layer-group" />
                  <FormRowInt PropertyName="@nameof(Ach.Amount)" @bind-Value="_ach.Amount" Icon="pound-sign" />
                  <FormRowDropdownEnum PropertyName="@nameof(Ach.Frequency)" @bind-Value="_ach.Frequency" Icon="wave-sine" />
                  <FormRowCheckbox PropertyName="@nameof(Ach.DirectDebitSetUp)" Caption="DD set up?" @bind-Checked="_ach.DirectDebitSetUp" Icon="credit-card" />
                  <FormRowDate PropertyName="@nameof(Ach.Renewal)" @bind-Value="_ach.Renewal" Icon="house-day" />
                  <FormRowText PropertyName="@nameof(_ach.Password1)" @bind-Value="_ach.Password1" Icon="user-lock" Caption="Password" />
                  <FormRowText PropertyName="@nameof(_ach.Password2)" @bind-Value="_ach.Password2" Icon="user-lock" Caption="Password (again)" />
                  <div class="text-right">
                    <TelerikButton ButtonType="@ButtonType.Submit" Primary="true">Submit</TelerikButton>
                    <TelerikButton ButtonType="@ButtonType.Button" OnClick="@OnCancel">Cancel</TelerikButton>
                  </div>
                  <div class="form-group row">
                    <div class="col-lg-8"></div>
                    <div class="col-lg-4">
                      <div class="text-warning">@((MarkupString)_msg)</div>
                    </div>
                  </div>
                  <div class="form-group row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-11">
                      <ValidationSummary />
                    </div>
                  </div>
                  <div class="form-group row" id="pwd-options-container">
                    <div class="col-lg-2"></div>
                    <div class="col-lg-10">
                      <div class="text-warning">@((MarkupString)_PasswordOptionsHelper.PasswordOptions())</div>
                    </div>
                  </div>
                </EditForm>
              </TabStripTab>
    
              <TabStripTab Title="Shares">
                <div class="row">
                  <div class="col-lg-5">
                    <fieldset>
                      <legend>Existing shares</legend>
                      <table class="table" style="background-color: #fff">
                        <tr>
                          <th>Avreich</th>
                          <th>Quantity</th>
                          <th> </th>
                        </tr>
                        @foreach (AvreichShares es in _existingShares) {
                          <tr @key="es.AvreichId">
                            <td>@es.FullName</td>
                            <td class="text-right">@es.Quantity</td>
                            <td><TelerikButton Primary="true" Icon="@IconName.CloseCircle" OnClick="@(() => DeleteShare(es))" /></td>
                          </tr>
                        }
                      </table>
                    </fieldset>
                  </div>
                  <div class="col-lg-7">
                    <fieldset>
                      <legend>Add shares</legend>
                      <TelerikGrid Data="@_availableShares"
                                   FilterMode="@GridFilterMode.FilterRow"
                                   SelectionMode="GridSelectionMode.Single"
                                   OnRowClick="@OnAvreichRowClick"
                                   Height="400px"
                                   Sortable="true"
                                   Groupable="false"
                                   Resizable="true"
                                   Reorderable="false">
                        <GridColumns>
                          <GridColumn Field="@nameof(AvreichShares.FullName)" Title="Avreich" Width="250px" />
                          <GridColumn Field="@nameof(AvreichShares.Quantity)" Title="Shares" Width="120px" />
                        </GridColumns>
                      </TelerikGrid>
    
                      @if (_selectedAvreich != null) {
                        <div class="message-options" style="margin-top: 10px; background-color: #fff">
                          <p style="margin-top: 10px">Allocate <TelerikDropDownList Data="_availableNumbers" @bind-Value="_sharesToAllocate" Width="80px" /> share(s) to @_selectedAvreich.FullName <TelerikButton Primary="true" OnClick="@AllocateShares" Enabled="@(_sharesToAllocate > 0)">Allocate</TelerikButton></p>
                        </div>
                      }
                    </fieldset>
                  </div>
                </div>
              </TabStripTab>
    
              <TabStripTab Title="Payments">
                <TelerikGrid Data="@_ach.Payments"
                             EditMode="@GridEditMode.Popup"
                             FilterMode="@GridFilterMode.FilterRow"
                             OnCreate=@CreatePayment
                             OnUpdate=@UpdatePayment
                             OnDelete=@DeletePayment
                             Sortable="true"
                             Groupable="false"
                             Resizable="true"
                             Reorderable="false">
                  <GridToolBar>
                    <GridCommandButton Command="Add" Icon="add" Primary="true">Add</GridCommandButton>
                    <GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel">Export</GridCommandButton>
                  </GridToolBar>
                  <GridExport>
                    <GridExcelExport FileName="Ach payments" AllPages="true" />
                  </GridExport>
                  <GridColumns>
                    <GridColumn Field="@nameof(AchPayment.Date)" Title="Date" DisplayFormat="{0:dd MMMM yyyy}" />
                    <GridColumn Field="@nameof(AchPayment.Amount)" Title="Amount" DisplayFormat="{0:C2}" />
                    <GridColumn Field="@nameof(AchPayment.PaymentMethod)" Title="Method" />
                    <GridCommandColumn Width="120px">
                      <GridCommandButton Command="Edit" Icon="@IconName.Edit" Primary="true">Edit</GridCommandButton>
                      <GridCommandButton Command="Delete" Icon="@IconName.Delete">Delete</GridCommandButton>
                    </GridCommandColumn>
                  </GridColumns>
                </TelerikGrid>
                
                <p>Msg: @_msg</p>
              </TabStripTab>
            </TelerikTabStrip>
    
          </div>
        </div>
      </Busy>
    }

    The only thing happening in OnInitializedAsync is loading the entity from the database, so I don't think that should be causing the issue.

    Anyone able to help? Thanks

    Tuesday, December 29, 2020 5:15 PM

Answers

  • User-1158769213 posted

    Probably an odd enough issue that it won't help anyone to post my solution here, but you never know.

    It turned out that a component I had on the page was emitting invalid HTML (missing a closing </div>). Not exactly sure why this didn't cause a problem the first time the page was loaded, possibly that the first load didn't run the diffing algorithm and the refresh did (does that make sense?), but when I fixed the HTML emitted by the component, it all worked fine.

    Hope this helps someone!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 30, 2020 11:21 PM

All replies

  • User475983607 posted

    Pressing F5 causes Blazor Applications to restart. Perhaps the current page that loads cannot be the startup page?

    Anyway, I recommend reaching out to Telerik support (or reading the docs) since the logic stopped working after incorporating the 3rd party library.  

    https://docs.telerik.com/blazor-ui/components/tabstrip/overview

    Tuesday, December 29, 2020 5:27 PM
  • User-1158769213 posted

    Hello, thanks for the reply.

    Not sure what you mean by "cannot be the startup page." Surely any page can be the first one hit when you start an application?

    I did contact Telerik, but they said it looks like a generic Blazor issue, as the stack trace didn't show anything related to their components. That's why I posted here.

    Thanks again. Any other ideas?

    Tuesday, December 29, 2020 5:31 PM
  • User475983607 posted

    Not sure what you mean by "cannot be the startup page." Surely any page can be the first one hit when you start an application?

    You are the only one that knows the answer.  Does your design allow any Razor page to bootstrap your application?   Does your Index page have logic that sets up global variables?

    I did contact Telerik, but they said it looks like a generic Blazor issue, as the stack trace didn't show anything related to their components. That's why I posted here.

    You said the code worked until you incorporated Telerik.  Remove the Telerik tab strip and see if doing so fixes the F5 test.   Unfortunately, Telerik is a paid for library.  That's makes it very tough to reproduce the issue unless a community member has Telerik libraries.

    Tuesday, December 29, 2020 5:45 PM
  • User-1158769213 posted

    I see what you mean about the startup page. No, any page can be startup, including this one. This was working fine before I added the tab strip.

    My feeling was also that it is related to Telerik, but given that they said it didn't look like it, I thought I'd check here first. Guess I'll have to go back to them.

    Thanks again.

    Tuesday, December 29, 2020 5:51 PM
  • User-1158769213 posted

    Probably an odd enough issue that it won't help anyone to post my solution here, but you never know.

    It turned out that a component I had on the page was emitting invalid HTML (missing a closing </div>). Not exactly sure why this didn't cause a problem the first time the page was loaded, possibly that the first load didn't run the diffing algorithm and the refresh did (does that make sense?), but when I fixed the HTML emitted by the component, it all worked fine.

    Hope this helps someone!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 30, 2020 11:21 PM