Question

我对AngularJS和WebAPi控制器方法有一些奇怪的问题。

问题详情： 我有一个控制器webapi方法，它将UserName，Email和Password作为模型类。当我尝试将数据发布到webapi方法时，我总是作为错误响应。在表单中输入数据时不会触发控制器中的Webapi方法但如果我没有填写表单中的任何数据并且只是单击提交按钮，则会触发webapi方法（模型数据为空，因为没有填写表格中的数据）

问题是为什么所有post方法都会发生这种情况。请注意我没有在脚本中收到任何错误（在控制台窗口中没有错误）

我在这方面已经挣扎了很多天，最后想到这里发帖来获得帮助。

我尝试使用jquery ajax将相同的数据发布到webapi但面临同样的问题（仅当我不在表单中输入任何数据时才触发方法）。

//html code

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

            <div class="row">
                <div>
                    <asp:Label runat="server" CssClass="col-md-2 control-label">User name</asp:Label>
                </div>
                <div class="col-md-10">
                    <input type="text" id="UserName" class="form-control" maxlength="50" required="" data-ng-model="userName" placeholder="User Name" />
                </div>
            </div>
            <br />
            <div class="row">
                <asp:Label runat="server" CssClass="col-md-2 control-label">Email</asp:Label>
                <div class="col-md-10">
                    <input type="email" id="Email" class="form-control" maxlength="256" required="" data-ng-model="email" placeholder="Email Id" />
                </div>
            </div>
            <br />
            <div class="row">
                <asp:Label runat="server" CssClass="col-md-2 control-label">Password</asp:Label>
                <div class="col-md-10">
                    <input type="password" id="Password" class="form-control" maxlength="256" required="" data-ng-model="password" placeholder="Password" />
                </div>
            </div>
            <br />
            <div class="row">
                <asp:Label runat="server" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                <div class="col-md-10">
                    <input type="password" id="ConfirmPassword" class="form-control" maxlength="256" required="" placeholder="Confirm Password" data-ng-model="confirmPassword" />
                </div>
            </div>
            <br />
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <asp:Button runat="server" ID="Register" Text="Register" CssClass="btn btn-default" data-ng-click="CreateAccount()" />

                </div>
            </div>
        </div>



//controller code
myApp.controller('AccountController', function ($scope, account) {

    var onUserRegisterComplete = function (response) {
        $scope.success = "success";
        alert(response.data);
        $scope.registerMessage = response.data;
    };

    var onError = function (reason) {
        $scope.error = "Could not fetch details.";
    };

   $scope.CreateAccount = function () {
        alert("CreateAccount trigged");
        var registerUser = { UserName: $scope.userName, Email: $scope.email, Password: $scope.password, ConfirmPassword: $scope.confirmPassword };
       account.registerUser(registerUser).then(onUserRegisterComplete, onError);
   };


    $scope.userName = "";
    $scope.email = "";
    $scope.password = "";
    $scope.confirmPassword = "";
});


//angularjs service code

myApp.service('account', function ($http) {

    var registerUser = function (userRegister) {
        var url = "http://localhost:1443/api/account/userregister";

        var data = JSON.stringify(userRegister);

        return $http.post(
            url,
            data,
            {
                headers:
                {
                    "Content-Type":
                        "application/json"
                }
            }
        ).then(function (response) {
            return response;
        });
    };


    return {
        registerUser: registerUser
    };

});


//webapi method

 [Route("api/account/userregister")]
        public IHttpActionResult PostRegisterUser([FromBody]RegisterViewModel registerData)
        {
           //do some registration action
            return Ok("ok");
        }

如果我错过了提及的话，请告诉我。感谢

$ http.post在角度未触发webapi控制器方法与表单数据

0 个答案: