[RESOLVED] Navigate Back a Page, Programatically

**MMock** · Oct 16th, 2023, 09:52 AM

I am trying to figure out the web page equivalent of a Windows modal dialog. That is, in my Windows application I give the user a grid with some command buttons in each row. He hits a button, it opens a modal dialog and when he hits a button on that dialog the form does some processing of the grid row then closes and goes back to the form with the grid showing that row's data refreshed. I would think this would be similar to the back arrow in one's internet browser. Can I implement that programatically? And if not, I would want to just do a navigate "forward" to the same page (that is A1 -> B -> A2) but not allow the back button to go A2 -> B -> A1 if that is possible to implement. Thank you and I will keep looking around for a solution myself...

**jmcilhinney** · Oct 16th, 2023, 07:30 PM

The two processes you describe are not equivalent. In a Windows app, when you open a dialogue, you're not closing the previous window. If you navigate from the current page to a new page then the original page is gone. Navigating back has to reload it. If you want a dialogue, use a dialogue. You can use script in a page to display an overlay that looks just like a Windows dialogue but is still part of the current page, so nothing is lost and has to be reloaded when dismissing the dialogue. The obvious first option is here:

https://jqueryui.com/dialog/

**MMock** · Oct 17th, 2023, 06:34 AM

Thank you, I will take a look at that.

**dday9** · Oct 17th, 2023, 10:03 AM

Something else to consider is setting up a SPA pattern (Single Page Application).

You can use an existing library like navigo or you can build your own (check out the page source in my website here).

We do this at work all the time with Kendo UI's SPA implementation. Basically we use MVC controllers so that each view is loaded independently, but then we setup a "mini-SPA" within the view so that the user can do all the CRUD operations without ever leaving the actual page. If you want, I can provide you with a solution there. Kendo-UI Core (the free version) allows you do leverage everything you would need. The only downside to this approach in my opinion is the jQuery dependency, but if you are already using jQuery then it's no biggie.

**MMock** · Oct 17th, 2023, 12:31 PM

Thank you for the additional input. I would just like to state that I am learning all this stuff (Blazor, DevExpress components for Blazor, html, etc.) I would like to keep it simple. This application is for our in-house users. It doesn't have to be amazing. Sometimes I don't know how to put all the pieces together. dday9 said "if you are already using jQuery". I'm not. Do I have to use it if I want to incorporate the code in jmc's link? Looking at that link I tried to pull in the code to just start playing with it. I don't know where to put it. A razor file? An html file? Right now it's in something I called ModalConfirmation.razor but whereever the script tags are it's red and saying Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. I don't have an index.html file. I have an Index.razor file. So I'm kind of confused and honestly the simpler the better, and the less I have to learn the better for now.

**dday9** · Oct 17th, 2023, 01:26 PM

Yep, JMcIlhinney's solution is dependent on jQuery.

You should have a Layout file that Views use. If that's the case, then you should add a reference to the library at the bottom of your body element. If you are fine with using a CDN (wiki) then you can simply use the following:

Code:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

If you want to host the jQuery file yourself then you will need to download the source code, include it in your project, and then reference the location where it is stored:

Code:

<script src="~/assets/content/jquery-3.7.1.min.js"></script>

**MMock** · Oct 17th, 2023, 01:41 PM

I have a _Layout.cshtml file!

Code:

@using Microsoft.AspNetCore.Components.Web
@namespace DxBlazorApplication3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.css" rel="stylesheet" asp-append-version="true" />

    <link href="~/css/site.css" rel="stylesheet" />
    <link href="DxBlazorApplication3.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @{
        var isIEOrEdgeLegacy = Context.Request.Headers["User-Agent"]
            .Any(userAgent => userAgent.Contains("MSIE") || userAgent.Contains("Trident") || userAgent.Contains("Edge/"));
    }
    @if(isIEOrEdgeLegacy)
    {
        <component type="typeof(DxBlazorApplication3.Shared.BrowserNotSupported)" render-mode="Static" />
    }
    else
    {
        @RenderBody()

        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>

        <script src="_framework/blazor.server.js"></script>
    }
</body>
</html>

**dday9** · Oct 17th, 2023, 02:44 PM

So you see where the existing script tag is (4 lines from the bottom), that's where you'll want to add the reference to jQuery (and jQueryUI if you're using that).

**MMock** · Oct 20th, 2023, 11:06 AM

I have successfully implemented the equivalent of a modal dialog. In post #5, I mentioned I am using DevExpress Blazor. I should've emphasized that. Because I was able to accomplish this using DX components. I knew they had a component that faciliated implementing a Yes/No messagebox. It just took me a while to hunt down the fact that this could be extended and customized.

This is the code on my page that wants to put up the dialog and be returned to:

Code:

<WOPPW @ref="confDialog"></WOPPW>

@code {

    WOPPW confDialog;

...

string functionClicked = await confDialog.ConfirmOperation("Last Task On Case", "You are completing the last task on this case.  Please indicate whether you want a Follow Up created, or if you want the case to go to Pending Paperwork.");

                    if (functionClicked == "FU")
                    {
                        // This is the CaseAction.CreateFollowup code in CMS App

                        ...
                    }
                    else
                    {
                        if (functionClicked == "PP")
                        {
                            // This is the CaseAction.MarkPP code in CMS App
                            ...
                        }
                    }
...

This is the modal dialog file, WOPPW.razor:

Code:

@using DevExpress.Blazor
@implements IDisposable

<DxPopup @bind-Visible="@ConfirmationShown"
         HeaderText="@HeaderText"
         HeaderCssClass="confirmation-dialog-header"
         ShowCloseButton="false"
         CloseOnOutsideClick="false"
         CloseOnEscape="false"
         Width="400px">
    <BodyContentTemplate>
        <p>@BodyText</p>
        <p>A 2nd body text line</p>
        <div class="confirmation-dialog-content">
            <DxButton Text="Create Follow Up Task" Click="fuClick" RenderStyle="ButtonRenderStyle.Primary"></DxButton>
            <DxButton Text="Mark Case PP" Click="ppClick" RenderStyle="ButtonRenderStyle.Secondary"></DxButton>
        </div>
    </BodyContentTemplate>
</DxPopup>

@code {
    bool ConfirmationShown { get; set; } = false;
    string HeaderText { get; set; } = string.Empty;
    string BodyText { get; set; } = string.Empty;
    //TaskCompletionSource<bool> tcs;
    TaskCompletionSource<string> tcs;

   //public Task<bool> ConfirmOperation(string headerText, string bodyText)
    public Task<string> ConfirmOperation(string headerText, string bodyText)
    {
        HeaderText = headerText;
        BodyText = bodyText;
        ConfirmationShown = true;
        InvokeAsync(StateHasChanged);

        //tcs = new TaskCompletionSource<bool>();
        tcs = new TaskCompletionSource<string>();
        tcs.Task.ContinueWith(_ =>
        {
            ConfirmationShown = false;
        });
        return tcs.Task;
    }
    private void fuClick()
    {
        tcs.SetResult("FU");
    }
    private void ppClick()
    {
        tcs.SetResult("PP");
    }
    public void Dispose()
    {
        tcs = null;
    }
}

I believe those are all the pieces that I pulled together from this link. So thank you for your input and suggestions. It was just easier to stick with the tools I've been using, once I found it was possible to do that.

Thread: [RESOLVED] Navigate Back a Page, Programatically

Thread Tools

Display

[RESOLVED] Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Re: Navigate Back a Page, Programatically

Posting Permissions