Question

更新

我已经从我的html中替换了<input type=submit to <button ... and also remove the form标签，在修改我的代码之后我没有看到它执行我的JS而且我在代码中有一个调试器行并且它没有破坏....

我尝试发布数据并且我已正确放置和连接所有代码（我相信）但是当我尝试提交页面时＃我的页面得到刷新，我不会看到任何事件都在触发，我在JS中设置了debugger，我在开发人员工具中看不到任何JS错误

除了我的代码，我在这里失踪了什么？

这是我的代码：

// HML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My AngularJS App</title>

    <script src="../AppScripts/RequesterAdd.js"></script>
</head>
<body>
    <form>
        <div ng-app="requesterAddModule" ng-controller="requesterAddController" class="container">

            <h2> add requester</h2>

            <div ng-show="ShowMessage">Record saved Successfully</div>

            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>HostModel</h4>
                <hr />

                <div class="form-group">
                    <div>First Name:</div>
                    <div class="col-md-10">
                        <input type="text" ng-model="FirstName" required class="form-control input-lg" placeholder="First Name" />
                    </div>
                </div>

                <div class="form-group">
                    <div>Middle Name:</div>
                    <div class="col-md-10">
                        <input type="text" ng-model="MiddleName" required class="form-control input-lg" placeholder="Middle Name" />
                    </div>
                </div>

                <div class="form-group">
                    <div>Last Name:</div>
                    <div class="col-md-10">
                        <input type="text" ng-model="LastName" required class="form-control input-lg" placeholder="Last Name" />
                    </div>
                </div>

                <div class="form-group">
                    <div>eMail Address:</div>


                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        <input type="text" ng-model="Email" required class="form-control input-lg" placeholder="Email Address" />
                    </div>

                </div>

                <div class="form-group">
                    <div>Is Host Active:</div>
                    <div class="col-md-10">
                        <input type="checkbox" ng-model="Active" required class="control-label col-md-2" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" id="btnCreate" data-ng-click="addRequester_ClickEvent" value="Create" class="btn btn-primary" />
                    </div>
                </div>
            </div>


            <div>
                @Html.ActionLink("Back to List", "Index")
            </div>
        </div>
    </form>
</body>
</html>

// JS：

var requesterAddModule = angular.module("requesterAddModule", []);

requesterAddModule.factory('requesterAddService',
    ['$http', function ($http) {

        return {

            addRequester: function (reqesterData) {
                console.log(reqesterData);


                debugger;
                $http({
                    url: 'PersistRequester',
                    method: 'POST',
                    data: reqesterData
                }).then (function (response) {
                    if (response !== 'undefined' && typeof(response) == 'object') {
                        window.location.href = '/'
                    }
                },
                function(response) {
                    //failed
                    }
                );
            } 
        };

    }]);

requesterAddModule.controller('requesterAddController', ['$scope', '$http', '$window', 'requesterAddService', function ($scope, $http, $window, requesterAddService) {

    $scope.addRequester_ClickEvent = function () {
        var req = {};
        debugger;
        req["FirstName"] = $scope.FirstName;
        req["MiddleName"] = $scope.MiddleName;
        req["LastName"] = $scope.LastName;
        req["Email"] = $scope.Email;
        req["Active"] = $scope.Active;

        requesterAddService.addRequester(req);
    }

}]);

// MVC服务器端代码：

        [HttpPost]
        public JsonResult PersistRequester(Requester requester)
        {
            var req = requester;

            //if (ModelState.IsValid)
           // {
                req.CreatedDateTime = DateTime.Now;

                db.Requesters.Add(requester);
                db.SaveChanges();
                return Json(new { Status = "Success" });

            //}

        }

Answer 1

您正在使用没有方法和操作的表单，默认情况下会发布到当前网址。我强烈建议不要使用表单，或者至少不要使用<input type="submit" />，这将在所有浏览器中默认提交表单。

你明显在这里使用Bootstrap 3，所以为什么不删除表单标签和提交按钮，并将其替换为另一个不会触发表单帖子并用class="btn btn-primary"设置样式的元素。有些人可能会在优雅的降级指南中反对这种做法，但由于这种特殊的形式不是为了支持非js场景而构建的，所以最好不要允许浏览器提交。

此外，在您正在进行实际发布的服务中，您明确告诉页面重新加载。

if (response !== 'undefined' && typeof(response) == 'object') {
    window.location.href = '/'
}

您应该将此数据传递回viewmodel，以便视图可以重新呈现并显示响应。

如果更改了网址，则视图状态将丢失，页面将再次呈现为初始状态。

Answer 2

代替行

<input type="submit" id="btnCreate" data-ng-click="addRequester_ClickEvent" value="Create" class="btn btn-primary" />

请做

<button  id="btnCreate" data-ng-click="addRequester_ClickEvent()" class="btn btn-primary" >Create</button>

Answer 3

我刚刚测试过并且正在为我工作替换：

<input type="submit" id="btnCreate" data-ng-click="addRequester_ClickEvent" value="Create" class="btn btn-primary" />

带

 <button  id="btnCreate" data-ng-click="addRequester_ClickEvent()" value="Create" class="btn btn-primary" >submit</button>

我将你的服务改为：

requesterAddModule.factory('requesterAddService',
    ['$http', function ($http)
    {

        return {

            addRequester: function (reqesterData)
            {
                console.log(reqesterData);


                debugger;
                $http.post('PersistRequester', reqesterData).then(function (response)
                {
                    if (response !== 'undefined' && typeof (response) == 'object') {
                        window.location.href = '/'
                    }
                },
                function (response)
                {
                    //failed
                }
                );
            }
        };

    }]);

如果方法'PersistRequester'存在于其他控制器中，则发布到/ home / PersistRequester，即：foo控制器更改

$http.post('PersistRequester', reqesterData).then(function (response)

到$http.post('foo/PersistRequester', reqesterData).then(function (response)

通过AngularJS保存数据

3 个答案: