All geek questions in one place

Corner Routing with Asp.Net Mvc

I am trying to create a SPA with Asp.Net MVC. I use angularJs routing for this. This is my project hierarchy. enter image description here

My code is Layout.cshtl

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng‐view style="margin‐left: 10%; margin‐right: 10%;">
    </div>
//... footer
</body>
</html>

My app.Js code is as follows:

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

I want to load my Home.Cshtml partial view inside ng-view. But when I launch my application, it shows only a partial view of the house.

also when i click on Project then it should display ProjectDetails.cshtml inside ng-view.

inside ProjectDetails.cshtml

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>
+4
source share
5 answers

, Angularjs.

MVC:

ASP.NET URL-, -. URL- , URL-, , .

Angular :

Angular.js routing MVC MVC.

:

Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

, MVC- angularjs. ?

cshtml html.

Angular MVC , :

  • Angular .
  • MVC .

.

, :

ASP.NET MVC AngularJS?

:

Anchor href .

href="#/Home", href="#Home"

, ,

 <a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>
+4

angular. , url

www.example.com/Home/Index - MVC HomeController Index ActionMethod. , mvc, .

, . Url www.example.com/Home/Index #/angular -route. URL- - MVC HomeController ActionMethod. angular

`var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
 app.config(function ($routeProvider) {
    $routeProvider
        .when("/angular-route", {
        templateUrl: "/Html/GetHtml?type=angular-route",
        controller:"AngularController"
    })   
    .otherwise({redirectTo:"/Home"})
});`

templateUrl: "/Html/GetHtml? type = angular -route",

Html - MVC-, GetHtml - ActionMethod. ActionMethod , angular, , .

: "AngularController" , angular mvc. angular Controller MVC.

angular :

 app.controller('AngularController',function($scope){
        alert("my js controller is called");
    });

, .

+2

. MVC- : "", "", " " "", , ? angularjs?

:

:

    $routeProvider
    .when('/', { // For Home Page
        templateUrl: '/AngularTemplates/Home.html',
        controller: 'HomeController'
     })
    .when('/Home/Contact', { // For Contact page
        templateUrl: '/AngularTemplates/Contact.html',
        controller: 'ContactController'
    })
    .when('/Home/About', { // For About page
        templateUrl: '/AngularTemplates/About.html',
        controller: 'AboutController'
    })
    .when('/Home/User/:userid', { // For User page with userid parameter
       templateUrl: '/AngularTemplates/User.html',
       controller: 'UserController'
    })
    .otherwise({   // This is when any route not matched => error
       controller: 'ErrorController'
    })
}]);

:

var app = angular.module('MyApp'); app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.Message = "This is User  Page with query string id value = " + $routeParams.userid;}]); ...

Angularjs routing asp.net mvc example

+2

.cshtml, url, MVC.

, MVC {controller}/{action}/{id?}, :

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Home/Home", //points to an mvc route controller=Home, action=Home
        controller:"HomeController"
    })
    .otherwise({redirectTo:"/Home"})
});

, , MVC .

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Home()
    {
        return View();
    }
}

href, hashbang (#)

<a href="/#/Home">Home</a>
<a href="/#/Projects">Projects</a>
0

:

MyAngularApp.js

var myAngularApp = angular.module('MyAngularApp', ['ngRoute']);
myAngularApp.config(function ($routeProvider) {
    $routeProvider
        .when("/myprojects", {
            templateUrl: "MyAspMvcCtrl/GetTemplate?id=myprojects",  
            controller:"MyAngularController"
        })
       ...
    .otherwise({redirectTo:"/myprojects"})
});

myAngularApp.controller("MyAngularController", function ($scope) {
    ...
    // Do something
    $scope.mydata = {
        id = 1234,
        msg = "Hello"
    };
});

ASP.Net MVC Controller

public class MyAspMvcCtrlController : Controller
{
    [HttpGet]
    public ActionResult GetTemplate(string id)
    {
       switch (id.ToLower())
       {
           case "myprojects":
               return PartialView("~/Views/ProjectManagement/ProjectDetails.cshtml");
           default:
               throw new Exception("Unknown template request");
       }
    }
}

Layout.cshtml

<html ng-app="myAngularApp">
...
<body>
    ...
    <div ...>
        ...
        <a href="#/myprojects">My Projects</a>
        ...
    </div>

    <div ng-view></div>
    ...
</body>
</html>

ProjectDetails.cshtml

<div ...>
    <h3>ID: {{mydata.id}}</h3>
    <p>Message: {{mydata.msg}}</p>
</div>
0

Source: https://habr.com/ru/post/1584965/

More articles:


All Articles