ng-view not rendering in cshtml

У меня есть запрос о сбое ng-view для частичного просмотра части на странице cshtml в гибридном приложении angularjs и asp.net mvc. Я видел эту работу раньше, но не могу найти причину моего отказа.ng-view not rendering in 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"}); 
});

на 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-адресе.

источник

2016-06-22 tony bonn

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

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

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

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

источник

2016-06-23 19:37:45

ответ

Смежные вопросы