I have several links in this base razor project. For some reason my links stopped working. Here is an example:
<a class="nav-link text-dark" asp-controller="Contato" asp-action="Contato">Contato</a>
My project layout is pretty simple:
When I run the project and click on the non working link it goes to this url:
https://localhost:44372/?action=Contato&controller=Contato
However, when I navigate to the correct URL it works fine:
https://localhost:44372/Contato
I did not change any routing in the program.cs and use the default pipeline stuff:
builder.Services.AddRazorPages();
app.UseRouting();
app.MapRazorPages();
Any help in this routing issue?
There are no controllers or actions in a Razor Pages app - only pages. Therefore your anchor tag helpers should use the asp-page attribute:
<a class="nav-link text-dark" asp-page="/Contato">Contato</a>
https://www.learnrazorpages.com/razor-pages/tag-helpers/anchor-tag-helper
Related
I am developing a chrome extension using angular 11. For building the project I have used custom-webpack and provide the entry point to background.ts as suggested in blog: Link.
<div class="container">
<span><b>Steps</b></span><br>
<span *ngFor="let step of steps;">
{{step}}<br>
</span>
</div>
I am using the above snippet of code in my app component template. Items are getting pushed to steps array at runtime, If I log the steps array in console, I am seeing that items are being pushed to array but not rendered to UI.
Please help me to find out like how I can make use of ngfor in the chrome extension. For developing the extension, I referred to the above said link.
For me very basic navigation is not working with newly generated jHipster app.
I have 2 html pages in the root: index.html and network.html
Here is how I would like to redirect to network.html:
<a href="/network.html">
<button type="submit"
class="btn btn-info btn-sm">
<fa-icon icon="project-diagram"></fa-icon>
<span class="d-none d-md-inline">Network</span>
</button>
</a>
Unfortunately this doesn't work and I get 404 Not Found.
Can you please advise how to make external navigation working with JHipster? I have tried all examples from How to redirect to an external URL from angular2 route without using component? and nothing works
You have to modify src/main/java/{your-package}/config/WebConfigurer.java and add a resource handler for your static file. By default, all routes are redirected to index.html, which is how most SPA applications work.
I'm trying to customize the page UI on Azure AD B2C unified sign in/sign up page.
I was able to create my template and upload all the assets i.e. html page, images and css to my Azure Blob Storage container with the right CORS settings.
When I pull up the page, however, it looks absolutely HORRIBLE! It doesn't seem to support Bootstrap. I read somewhere that no JavaScript is allowed. Is that the reason for this?
Once I upload my custom HTML page, Azure AD B2C seems to be stripping off a lot of the design elements necessary for my customization such as id and style in my body tag -- see below:
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
When I inspect the page source once my custom page is rendered, I see that all my classes and Id's are removed along with Bootstrap references e.g. css and js.
Am I getting this right? No Bootstrap which means Azure AD B2C only supports customization of the most basic kind?
Your HTML template can include any external, head, or inline styles but it can't include scripts.
An example of a customized page can be found at the WoodGrove sign-up or sign-in page.
The HTML template for this customized page can be found in the WoodGrove GitHub repository.
This HTML template includes Bootstrap's Reboot styles as well as the WoodGrove's specific styles.
Azure AD B2C creates the head and body elements and then copies the child elements for each of these head and body elements from your HTML template to its HTML document.
Therefore, you shouldn't add attributes to the body element in your HTML template, because they aren't copied.
You can import the bootstrap references. Please see this document: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c
See also: https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect
It looks horrible for a reason. No styling is applied to the page so that it can be fully customizable. You can reference Bootstrap for CSS; however, I have run in to issues when using bootstrap.js for modals since it appears the Azure B2C API uses bootstrap for modals...In my experience, it is best to rely on Vanilla JS and to leave off any references to third-party JS.
It is possible to use JavaScript if you are using your own custom policies. There are some limitations to JavaScript and the best approach is to try to accomplish anything using the policy first.
To enable JavaScript use the following as guide:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
When referencing external CSS/JS files, the URL must be absolute. This is true for the head section of HTML files as well as any references within JavaScript. Relative URL's can only be referenced within a CSS file.
Incorrect:
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
Correct:
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
I'm building some pages in liferay 6.1 GA3, so recently I was in need of embedding liferay web content portlets in an other web content portlet for this I use something like :
<div class="somecontent_stuff">
<runtime-portlet name="56" instance="hj33" queryString=""/>
</div>
<div class="some other content">
<runtime-portlet name="56" instance="ze33" queryString=""/>
</div>
<div id="part_right">
<runtime-portlet name="56" instance="nj33" queryString=""/>
</div>
And this is working perfectly fine, but when I use my web content in multiple page I have the change instance id manually and for every page, which is exhausting and risky (because I have lot of pages like this ).
Is there any way to generate this code automatically ?
Capture the instance id of your embedded portlet using a web form. See this for more info
I am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>