I encountered a issue with my current web application. When I access the link: https://localhost:44311/#shop, the page loads perfectly as expected. Here is a screenshot: https://i.sstatic.net/6G6CJ.png
However, when I try to change the URL to: https://localhost:44311/#/, in order to test the redirection control, the same content is displayed again without any changes. Here is a snapshot of what occurred: https://i.sstatic.net/Nivm6.png
The problem lies in the fact that all my ajax calls are being triggered repeatedly, leading to an infinite loop.
I have attempted to implement regex control for #/ and respect the pattern #/xxxx/xxxxx, but so far I have been unsuccessful. If you could offer assistance, it would be greatly appreciated!
Below is a snippet of my JavaScript code where I handle the page loading:
var ui = {
controller: {
page: {}
},
component: {
category: null
}
};
ui.controller.pageLoad = function (hash = null) {
if (hash === null) {
hash = window.location.hash;
if (hash.length < 2 || hash[0] !== "#") {
hash = "/shop";
}
} else if (hash.length < 2 || hash[0] === "#" && hash[1] === '/') { // add control regex for #/, must respect #/xxxx/xxxxx
hash = "/shop";
}
$.get(hash.substring(1), function (data) {
ui.controller.page = null;
$("#content").html(data);
}).fail(function (error) {
$.get("/Home/Error?status=" + error.status, function (data) {
ui.controller.page = null;
$("#content").html(data);
});
});
};