Question

我有一个关于ng-view在混合angularjs和asp.net mvc应用程序中在cshtml页面中呈现局部视图失败的问题。我以前见过这项工作，但找不到我失败的原因。

一般情况是提供一个cshtml页面，该页面接受搜索输入并在同一页面上显示结果，同时保留输入文本框以供后续搜索。

cshtml页面：

@{
    ViewBag.Title = "Search";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>
    <base href="/" />
</head>
<body>
    <div data-ng-app="searchModule" data-ng-controller="searchController">
        <br />

        <form id="search-form" data-ng-submit="searchProperty()" >
            <label for="search" data-icon="&#xe618;">
                <input id="search" type="search" data-ng-model="searchTerm" placeholder="enter title of property to find" style="width:800px; max-width:800px" />
            </label>
        </form>
    </div>

    <div>
        <div ng-view="">

        </div>
    </div>

</body>
</html>

@section Scripts {
    @Scripts.Render("~/bundles/searchBundle")
}

angularjs控制器响应搜索字符串提交：

searchModule.controller('searchController', function ($scope, $location, $window) {

    var url = "/search/results/";

    $scope.searchProperty = function()
    {
        //$location.path(url + $scope.searchTerm);
        window.location = url + $scope.searchTerm;
    }

});

searchModule.controller('searchResultsController', function($scope, $routeParams) {

    $scope.searchTerm = 'test';
    $scope.properties = [];
    $scope.properties.push( {"id" : "1", "title": "property"});
});

应该处理注入cshtml的angularjs路由器：

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

searchModule.config(function ($routeProvider, $locationProvider) {
    $routeProvider
            .when('/search/results/:searchterm',
            {
                templateUrl: function (params) { return '/search/results/' + params.searchterm; },
                controller: 'searchResultsController',  //angularjs controller; the templateUrl is an mvc reference.
            })
    //.otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);
});

mvc控制器的相关部分：

   public class SearchController : Controller
    {
        // GET: Search
        public ActionResult Index()
        {
            return View();
        }

        // GET: Search/Results/"title"
        [Route("Search/Results/{SearchTerm}")]
        public ActionResult Results(string SearchTerm)
        {
            return PartialView();
        }

最后，cshtml局部视图呈现搜索结果。我希望将它注入index.cshtml，但实际上是在新页面上呈现。

@{
    ViewBag.Title = "Search Results";
}
<div>
    <br />
    <h3 class="keyword" data-ng-show="searchTerm != null">Search: {{searchTerm}}</h3>

    <table>
        <tbody>
            <tr data-ng-repeat="property in properties">
                <td>{{property.id}}</td>
                <td>{{property.title}}</td>
                <td><a data-ng-href="/details/{{property.id}}" data-icon="&#x2192;"></a></td>
            </tr>
        </tbody>
    </table>
</div>

登陆搜索框页面时会显示以下网址： http://localhost:5240/Search

在空白页面上提交后会显示以下网址，但不能找到无法找到所需范围的badjs标记除外。

http://localhost:5240/search/results/333

这些都是好的和可取的。我试图避免让可怕的＃出现在网址中。

Answer 1

我的问题是由于缺乏识别导航树的真根。当我按如下方式更改导航网址时，应用程序按预期工作。

var url = "/search/#/results";   //good url
var url = "/search/results/";    //bad url

关键是搜索框页面是从主页面导航到的，并且是spa场的一部分，因此管理导航树需要特别注意。

我仍然对网址中的哈希不满意，但是当我承诺更好地理解$ locationProvider.html5Mode（true）时，我会将此问题作为单独的查询解决;

ng-view无法在cshtml中呈现

1 个答案: