0
ng-viewがハイブリッドangjjsおよびasp.net mvcアプリケーションのcshtmlページで部分的なビューをレンダリングできないという問い合わせがあります。私は以前この仕事を見てきましたが、私の失敗の原因を見つけることはできません。ng-viewが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="">
<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="→"></a></td>
</tr>
</tbody>
</table>
</div>
次のURLが表示されます。 http://localhost:5240/Search
次のURLが必要な範囲を見つけることができない悪いangularjsマークアップを除いて、空白のページに提出した後に表示されます。
http://localhost:5240/search/results/333
これらは良いと望ましいの両方です。 私は恐れている＃がURLに現れるのを避けようとしています。