MVC4 site and CNAME - only showing #RenderBody content - asp.net-mvc

I just deployed my MVC4-.Net4.0 website to http://regatta.azurewebsites.net/
This works nicely - the jQuery and jQueryMobile scripts renders this perfectly.
I then followed the instructions and added my own domain - http://regatta.albrektsen.net and configured my dns supplier with both a CNAME and an A record pointing to azure.
This again works fine - I get to http://regatta.albrektsen.net - and the site comes up.
However: When accessing my custom domain, I only get the stuff rendered by #RenderBody()
Basically the
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Styles.Render("~/Content/mobileCss", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div data-role="page" data-theme="b" #TempData["DataUrl"]>
<div data-role="header">
#if (IsSectionDefined("Header")) {
#RenderSection("Header")
} else {
#Html.ActionLink("Home", "Index", "Home");
<h1>#ViewBag.Title</h1>
#Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
#RenderBody()
</div>
</div>
Is missing when accessing my custom domain - only the stuff displayed by #RenderBody is shown.
How is this possible? What am I doing wrong?

Oops - embarassing...
Actually - this turned out to be a problem with my PC's DNS cache.
Issuing ipconfig /flushdns (With admin privileges) solved the issue. My "local" regatta.albrektsen.net was pointing to a test server.

Related

The selector "app-root" did not match any elements in asp.net mvc

I am have ASP.Net MVC5 Web application & in need to integrate Angular5 app with it.
Referring to the below link, I am doing the integration.
Integrate Angular 5 with ASP.NET MVC 5
This command can only be run inside of a CLI project
When running the standalone Angular5 app, it runs fine. but when the same component integrating with Razor view, I am getting the below error.
The selector "app-root" did not match any elements
It's been more than a day that I spent on fixing this.
Index.cshtml looks as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/bundles/styles.bundle.js" rel="stylesheet"/>
<script src="/bundles/inline.bundle.js"></script>
<script src="/bundles/polyfills.bundle.js"></script>
<script src="/bundles/scripts.bundle.js"></script>
<script src="/bundles/vendor.bundle.js"></script>
<script src="/bundles/main.bundle.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container body-content">
<div class="row">
<app-root></app-root>
</div>
<hr />
<footer>
<p>© 2018 - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Thanks.
OMG!!
Two steps fixed this big head breaking issue:-
added <base href="/"> in head section
moved the bundles in the bottom of page i.e., just before the closing body tag
#Styles.Render("~/Content/Styles")
#Scripts.Render("~/Scripts/Bundles")
</body>
Hope this helps!!
Keep the code in Index.cshtml as below. It should work.
<html>
<head>
<base href="/" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/lib/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/lib/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/lib/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/lib/main.js"></script>
</body>
</html>
I had this problem, but then realised the cause was that I hadn't wrapped my static script references in the #section scripts tag as per the demo, and they were above the app-root tag. The layout needs to write the scripts into the page after the app-root tag. If the tag appears before the references, you'll get that error message.

Angular 2 with ASP.NET Core duplicating <html><body>

I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});

MVC Login Page with Custom Layout and ViewStart

I have a problem I cannot wrap my head around, it is driving me crazy. I used the default template for MVC projects in VS2013 and everything works fine. I can login with users I've created using the Forms Authentication, etc. The problem I have is that when I drop a _ViewStart into the Account views folder, and use a custom layout for the login pages ... I keep getting redirected to the login page everytime I try to login. My Login Post method is also not being called, only the Default Login ActionResult fires. If I take the ViewStart file out and use the default layout, I have no problems.
Here is my _LoginLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Corporate</title>
<link rel="stylesheet" type="text/css" href="~/Content/style.css">
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
</head>
<body>
<div class="holder login">
<div class="row">
<div class="col-lg-5 left">
<img src="~/images/logo.png" alt="logo" />
</div>
</div>
<div class="row">
<div class="col-lg-6 border">
<img src="~/images/corporate.png" alt="corporate" />
<br />
<form>
#RenderBody()
</form>
</div>
</div>
<footer>
<p>© #DateTime.Now.Year - Application. All Rights Reserved.</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</div>
</body>
</html>
Here is the ViewStart...
#{
Layout = "~/Views/Shared/_LoginLayout.cshtml";
}
The login page is basically the same boiler plate page provided when you start the project. Everything works until I start trying to use a custom layout and viewstart.
Ok. I'm dumb.
#using (Html.BeginForm("Login", "Account",....
Creates Form tags. My layout had Form tags wrapping the RenderBody(). I was essentially nesting form tags which is a nono. Mystery solved.
It's the little things that get you.

Why won't JQuery Mobile toolbar appear

I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>

Mixing single page and multiple page documents in jQuery Mobile

I'm starting with jQuery Mobile and I have a problem. I have two HTML documents:
page1.html
page2.html
page2a
page2b
The problem is the following:
when I browse from page1.html to page2.html, it displays page2a, but I can't browse to page2b
when I browse from page1.html to page2a, it stays on page1.html
when I browse from page2.html to page2a or page2b, it works well
What is wrong with my solution? Is there any good solution to have that working properly?
Here is a code for reference:
Page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Single page</h1>
</div>
<div data-role="content">
<p>See page 2.</p>
<!-- <p>See page 2a.</p> -->
</div>
</div>
</body>
</html>
Page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #a -->
<div data-role="page" id="a">
<div data-role="header">
<h1>Page 2a</h1>
</div>
<div data-role="content" >
<p>Show page "2b"</p>
</div>
</div>
<!-- Start of second page: #b -->
<div data-role="page" id="b">
<div data-role="header">
<h1>Page 2b</h1>
</div>
<div data-role="content">
<p>Back to page "2a"</p>
</div>
</div><!-- /page b -->
</body>
</html>
Check the below question. It seems it only works with data-rel="external".
JQM Multipage
UPDATE:
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
Source: JQM - Linking pages

Resources