Question

我向服务器发送请求。在我成功响应后，我想在当前页面内加载部分页面。

我知道有AngularJS Routing和MVC Rounting。两种不同的方式。

我知道我可以在cshtml文件中使用@ Html.ActionLink来加载另一个部分页面。问题是我只想在我从服务器获得成功响应的情况下才这样做。

我该怎么办？

_Layout.cshtml

<!DOCTYPE html>

@ @ViewData [＆＃34; Title＆＃34;] - 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（）

<小时/>

<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);
        });
    }
}

}）（）;

Answer 1

这是我使用的，它对我有用：

$.ajax({
    type: 'GET',
    url: 'Home/ChatContentView',
    dataType: 'html'
}).done(function (response) {
    $('div#container').html(response);
});

如何在Javascript回调响应后使用MVC路由？

1 个答案: