0
私はサーバーにリクエストを送信しています。私が成功した応答を得た後、私は現在のページの中に部分的なページをロードしたい。Javascriptのコールバック応答後にMVCルーティングを使用するにはどうすればよいですか？
私はAngularJS RoutingとMVC Rountingがあることを知っています。 2つの異なる方法。
私はcshtmlファイルで@ Html.ActionLinkを使用して別の部分ページをロードできることを知っています。問題は、サーバーから正常な応答が得られた場合にのみ実行したいということです。
どうすればいいですか？ WebApplication1と
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
@ @RenderBody（）
- @ViewData [ "タイトル"] @
_Layout.cshtml
<!DOCTYPE html>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/angular/angular.js"></script>
<script src="~/lib/angular-route/angular-route.js"></script>
<script src="~/lib/angular-resource/angular-resource.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/lib/angular/angular.min.js" asp-append-version="true"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
@RenderBodyにロード最初のページ（）
<div ng-controller="LoginController">
<div class="row">
<span>Login</span>
</div>
<div class="row">
<label>User Name:</label>
<input type="text" ng-model="username" />
</div>
<div class="row">
<button type="button" ng-click="login(username)">Enter Chat</button>
</div>
そして、これはコントローラです：
(function() {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$scope', '$http', '$compile', 'Login'];
function LoginController($scope, $http, $compile, Login) {
/* jshint validthis:true */
$scope.username = null;
$scope.login = function (_username) {
//Move To Service
var postUrl = '/api/Login';
var postData = { username: _username };
$http.post(postUrl, postData)
.success(function (data, status, headers, config) {
RedirectToChatContentPage();
})
.error(function (data, status, header, config) {
alert("Error");
}
);
};
function RedirectToChatContentPage() {
//Move to service
$.ajax({
type: 'GET',
url: 'Home/ChatContentView',
dataType: 'html'
}).done(function (response) {
$('div#container').html(response);
});
}
}
}）（）;
はAjax.ActionLink' @ 'に見て。プロジェクトに 'jquery.unobtrusive-ajax.js'をインクルードする必要があります。 – Jecoms
「ルーティング」の種類が不明な場合 - 最も簡単なオプションは、2番目のコンテンツをajax呼び出し（jquery）で読み込むことです。 –
これはとても古くて便利なので、角度を使う方法はありますか？ –