8

どうやら、私はangularJSとasp.net MVC4に非常に慣れていません。シナリオは次のとおりです。

1 つのコントローラーと 1 つのビュー (つまり、home.cshtml) を含む単純な MVC4 プロジェクトがあります。プロジェクトのメイン ディレクトリ (views フォルダーの外) にある "Templates" というフォルダーに HTML ファイル (つまり、search.html) を追加しました。私が望むのは、「search.html」をangularJSでロードして、それを「home.cshtml」に含めることができるようにすることです。ここに私がこれまでに持っているものがあります:

angular モジュール: (Scripts フォルダにあります)

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
    $routeProvider.when('/search', {
        templateURL: '/Templates/search.html',
        controller: 'SearchController'
    });

    $routeProvider.otherwise({ redirectTo: '/search' });

});

bfapp.controller('SearchController', function () {

});

これがあなたにとって明確であることを願っています。どんな助けでも大歓迎です！ありがとう..

4

2 に答える 2

25

angularjsをasp.net mvcで動作させる方法を理解するのにしばらく時間がかかりました.

var AccountApp = angular.module("AccountApp", ['$strap.directives', 'ngResource', 'ngGrid', 'filePickers']).
config(function ($routeProvider) {
    $routeProvider.
        when('/', { controller: ListCtrl, templateUrl: 'Templates/Account/List' }).
        when('/', { controller: EditCtrl, templateUrl: 'Templates/Account/Edit' }).
        otherwise({ redirectTo: '/' });
});

OK、ここで Templates/Account/List を呼び出していることに注意してください。

私のRouteConfig.csで

        routes.MapRoute(
            name: "Templates",
            url: "Templates/{controller}/{template}",
            defaults: new { action = "Template" }
        );

各コントローラーには、適切な部分ビューへの呼び出しを指示する、次の対応するアクションがあります。

    public ActionResult Template(string template)
    {
        switch (template.ToLower())
        {
            case "list":
                return PartialView("~/Views/Account/Partials/List.cshtml");
            case "create":
                return PartialView("~/Views/Account/Partials/Create.cshtml");
            case "edit":
                return PartialView("~/Views/Account/Partials/Edit.cshtml");
            case "detail":
                return PartialView("~/Views/Account/Partials/Detail.cshtml");
            default:
                throw new Exception("template not known");
        }
    }

ただし、すべてはコントローラーの Index() アクションから始まります。

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

すべてをまとめると、私のディレクトリ構造は次のようになります。

/Views
    /Account
        /Partials
             List.cshtml
             Create.cshtml
             Edit.cshtml
             Detail.cshtml
        Index.cshtml

これは私のアプローチなので偏見がありますが、物事が非常にシンプルでうまく整理されていると思います。Index.cshtml には ng-view が含まれており、アプリケーションの他のすべての部分は、その Template アクションによって読み込まれる部分ビューに適切に含まれています。お役に立てれば。

于 2013-06-23T00:32:22.220 に答える
5

私は同じ問題に直面しており、解決策を得ました。

「Home.cshtml」をベースにして、AngularJS のルーティングによって「search.html」にロードしたいようですね。(MVC の方法と少し似ています:「_Layout.cshtml」がベースであり、ナビゲートするさまざまなビューに読み込むことができます。)

これに到達するには、ng-view タグを Home.cshtml に追加するだけです!AngularJS ルーティングが機能します。

読み込まれたビューが Views フォルダーに置かれないようにしてください! (または、ビューを取得するためにコントローラーにリクエストを発行してビューにアクセスする必要があります。)

これが例です。

サーバー側 (ASP.NET MVC) コントローラーがあります。

3 つのアクションを持つ HomeController。

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

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

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

そして、Angular コード (app.js) で ng-view の URL をこれらのアクションに設定して、ビューを取得します。

angular.module('myApp', [
    'myApp.controllers',
    'ngRoute'
]);

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/view1', {
        controller: 'HomeController',
        templateUrl:'Home/GetPartial1'
    }).when('/view2', {
        controller: 'HomeController',
        templateUrl:'Home/GetPartial2'
    }).otherwise({redirectTo:'/view1'});
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
});
于 2015-07-31T08:46:33.287 に答える