We Keep Coding

blazor not changing the page when clicking on a link

I am migrating my personal blog to Blazor, and I have a problem. I was developing the "next post" functionality and blazor (or the browser) is not redirecting the user when a link is clicked. the post are "the same page" under the next route #page "/post/{Url}
For example the user is in domain.com/post/foo and in that site there is a link to domain.com/post/bar.
It is a simple link, like the next:
<a href="post/bar" title="#Post.Title">
#Post.Title
</a>
When the user clicks on the link the url for the browser changes, and the location of the page moves to the top, but the page content is not changing.
I noticed that this behaviour is happening when I click from a post page into another, but is not happening from the "index" of the site (/) or when I click the tags on the post, which links to domain.com/tags/{tag}.
one thing to notice is that if I select the url in the browser and click enter or refresh the page it actually goes to the page i clicked on, in this case domain.com/post/bar
My question is, is this actually expected behavior or is it a bug? if it is expected behaviour, is there any way of making the url to actually go to the clicked url and not stay in the same page.
I am using net5.0 if that matters.
Thanks.

As an add on to #enet's answer, you're probably fetching the post referenced by the Url property in OnInitialized/OnInitializedAsync. See the last long paragraph in #enet's answer.
One way to address this is:
place the code to load data in a separate method say LoadDataAsync
in SetParameters/SetParametersAsync detect if the data reference - in your case Url - has changed in , and if so call LoadDataAsync.
The key here is understand component lifecycle and getting the code in the right place.
Put breakpoints in on OnInitialized and SetParameters and watch when they get hit when you load and do navigation.

when I click from a post page into another
post in domain.com/post/foo and domain.com/post/bar is definitely not a page but a literal path segment.
I've created a routable component named Foo:
Foo.razor
#page "/post/foo"
#code {
}
Foo is a routable component; that is, it is a page, and can be accessed by typing the url in the address bar of your browser, using an anchor element or the NavigationManager. You may embed it in a parent component as well.
post is, as I've said above, a literal path segment
But if you insist that post is actually a component page, then I guess it may look something like this:
Post.razor
#page "/post"
#page "/post/{Param}"
<a href="post/bar" title="Title">
Title
</a>
<div>#Param</div>
#code {
[Parameter]
public string Param {get;set;}
}
Now, when you type in the address bar a url like this:
https://localhost:<port-number>/post
You'll be navigated to the post routable component (page)
If you click on the anchor element, the url in the address bar will change to https://localhost:<port-number>/post/bar
bar is not a component; it is a parameter. The address bar changes, but you seem to be in the same post component, the data or content, however, do changes...
Note that when you click on the anchor element, you are being navigated to
a new Url ("post/bar"), but rendering engine does not create a new instance of the Post component in order to render the page, but instead it treats it as the same page with changed parameters. Thus it looks like no navigation has taken place, and nothing has changed, except the url in the address bar. I'm not claiming that your issue is the same, but it may stem from similar code usage.
Note that since Blazor does not create a new component instance, but uses the existing one, the OnInitialized(Async) pairs can only run once... So you'll have to use the SetParametersAsync method (" on initializedAsync is getting the "nextPost" information from the backend, but its just a plain http cal")
All the above was intended to ask you to do the simplest thing and provide the route templates........
Is bar a component?
Is foo a component?

Answer withdrawn as it breaks some component parameter recommendations by ASPNetCore Team - see https://github.com/dotnet/aspnetcore/issues/24599

On clicking capture hyperlink in string and do not open the browser

This div is in a radRotator control and generate a clickable link that, on click, opens the url in a new page of the browser.
<div class="link">
<span>Link</span>
</div>
I am looking for a method to capture the link value in a string when it is clicked and avoid to open the browser.
My final target is to pass such string to a method that will open the url in a window where I can filter out all the parts I do not like to show to avoid the user to leave the website and visit the one linked. I am a bit lost on this. Any hint?

Add an "onclick" event to your link, capture the href attribute and cancel the default click action by returning false.
E.g. (for simplicity I am using inline declaration)
Link
To expand on your example, you can do something like this:
ASPX
<a href="<%#XPath("link").ToString()%>" target="_blank" onclick="return getLink(this);">
JavaScript
function getLink(anch) {
var sLink = anch.href; // you can use this variable, it will hold the link now
// rest of your code
return false;
}

Tying it all together - ASP.NET with Bootstrap 3.0

I have an ASP.NET project (non-MVC) and I'm also using Bootstrap 3.0. This is my first time using this combination and need some guidance.
I have a gridview with a buttonfield column. Right now everything is showing up just fine with my gird and Bootstrap table formatting and its binding to my datatable - no problems there.
Next, I want to make the click of the button in the Buttonfield column to initiate a modal window and display a modal based on a unique ID from the row button that opened it.
I don't really know how to tie this all together with ASP.NET and Bootstrap. HTML literals? Dynamic ASP.NET panels? It doesn't matter to me whether there is a postback or not, I'd really just like some guidance or even pseudo-code on how these can be tied together.

Since the OP specifically requested bootstrap help...
You should go through the bootstrap documentation for modals http://getbootstrap.com/javascript/#modals
It makes no difference if you are using MVC or not and you should not need to do any kind of post back to display the modal.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
Will trigger element with id myModal to be shown.
Using bootstrap's own demo code in this jsfiddle demonstrates opening and dismissing the modal.
For the second part of the question, this updated jsfiddle shows how you can also use the button click event to set a value in the modal. You could do other actions in that event handler like get or send data to the backend or change other elements in the modal.
For your case, you would want to handle all button clicks in a single event handler but you can store the id in a custom attribute on the button element. I like to use custom attributes instead of parsing from name, id, or class attributes. This is the bootstrap convention.
$(function() {
$('button.btn').on('click', function() {
var value = $(this).attr('data-value')
$('div.modal').find('#target').text(value);
});
});
Here I have broken out how to get the custom attribute value from the button instance which was clicked.
Post what you have so far and what you still can't get working.
This also shouldn't be tagged with C# or asp.net as that is irrelevant.

You might need a simple js function to take care of that(as mike mentioned this has nothing to do with using or not using bootstrap since it is just some css stuff):
var RunDialog;
$(document).ready(function () {
RunDialog = $("#Id").dialog();
});

You can use ASP.Net Ajax ModalPopup for ASP.Net Web Form. You can google a lot of examples regarding GridView with ModelPopup.
ModalPopupExtender inside a GridView ItemTemplate
I want to make the click of the button in the Buttonfield column to
initiate a modal window and display a modal based on a unique ID from
the row button that opened it.
ModalPopup should work with Bootstrap.

ASP.NET Postback and URLs

I have a page that requires the user to go through several steps, however step is performed on the same ASPX page with different panels being displayed.
However this is a requirement that each step has a different URL, this could be a simple as a query string parameter, for example:
Step 1:
/member/signup.aspx?step=1
Step 2:
/member/signup.aspx?step=2
Step 3:
/member/signup.aspx?step=3
However I don't want to have to redirect the user to the new URL each time they continue to the next step, this would involve a lot of redirecting and also a switch statement on the page load to work out which step the user is on.
It would be better if I could alter the URL that is displayed to the user when the original request is sent back to the user, i.e. the user click "next" on step 1 the page then does some processing and then alters response so that the user then sees the step 2 URL but without any redirection.
Any ideas would be greatly appreciated.

Could you convert your Panels into steps in a Wizard control?

It would be a little more complicated than you probably want, but you could achieve this effect with the PostBackUrl property of the submitting button. I'm assuming each panel has its own "submit" button, and they could all use this property to "advance" the process. The drawback is that in order to get to submitted controls, you'd need to use the Page.PreviousPage property in order to access any controls and their values.

You could programmatically alter the PostbackUrl property of your 'Next' button on each Page_Load, based on the query string value. This is a bit strange though, as you wouldn't be able to use a standard event handler for the button click, and you'd have to use the PreviousPage property of the Page to get the data from the previous tab.
I'd say challenge this requirement. Why would anyone need to jump into the middle step? If it's a case of displaying the progress to the user, do this on the page, not in the URL.

You require that each step has different URL, than Response.Redirect is the only option. As you want to avoid the redirection, you can use IFrame but IFrame URL is not visible to user on his browser. I think redirect option is ugly(for both SERVER and CLIENT) as in this case, you first post on the page and than get that page. The best solution is POST BACK with some varible tracking step.

You could implement a form or url rewriting so that your urls end up being
/member/signup/step1/
/member/signup/step2/
/member/signup/step3/
To do this use the
HttpContext.RewritePath method which means you can rewrite /member/signup/step1/ to /member/signup.aspx?step=1 for example. See an example here.
I would also use the PRG (post request get) pattern so that each next link posts the form data of that step to the session then redirects the user top the correct next url. this will ensure that the user can navigate back and forth through the steps safely and also the url will remain intact in all your posts.

Check out server.transfer

Popups with complex functionality using jQuery

I am using jQuery to simulate a popup, where the user will select a series of filters, which I hope to use to rebind a ListView in the original window.
The "popup" is opened via an ajax request and the content is actually a diferent aspx file (the rendered output is injected into a div that acts as the popup).
I have another ListView in this popup, and it has pagination.
My problem is that since the popup is in reality html content inside a div in the same page, when I try to paginate, the whole page postbacks and is replaced with the aspx that has the filters.
How can I fix this?
I tried using an update panel to contain the ListView but it didn't work.

$("div.yourthingie").hide();
Will hide the part you want to show :) Instead of generating the popup on the fly, leave a small part already made, and hide it in the begining, when you need to show, unhide and add the information you need to.
Hope it helps

Either get rid of the HTML "crust" and just produce the <div> with its contents, or use an IFRAME.

First, let's think through what is happening. When you submit the original page, you are taking a "normal" Request/Response trip to get the code. On the page is a JQuery AJAX bit that fires off what is essentially a modal dialog. The desired effect is the user plays with the new page until they have figured out their filters and submits back. The problem is this "modal page" loses information when someone paginates.
The solution to this is fairly simple, in theory. You have to store the "filters" in the popped up page so they can be resent, along with pagination information. OR you have to cache the result set while the user paginates.
What I would do to solve this is create a static page that has the "filters" in place and work out the AJAX kinks separate from having the page post back to a parent page. Once you have all of the AJAX bits working properly, I would then link it into the popup routine and make sure the pagination is still non-problematic. THe final problem is creating a JavaScript routine that sends back to the parent page and allows the parent page to send its JQuery bits back to the server.
I am not sure about the HTML DIV part of the equation and I think you can solve the problem without this solution. In fact, I believe you can make the "modal popup" page without invoking AJAX, if it is possible to either a) submit the filters to apply via the querystring or b) fake a form submit to the second page. The query string is an easier option, but it exposes some info. Faking a form submit is not that difficult, overall, but could be problematic with a popup.
I am just firing off some ideas, but I hope it spurs something for you.