I have a first Ui-View called A that dynamically loads a page fine.
I then put another link (or route) in the page A, however Ui Route wants a ui-view in page A.
How can I go back to the orginal ui-view, and place page B in that instead of A's?
Im trying to have a nested route go into the orginal UI-View instead of a new one.
By naming UI-View's you can define where the router will put the view.
Related
I'm working on a dotnet 6 mvc application using RazorPages, and I'm having a problem with strange routing behavior.
I have a RazorPage /Pages/News.cshtml
This page is accessible using the default route /news
When called without any parameters this page will display an index of news articles.
I also want this page to be able to display a specific news article, via a path like this...
/news/1234-my-news-article
To achieve this, I've added a config like so...
builder.Services.AddRazorPages(options =>
{
options.Conventions.AddPageRoute("/News", "News/{id:regex(^\\d+\\-.*)?}");
});
In my templates, I can then use links like this...
<a asp-page="/News" asp-all-route-data="#(new Dictionary<string, string> { { "id", "1234-my-news-article" } })">My News Article</a>
or
<a asp-page="/News">All Articles</a>
However, once I've navigated to a specific article, the index link doesn't render correctly, and will instead link again to the same article. It appears to be re-using the current routing parameters.
Is there some way to avoid this?
update:
I've found a work-around, if I use this tag instead...
<a asp-page="/News" asp-route-id="">All Articles</a>
then it will link correctly to "/news".
It seems a bit counter-intuitive to have to explicitly set this to blank. I would have assumed it would default to unset, unless explicitly set otherwise.
This is known as ambient route values (https://www.learnrazorpages.com/razor-pages/tag-helpers/anchor-tag-helper#ambient-route-values), where the current route values are automatically added to outbound links which are generated by the anchor tag helper if the destination page is the same as the current page. In older versions of Razor Pages, this was the default behaviour for all pages.
As you have discovered, you can override this by setting the route value to an empty string, or as suggested elsewhere, to use a plain anchor tag for your link.
asp-page tag helper will add id value to the route by default.It is by design.If you don't want to add it,you can try to use href to replace asp-page:
All Articles
So I am struggling with something that I am sure has an elegant solution that I am missing. I have a nested route system where the parent /data/streams (green) has a list of items that have action forms on them and where the action loader is located. However, these can be submitted from a child route /data/streams/$streamId (purple). All works fine except if the user is on a child route they are redirected back to the parent. I can kind of solve this with redirect and embedding the current location in the small pause form, but then I can't use useActionData for displaying error notifications when a call fails.
Remix treats <Form> submissions as navigations (standard browser feature). That is why your child route POST is navigating to the parent route (since that's where you're posting to).
Remix also supports form submissions that are not navigations (standard fetch). To do this, use <fetcher.Form>. NOTE: data returned from the action is available on fetcher.data. Also check fetcher.state and fetcher.submission to handle optimistic UI.
const fetcher = useFetcher()
return <fetcher.Form method="post" action="/data/streams">
https://remix.run/docs/en/v1/api/remix#usefetcher
I'm new with Ember and I would like to show a full screen overlay when a user presses a "get stuff from the server" button.
What is the best way to achieve this?
Does Ember already provide something built-in? Or is it that the only way is to have a piece of HTML in one of my templates, to show/hide it when the promise where I make the AJAX call returns?
You have a few options available to you.
The first concerns a route change. Conventionally speaking, if the user is hitting a button that transitions to another route, a separate route can be created to handle this in-between loading experience.
To describe this briefly, if you have a route named foo, creating a sibling route named foo-loading with an associated template, will show a "foo-loading" page state while things are being fetched, and then dismiss it once things are good.
Alternatively, as you've hinted, if the call to action for a user intends an updated result on the same route, a loading service could be useful. In your application template, you could have a loading div that is hidden by default. Prior to initiating an AJAX request, you could turn the loading state on and reveal the loading div. Then, once the AJAX call is settled, the finally block could include a call to conceal the loading div.
This latter approach would involve a conditionally loaded block in the primary application template, a loading service handling show and hide, and a loading template.
You could use ember-modal-dialog to create a loading screen component that gets rendered when you're waiting for your ajax request.
For example:
// view.js
showLoadingScreen: true
// view.html
{{#if showLoadingScreen}}
{{loading-screen}}
{{/if}}
// loading-screen.html
{{#ember-modal-dialog}}
<div class="loader-full-screen-class"></div>
{{/modal-dialog}}
The advantage of the component/ember-modal-dialog is that this pattern is usually implemented as a modal, and this library is the standard in ember. The component then allows you to put it anywhere you need it to be.
I have a regular view I'd like to use in another page, appearing magically in a jQuery-like accordion if the expand button is clicked. If I call it using:
Html.Partial(A_non_partial_view, new view_model_used_by_the_non_partial_view())
...does that have a chance of working, or is MVC not plumbed that way? (I'm using MVC 3 if that helps.)
You can, but only if it is in the same controllers views folder or in the shared views folder. otherwise you will have to specify that path fully which isn't practically really.
If you use Html.Action or Html.RenderAction, then that action will need to return a PartialView otherwise it will push out a full html page again with head tags etc etc
Imagine I define video-type node, which displays for example a title and description, along with the video itself. And imagine I have a block of video teasers, where each teaser links to one such video node. And imagine this block is added to the bottom of any page displaying a video-type node: when the user clicks on one of the video teasers, the page reloads with a new video-type node.
Finally, imagine all of the above but without having to reload the full page.
If you go to http://whitehouse.gov/video, you will see what I am trying to accomplish. When you click on one of the video teasers, the url changes to the url for the new node, but the full page does not reload. Only the top section of the page, displaying the new node, gets reloaded.
My question: How do they do this?? How can I load the node content into a particular div on page, without reloading the entire page?
You can use hook_menu to implement a MENU_CALLBACK to it's own handler function in Drupal. You would return JSON or XML or an HTML fragment or whatever you want with the HTML for the new video. Then use JS to update the DOM with the new content received from the server. Updating the URL can be done with JS as well.
So basically you are going to handle video clicks on the client side with JS. The JS would make a request to your MENU_CALLBACK and you would receive whatever data you choose to implement back from the server. JS takes the data and updates the DOM.
With something like jQuery, you could use the $.get method and use the success attribute to update the window history in modern browsers.