Reload same Blazor webpage with new data

[MMock]

I'm coding a Blazor webpage that displays a "system". You can have a parent system and children systems. SystemDataControl (SDC) is the key in the database table.

So I go into my page with SDC = 4285 which is a child and I display a hyperlink "Primary System" that the user can click and see the data for its parent, SDC = 2284. I want to load the same page with different data.

I think that would be something like this: https://jonhilton.net/blazor-navigation-same-page/
Here's a code snippet:

protected override void OnParametersSet()
{
    // need logic to run every time you navigate to this component? Put it here.
    base.OnParametersSet();
}

So the logic I need everytime I "navigate to this component" I currently have in OnInitializedAsync(). That is the code to get all my data for 4285. Do I move that code to a function and then call the same function for 2284 when the user clicks the link? I did observe that OnInitializedAsync() is called first, then On ParametersSet(). Jon Hilton does provide another code snippet to only fetch data when the parameter has changed so I believe if I implment that, I can call Initialized and then ParametersSet would know it doesn't need to get new data.

Please advise if you think this is a good way to accomplish what I want to do, or if you have a better way. Thanks!

[MMock]

OK, I pretty much implemented that snippet, with a bit of embellishment, and it's working. I just wanted to stop anyone from going to the trouble of helping me on this; trust me, I will need your help later and I don't want to bother anyone more than I have to. I will test more and post my solution by EOD. Thanks.

[dday9]

I personally don't like using Blazor to handle what is shown on a page.

Typically what I will do is:

1. Create a controller to return just the GET for the page I am displaying
2. Create a view to represent the page
3. When the page is loaded, make an AJAX call to a API endpoint that returns your data
4. Update the view with the information returned by the AJAX call

If you want to get fancy you can setup a skeleton container or a spinner to indicate that data is being fetched.

This approach is called MVVM (model - view - view model).

[MMock]

Well, I have no idea what you're talking about not using Blazor. It's a blazor applications so doesn't it have to be ... blazor?

That said, I have another specific question. I need to run my same page with a new parameter so I'm working on that and having some trouble. The name of my page is SystemDataDetails.razor and it's called from another razor page that displays a grid. You click one of the rows (a system) in the grid and open SystemDataDetails for the first time: navigationManager.NavigateTo($"systemdatadetails/{Convert.ToInt32(sdcvalue)}/{linkedSystem}/{linkedToMaster}");

Then within SystemDataDetails I have:

    @if (linkedSystem == "L")
    {
        <p>Linked System</p>
        <br />
        <a href="/systemdatadetails/2534/P">Click to open Primary System</a>
    }
    else
    {
        if (linkedSystem == "P")
        {
            <p>This is the Primary System</p>
        }
    }

But 2534 is harcoded just so I could test that it worked going from a linked system to a primary system - same page, new data. It does. Now I want to make 2534 a parameter. So I guess I have to create a script block with a function, like this:

<script>
function funcToOpenPrimarySystem(){	
	var SchoolId  = 0;
	window.location.href = "school_info.aspx?edit_school=true&school=" + SchoolId;
}
</script>

which I haven't finished (I copied the href from someone's example) because right away I got an error when I put it in my blazor file 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. For more information, see https://aka.ms/AAe3qu3". I followed that "for more information" link, which is this https://learn.microsoft.com/en-us/as...of-javascipt-1. And that is saying "Place the JavaScript (JS) tags (<script>...</script>) inside the closing </body> element markup of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server)". Since I don't see that I have index.html in wwwroot, I'm looking at _Host.cstml but where does it go and what is the syntax? If I google this, no one's _Host.cshtml file looks like mine:

@page "/"
@namespace DxBlazorApplication3.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />


<script>
function funcToOpenPrimarySystem()
{	
	var SchoolId  = 0;
	//window.location.href = "school_info.aspx?edit_school=true&school=" + SchoolId;
	window.locaton.href = "systemdatadetails/2534/P/0";
}
</script>

Furthermore, on my systemdatadetails page, I no longer have a hyperlink. WHy did it go away?

    @if (linkedSystem == "L")
    {
        <p>Linked System</p>
        <br />
        @*<a href="/systemdatadetails/P/{linkedtoMaster}">Click to open Primary System</a>
        <a href="/systemdatadetails/{linkedtoMaster}/P/0">Click to open Primary System</a>*@
        <a onclick="funcToOpenPrimarySystem();">Click to open Primary System</a>
    }
    else
    {
        if (linkedSystem == "P")
        {
            <p>This is the Primary System</p>
        }
    }

Anway, I'll be extremely pleasantly surprised if anyone bothers to read this and help me. I know it's a lot to ask. I'll keep looking. We'll see which of us posts a reply first :-).

[MMock]

We're using DevExpress controls. THere is a button. I tried it out but I did not like it; it was big and bulky. Y ou can render it as a link! It's beautiful. So I don't need any javascript or href or anything else. Please forgive me for slowly learning my way around; I am getting there!

[dday9]

You can still use Blazor while keeping the Blazor implementation minimal.

From my experience taking a Blazor first approach will significantly slow down development and responsiveness.

I can help you build out a nice progressive web application, but if you're dead set on using Blazor specific logic then unfortunately I won't be much help.

[MMock]

You can still use Blazor while keeping the Blazor implementation minimal.

From my experience taking a Blazor first approach will significantly slow down development and responsiveness.

I can help you build out a nice progressive web application, but if you're dead set on using Blazor specific logic then unfortunately I won't be much help.

Thank you. For some reason I am cranking out codeand finding development pretty easy. As far as responsiveness, the app is very recently available on the web so I'll have my alpha testers jump in. I'll still be posting lots of questions so hopefully I will get your great advice on some of them.