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
Related
Maybe this is a very normal behaviour or I am missing something very basic. I have a page named Default.aspx and it is set to Default page for my web application. On this page there is a dropdownlist for categories and when I select any value then response.redirect is called for the same page and category id is passed as a query string. Now everything work just fine when I test the application locally. When I publish the website on the server and call the website with url www.mywebsite.com then the default page is displayed but page name is not displayed. I have no issue with it but without the page name my response.redirect stops working. So just to summarize all this in following lines,
www.mysite.com
// On Selected Index Changed
Response.Redirect("~/Default.aspx?catId="+ ddlCategory.SelectedItem.Value);
The Url should be for first category
www.mysite.com/Default.aspx?catId=1
but it is not changing and on postback www.mysite.com is displayed.
However if in the address bar I have,
www.mysite.com/Default.aspx
and now if I change the selected index of drop down then it works fine and the url becomes,
www.mysite.com/Default.aspx?catId=1
Now I don't know whether this question was asked already because I don't even know what the issue is and what should I search.
Update:
Now this is reproduced in the local system also. It seems that when the page name Default.aspx is not present in the address bar with url then SelectedIndexChanged is not called. If Default.aspx is in the address bar then SelectedIndexChanged is fired.
Well I am still unable to find the exact reason for the behaviour that I have mentioned in my question but I have applied a workaround. I am now not calling the SelectedIndexChange event from code behind, instead I am using Javascript to redirect to the same page with query string.
<script type="text/javascript">
function CategoryChanged() {
var ddlReport = document.getElementById("<%=ddlCategory.ClientID%>");
window.location = 'Default.aspx?catId=' + ddlCategory.value;
}
</script>
And called this on onchange of my dropdownlist,
onchange="CategoryChanged()"
Beside this solution I would love to know that why the code behind event was not called when page name is not mentioned in the url. So if anyone has any idea do share their thoughts.
Background
Here's what I want to happen:
A user is on one page1.html (jsFiddle).
When they click on one of the <a href...> links, I want to navigate to page2.html (jsFiddle) and simulate the user entering the number into the textbox and clicking on the button.
Example: On page1.html, user clicks on display 2. Then we will navigate to page2.html and get an alert of 2 (as if user had entered 2 and clicked the button).
Question
How do I do this?
Is there a way to make a C# method with a specific URL to navigate to, such as page2.html/searchfor/2?
Or is there some way in JavaScript to manually go about doing other things after navigating to <a href="page2.html">?
Things I've tried
Using a <span> with an onclick function, but then it's not a true link like <a href> where I can middle click to open in new tab and right click to follow link
Wrapping my first attempt in <a href> tags, like <span>Display 2</span>. This still doesn't solve the problem of performing extra actions after navigation.
Note
I am building this webpage using Entity Framework, ASP.NET MVC, and C#.
I have simplified the problem for discussion purposes, but the concept is the same.
Try using the page2.html document's onload() function. You can pass parameters through the URL, then take that data and perform "other actions" as soon as the document is loaded.
I am writing a website with Visual Studio 2008, C# 3.5 and ASP.NET MVC 2. I put the navigation bar in the masterpage.But there is problem that I will not know which button is needed to be highlight(current page) in the navigation bar.
I want get the current page that need to be highlight by masterpage self (not through the content page).And I don't think it is a good way to get the current page by url string.Because I have no idea about the final url is.
So how can I do this?
I guess you could set a ViewData["currentPage"] value in the Action methods, this would allow you to process that ViewData in the Masterpage. That is, however, off the top of my head and I'm sure there's a more elegant way to do this.
When you click the link in the navigation bar (in the master page) that should be triggering a controller action that will decide which view content page will be shown. In that action method you can (as Lazarus suggests) add some data identifying the current page to ViewData that will be picked up by the master page to modify the navigation bar.
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
I am designing a winforms based testing app (which is based upon WatiN). I specify a page to test and the value to insert into a textbox, and then click the corresponding button.
Is it possible to add a query string to the request I make (when clicking button) and then get the URL of the next page? Based on this, I need to screen scrape it.
Not sure about Watin syntax, but in Watir (Ruby version) you can get URL of the page displayed in browser with
browser.url
Or do you need to get URL of the next page before you open it?
Based on your comment to AmitK, Ċ½eljko's answer is right.
In WatiN (and C#), the syntax is:
Console.WriteLine("The current page is:" + ie.Url.ToString());
(just in case: 'ie' is the browser reference, use whatever object you use to enter text and click buttons)
What exactly do you mean by "next page" ? Does the form when submitted redirect to another page? If so, you will receive a HTTP 302/303 status code with the URL of the next page.