So I used the Intelligencia URL rewriter to rewrite my .aspx pages. (I find it very easy to implement to rewrite URLs compared to other methods).
Everything worked fine until i realized that Ajaxfileupload control which had been working quite well up to this point was no longer saving the file to destination onuploadcompleted.
The possible reason given in various forums is that the rewritten URL effects the control's scriptresource and webresource paths which caused it to breaks - i.e. not work as expected.
I spent hours and hours looking for a fix which included trying to stop the url rewriter from rewriting .axd files - which didn't work, and setting control Adapters for URL rewriting and AJAX - which also didn't work.
I fixed my problem by loading the pages with Ajaxfileupload control inside an iframe and rewriting the url to load the iframe's parent page
This brought its own challenges as well because the iframe was not taking the entire age width and height of the screen (mobile).
I fixed this by setting the iframe width and height to 100vw (please note 100% will not work).
Last but not least i added :
<base target="_parent"/>
to the 'child pages' so that other pages do not have to load inside the iframe when navigating from the pages inside the iframe. very important.
Finally i also had to add
body {overflow-x:hidden;}
to the pages loading inside the iframe to remove horizontal scrollbars on the iframe because pages were 'wiggling' inside it.
And that's it. A user would hardly know if the page is loading inside an iframe. Ajaxfileupload control works well and the intelligencia Url rewriter works.
See the html for the iframe parent page below:
Also please take note of
<meta name="viewport" content="width=device-width ..
with sets the device screen width and heights for the iframe to expand to.
'Child pages' were loaded in code behind by setting 'runat='server'' on iframe as below:
iframe1.Attributes("src") = "~/post.aspx?rp=123"
page html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Post</title>
<style type="text/css">
html, body {
height: 100%
}
body {
margin: 0px;
display: flex;
overflow-x:hidden;
}
iframe {
height: 100vh;
width: 100vw;
background-position: center;
background-image: url('/throbbersm.gif');
background-position-y: 40%;
background-position-x: 50%;
background-repeat: no-repeat;
background-attachment: inherit;
overflow-x: hidden;
margin: 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.5; user-scalable=yes" />
</head>
<body style="display: flex; height: 100%; width: 100%; ">
<form id="form1" runat="server">
<iframe id="iframe1" runat="server" frameborder="0" class="iframe"></iframe>
</form>
</body>
</html>