通过按下按钮,不要在js window.location.href中使用此命令移动到所需的页面



当我单击表中的发送按钮时遇到问题,它不会将我带到请求的页面,我检查了数据库和服务器端的所有方面,我不明白为什么我收到错误 400代码角度
添加链接可以下载代码 http://www.filedropper.com/finalproject_3

 <script>
                      (function (app) {
                app.controller('FrameController', FrameController)
            })(angular.module('TestApp', ['ngAnimate', 'ngAria', 'ngMaterial']));
        </script>
    </head>
<body ng-controller="FrameController">
    <div ng-cloak>
        <md-content>
            <div layout="row" layout-wrap>
                <div flex="50">
                    <div class="mdl-grid">
                        <md-card>
                            <md-card-title>
                                <md-card-title-text>
                                    <span class="md-headline"> </span>
                                </md-card-title-text>
                                <md-card-title-media>
                                    <md-progress-linear md-mode="indeterminate"></md-progress-linear>
                                    <div class="md-media-lg card-media"></div>
                                </md-card-title-media>
                            </md-card-title>
                            <md-card-content>
                                <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
                                <md-select ng-model="searchText" placeholder="choose place" class="md-no-underline">
                                    <md-option value="Club">Club</md-option>
                                    <md-option value="Bar">Bar</md-option>
                                    <md-option value="Dance-Bar">Dance-Bar</md-option>
                                    <md-option value="Resturant">Resturant</md-option>
                                    <md-option value=" coffe-shops">Coffe-shops</md-option>
                                </md-select>
                                <input type="text" placeholder="enter the place you want" ng-model="searchText.Title">
                           </md-card-content>
                            <md-card-actions layout="row" layout-align="end center">
                            </md-card-actions>
                        </md-card>
                    </div>
                </div>
                    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                        <thead>
                            <tr>
                                <th class="mdl-data-table__cell--non-numeric">Title</th>
                                <th>Description</th>
                                <th>Phone</th>
                                <th>City</th>
                                <th>Street</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat=  "row in rows | filter:searchText">
                                <td class="mdl-data-table__cell--non-numeric">{{row.Title}}</td>
                                <td>{{row.Description}}</td>
                                <td>{{row.Phone}}</td>
                                <td>{{row.City}}</td>
                                <td>{{row.Street}}</td>
                                <td><button ng-click="send(row)">Send</button></td>
                            </tr>
                        </tbody>
                    </table>
</md-content>

代码 js

function FrameController($scope, $http) {
    var data;
    $http.get('/api/places/frames/frame').then(function (response) {

        $scope.rows = response.data.map(function (item) {
            return new MenuEventModel(item);
        });
        data = angular.copy($scope.rows);
        $scope.loaded = true;
        console.log($scope.rows);

        $scope.send = function (row) {
            console.log(row);
            window.location.href = 'Detail.html?Id=' + row.Title;
        };
    });

}

代码 C# 服务器端

 [HttpGet]
        [Route("api/Places/Details/Detail")]
        public IHttpActionResult Test(int Id)
        {
            var service = Services.SqlPool.PlacesService;
            using (var conn = service.StartConnection())
            {
                var result = service.SelectAsList<Models.EventsByDays>(conn, "spGetDetailsAboutPlace", new SqlParameter("@Id", Id));
                service.StopConnection(conn);
                return Ok(result);
            }
        }
        public void Dispose()
        {
            // any operation which aim to free memory is welcomed here :)
        }
    }

更改您的

 window.location.href = 'Detail.html?Id=' + row.Title;

var linkStart = 'Detail.html?Id=' + row.Title;
$state.go(linkStart);

(并且不要忘记添加带有$http和$scope的$state(

编辑:

function FrameController($scope, $http, $state) {
var data;
$http.get('/api/places/frames/frame').then(function (response) {

    $scope.rows = response.data.map(function (item) {
        return new MenuEventModel(item);
    });
    data = angular.copy($scope.rows);
    $scope.loaded = true;
    console.log($scope.rows);

    $scope.send = function (row) {
        console.log(row);
        var linkStart = 'Detail.html?Id=' + row.Title;
$state.go(linkStart);
    };
});

}

或者使用$window而不是$state。

html 更改为:

<head>
    <script>
        (function (app) {
            app.controller('FrameController', FrameController)
        })(angular.module('TestApp', ['ngAnimate', 'ngAria', 'ngMaterial']));
    </script>
</head>
<body ng-controller="FrameController">
    <div ng-cloak>
        <md-content>
            <div layout="row" layout-wrap>
                <div flex="50">
                    <div class="mdl-grid">
                        <md-card>
                            <md-card-title>
                                <md-card-title-text>
                                    <span class="md-headline"> </span>
                                </md-card-title-text>
                                <md-card-title-media>
                                    <md-progress-linear md-mode="indeterminate"></md-progress-linear>
                                    <div class="md-media-lg card-media"></div>
                                </md-card-title-media>
                            </md-card-title>
                            <md-card-content>
                                <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
                                <md-select ng-model="searchText" placeholder="choose place" class="md-no-underline">
                                    <md-option value="Club">Club</md-option>
                                    <md-option value="Bar">Bar</md-option>
                                    <md-option value="Dance-Bar">Dance-Bar</md-option>
                                    <md-option value="Resturant">Resturant</md-option>
                                    <md-option value=" coffe-shops">Coffe-shops</md-option>
                                </md-select>
                                <input type="text" placeholder="enter the place you want" ng-model="searchText.Title">
                            </md-card-content>
                            <md-card-actions layout="row" layout-align="end center">
                            </md-card-actions>
                        </md-card>
                    </div>
                </div>
                <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                    <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric">Title</th>
                            <th>Description</th>
                            <th>Phone</th>
                            <th>City</th>
                            <th>Street</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in rows | filter:searchText">
                            <td class="mdl-data-table__cell--non-numeric">{{row.Title}}</td>
                            <td>{{row.Description}}</td>
                            <td>{{row.Phone}}</td>
                            <td>{{row.City}}</td>
                            <td>{{row.Street}}</td>
                            <td><button ng-click="send($event, row)">Send</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </md-content>
    </div>
</body>

并将您的 JavaScript 代码更改为:

function FrameController($scope, $http, $window) {
        var data;
        $http.get('/api/places/frames/frame').then(function (response) {
            $scope.rows = response.data.map(function (item) {
                return new MenuEventModel(item);
            });
            data = angular.copy($scope.rows);
            $scope.loaded = true;
            console.log($scope.rows);
            $scope.send = function (e, row) {
                e.preventDefault();
                console.log(row);
                $window.location.href = 'http://...' + 'Detail.html?Id=' + row.Title;
            };
        });
    }

最新更新