8/25/2020
I am working through an e-commerce example out of a book and the majority of the ASP.Net 3.1 Web App is in MVC. There are some simple pages where Razor Pages are used. And finally in administration we are using Blazor.
In setting up the routes in Startup.Configure() we have:
// MVC default endpoint
endpoints.MapDefaultControllerRoute();
// RazorPages endpoints
endpoints.MapRazorPages();
// Blazor endpoints
endpoints.MapBlazorHub();
// Map requests to SPA (Blazor)
endpoints.MapFallbackToPage("/admin/{*catchall}",
"/Admin/Index");
So I am thinking "/admin/{*catchall} would catch the following URLs (off of the base URL of course).
/admin
/admin/orders
/admin/products
Since Razor Pages are used to host a Blazor app, the Fallback when you go to /admin is really directed to /Pages/Admin/Index.cshtml which has this host file:
<!DOCTYPE html>
<html>
<head>
<title>SportsStore Admin</title>
<link href="/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<base href="/" />
</head>
<body>
<component type="typeof(Routed)" render-mode="Server" />
<script src="/_framework/blazor.server.js"></script>
</body>
</html>
which loads the Routed Component:
<Router AppAssembly="typeof(Startup).Assembly">
<Found>
<RouteView RouteData="#context" DefaultLayout="typeof(AdminLayout)" />
</Found>
<NotFound>
<h4 class="bg-danger text-white text-center p-2">
No Matching Route
</h4>
</NotFound>
</Router>
This loads the AdminLayout Component:
#inherits LayoutComponentBase
<div class="bg-info text-white p-2">
<span class="navbar ml-2">SPORTS STORE Administration</span>
</div>
<div class="container-fluid">
<div class="row p-2">
<div class="col-3">
<NavLink class="btn btn-outline-primary btn-block"
href="/admin/products"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Products
</NavLink>
<NavLink class="btn btn-outline-primary btn-block"
href="/admin/orders"
ActiveClass="btn-primary text-white"
Match="NavLinkMatch.Prefix">
Orders
</NavLink>
</div>
<div class="col">
#Body
</div>
</div>
</div>
You can see in the AdminLayout two NavLinks which work fine.
And here are the top of the two files they link to.
a) /Pages//admin/orders.razor:
#page "/admin/orders"
#inherits OwningComponentBase<IOrderRepository>
b) /Pages/admin/products.razor
#page "/admin/products"
#page "/admin"
This is what all the routes look like at this point:
/admin: Typing URL directly in
You can see there is no active state on the Products button even though I am there I guess because it is specified on a NavLink taghelper in the layout and must be clicked to get the ActiveClass applied.
But the route is found.
Now if I click products this is what renders:
So both /admin and /admin/products get me there.
By clicking the NavLink button the active state is applied to the Products NavLink button.
These two URLs get me there because of the two routes specified in the Products component:
#page "/admin/products"
#page "/admin"
If I click the Orders NavLinkButton:
Orders ActiveState is applied from clicking the Orders NavLink button and matching this route at the top of the orders component:
#page "/admin/orders"
But now when I manually enter
/admin/products
or
/admin/orders
I get ambiguous route error message:
and for /admin/orders the same thing.
If I comment out the /admin route in Products.razor I get the NoRouteFound response from the Routed.razor file:
#page "/admin/products"
#*#page "/admin"*#
So routing has always been confusing to me.
I think what is happening is the catch all in startup:
// Map requests to SPA (Blazor)
endpoints.MapFallbackToPage("/admin/{*catchall}",
"/Admin/Index");
goes to the Index.cshtml Razor page as the host of the SPA app and initializes the Blazor app. From here on out there is a persistant HTTP connection to the Server (a little different from the likes of Angular) and routing now is handled by the Blazor app until the user clicks on or manually enters an endpoint registered before the Blazor endpoints in StartUp. So is this typical in an SPA or is there a way to make manual URL entries work. This may be cleared up as I work through the chapter but I am always fuzzy on routing in all of my technologies.
8/26/2020 - Update
Now when working in the products or orders components, every time I make a change, even a small HTML change, the browser says "reloading", and when I click reload or refresh, I get the ambiguous router thing again, so I am having to clean and rebuild after every little change to see the rendering in the browser. This is very annoying.
Does anyone else have this problem?
I had to add the route to the hosting Index.cshtml razor page:
#page "/admin"
Everything seems to work now.
Related
Try to render elements based on device screen size, say for example I have two DIVs (desktop and mobile) and I wanted to render desktop DIV for desktop user only and mobile so on.
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="desktop-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-desktop">Click Here</button>
</div>
</sly>
<sly data-sly-test="${ANY_LOGIC_HERE}">
<div class="mobile-render">
<button type="button" aria-label="${item.Label}" class="btn btn-primary btn-mobile">Click Here</button>
</div>
</sly>
I know there was some CSS/JS trick, but I need it through server sides. So that on-page view source can have only one div.
Before answering this, I'll remind you that it's generally bad practice to render different markup per device/user-agent. That makes your pages non-cacheable and user-agent is generally not very reliable. There are other techniques, from client-side DOM manipulation to dedicated mobile pages (which you could redirect to in case the device is a mobile).
That said, there's a helper MobileUtil that you could leverage in your Use-Object/Sling Model to determine if the device requesting the page seems to be a mobile.
Make sure to check all AEM server-side mobile APIs!
We implemented a simple nuxt app with a basic form and deployed it to netlify.
When pressing the "Submit" Button of the Form, we receive a 404.
Here you can find the link to the deployed netlify app:
EDIT -> Removed Link
After looking through the troubleshoot guide, they listed that the added "netlify" or "data-netlify="true" attributes should not be visible if netlify recognized your form, but they are.
Plus the form can't be found in the "form" configuration tab of the netlify backend.
Nuxt config:
SPA
Tailwind
We tried to add the necessary attributes for netlify:
netlify or
data-netlify="true" & netlify-honeypot="bot-field"
We also added a "pre-render" library called prerender-spa-plugin.
Here you can find the contact.vue page content.
Simple form with "name" attributes set according to netlify documentation.
<template>
<div>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<p class="hidden">
<label
>Don’t fill this out if you're human: <input name="bot-field"
/></label>
</p>
<p>
<label
>Name
<input
type="text"
name="name"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<label
>Email
<input
type="email"
name="email"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<button
type="submit"
name="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Send
</button>
</p>
</form>
</div>
</template>
<script>
export default {};
</script>
<style>
.hidden {
display: none;
}
</style>
It would be great if we can manage to fix this, so that netlify finally recognizes our form.
Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.
The form is required to be in the rendered files at deploy time. The problem with SPA mode is that none of your pages are actually rendered as HTML. You can check this by right clicking the page, and clicking "View Page Source". You won't be able to find the form.
Netlify addresses this problem here in their docs.
They have a specific post for fixing this for a Vue app here
A little more digging on the the issue and we find a Nuxt solution here:
Place the following in static/form-dummy/index.html:
<form name="MYFORM" action="/form/success" netlify>
<!-- form controls here -->
</form>
Place the following in pages/form/index.vue (Or whenever you've named your Vue file)
<form name="MYFORM" action="/form/success" method="post">
<input type="hidden" name="form-name" value="MYFORM" />
<!-- form controls here -->
</form>
From the post:
You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.
I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />
I'm maintaining a website which has a series of forms that user submits. Each form does an HTTP POST to the server, which then renders the next form to the browser.
i.e., index.html contains a <form action="form1.php" method="post">, and then form1.php renders a <form action="form2.php" method="post">, etc.
When I navigate using the back button from say, form2.php to form1.php on my iPhone, the request is an HTTP GET for form1.php, rather than a resubmit using HTTP POST.
This happens intermittently, but more reliably if I minimize safari and then re-open it again before I hit the 'back' button.
Note: This happens whether I'm using chrome or safari on my iPhone.
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I have a small repro set up here:
http://kong.idlemonkeys.net/~shaun/fi/
Sources -- sorry about some of the extra cruft, but they should convey the point.
index.html:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="start-form" method="post" action="form1.php">
<input type="hidden" name="foo" value="bar"/>
</form>
<div id="click-me" style="width: 200px; height: 200px; background-color: pink;">Click me</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#click-me').click(function() {
$('#start-form').unbind('submit').submit();
});
});
</script>
</html>
form1.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<?php if($_SERVER['REQUEST_METHOD'] !== 'POST') { ?>
<h2> you're doing it wrong </h2>
<?php } ?>
<h1> This is form 1: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form id="form1" method="post" action="form2.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').submit(function () {
alert('starting form submit');
});
});
</script>
</html>
form2.php:
<html>
<body>
<h1> This is form 2: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form method="post" action="form3.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
</html>
Repro Steps:
Load http://kong.idlemonkeys.net/~shaun/fi/ in safari or chrome on iOS
Click the 'click me' button, which submits a POST to form1.php
Click the 'submit' button, which submits a POST to form2.php
Minimize safari (i.e., go to the home screen), then bring it back up.
Hit the 'back' button, notice that form1.php now informs you it was fetched via HTTP GET
I've been able to confirm the sequence of events using wireshark
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I believe it is wrong. POST requests may not be idempotent, i.e. issuing the same post multiple times may change the state of the server each time, and that can be dangerous. The browser has no way of knowing whether you really intend to resubmit the form that got you to the current page, for example, so it can't assume that it's safe to send the POST again. Instead, it uses a GET because a GET won't affect the state of the server.
This very StackOverflow page is a fine example. After I click the 'save' button at the bottom, my browser will no doubt issue a POST to send my answer to the server, and then show me the resulting web page that includes my new answer. If I hit the back button, should my browser again issue the POST? That could result in a whole new copy of my answer being added, which doesn't seem like the right thing to do at all. Using a GET, on the other hand, will safely reload the previous page without resending my answer.
It is probably a good idea to always send HTTP 302 redirect after POST то avoid this sort of inconsistent browser behavior http://en.wikipedia.org/wiki/Post/Redirect/Get
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>