How to use data-ng-view in _layout.cshtml

Question

0.00/5 (No votes)

See more:

I am trying to crate a MVC application with Angular. My application has common Header and footer. So I added it in _layout.cshtml. There are some static pages in the application. Hence I want to load this using Angular routing.

Here is my _layout.cshtml

HTML

<!DOCTYPE html>
<html data-ng-app="HappyHut">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" })
            </div>
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/ContactUs">Contact Us</a></li>
                    <li><a href="/AboutUs">About Us</a></li>
                    <li><a href="/login">Login</a></li>
                    <li><a href="/register">Register</a></li>
                    <li><a href="/Test">Test</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content" data-ng-view>
        @RenderBody()
        <hr />
        <footer>
footer data
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    @Scripts.Render("~/bundles/Angular")
</body>
</html>

For testing purpose I have inserted some test html data in main.cshtml.

and here is my js file.

JavaScript

var HappyHut = angular.module("HappyHut", ['ngRoute']);

HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('!').html5Mode({
        enabled: true,
        requireBase: false
    });

    $routeProvider
    .when('/ContactUs', {
        templateUrl: 'Home/Contact'
    })
    .when('/AboutUs', {
        templateUrl: 'Home/About'
    })
    .when('/Test', {
        templateUrl: 'Home/Test'
    });
}]);

Here the test.cshtml is like

C#

@{
        //Layout = null;
    }
    Hi Test

When I am loading Main.cshtml, the page gets loaded but body part gets hidden. If I click on Test, it gets loaded. However, if I add Layout = null, the same thing happens as Main.cshtml and a pop-up is opened which says

page is not running due a long running script

in the console it logs below error more than once for above issue

tried to load angular more than once.

Now I don't want to copy Header and footer in all the pages.

Can anybody please tell me how to proceed to make Main page content visible or all the pages which will be created using _layout.cshtml?

Posted 16-Nov-14 18:22pm

Pratik Gaikwad

Add a Solution

Comments

Nathan Minier 17-Nov-14 9:04am

What does your Home/Test action look like?

Pratik Gaikwad 17-Nov-14 13:44pm

@{ //Layout = null;
}
Hi Test

Nathan Minier 17-Nov-14 13:46pm

That's a view. What does the MVC controller action look like?

Pratik Gaikwad 17-Nov-14 14:58pm

Ooopppss.. Sorry.. Here you go...
Nothing in it... For the time being its just returns View

public ActionResult Test()
{
return View();
}

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2014-11-18T00:56:00

Your issue is that you're trying to load partial HTML via Angular that's delivered with full-content headers. This is likely making Angular attempt to parse the page in a different way and is leading to your code break.

When you're dealing with Angular templates you need to make sure that you're returning PartialViews or it will break. The View method forces a postback, which is problematic.

C#

public ActionResult Test()
{
    return PartialView();
}

Everything else looks fine.