ng-view не отображается в cshtml

У меня есть вопрос о том, что ng-view не удалось отобразить частичное представление на странице cshtml в гибридном приложении angularjs и asp.net mvc. Я видел эту работу раньше, но не могу найти причину моей неудачи.

общий сценарий заключается в представлении страницы 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"});
});

маршрутизатор angularjs, который должен обрабатывать инъекцию в cshtml:

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>

при переходе на страницу окна поиска появляется следующий URL-адрес: http://localhost:5240/Search

следующий URL-адрес появляется после отправки на пустой странице, за исключением плохой разметки angularjs, которая не может найти желаемую область.

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

они оба хороши и желательны. Я пытаюсь избежать появления страшного # в URL-адресе.


angularjs asp.net-mvc angularjs-routing ng-view
person tony bonn    schedule 22.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя проблема была связана с отсутствием распознавания истинного корня дерева навигации. Когда я изменил URL-адрес навигации следующим образом, приложение работало так, как хотелось бы.

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

ключевой момент заключался в том, что переход на страницу окна поиска осуществляется с главной страницы и является частью спа-фермы, поэтому для управления деревьями навигации требуется дополнительное внимание.

Меня по-прежнему не устраивает хэш в URL, но я рассмотрю этот вопрос в виде отдельного запроса, когда я попытаюсь лучше понять $locationProvider.html5Mode(true);

person tony bonn    schedule 23.06.2016