AngularJs-在向服务器提交数据后重定向到另一个视图

时间:2017-09-25 22:59:11

标签: javascript asp.net angularjs asp.net-mvc mongodb

我正在使用MongoDb数据库开发一个基于AngularJs和ASP.net MVC的小型Web应用程序。如果不是已经是会员,那么其中一项任务就是注册自己。在成功地将数据从客户端提交到服务器之后,用户应该被重定向到另一个页面。所以数据在提交后保存在数据库中但是它似乎没有触发Angular部分的成功功能,其中我尝试重定向到另一页。

我附上的图片显示了黄色突出显示的非触发部分代码。

我该如何解决这个问题?任何帮助将不胜感激。

 [HttpPost]
    public JsonResult RegisterUser(User user)
    {
        mongoClient = new MongoClient();
        var db = mongoClient.GetDatabase(Database);
        userList = db.GetCollection<User>("user");
        var result = userList.AsQueryable().Where(a => a.UserName.Equals(user.UserName)).SingleOrDefault();
        user.IsActive = true;
        user.UserType = "Visitor";
        string message = "";

        if (result == null)
        {
            var seralizedUser = JsonConvert.SerializeObject(userList);
            userList.InsertOne(user);
            //var seralizedUser = new JavaScriptSerializer().Serialize(userList);
            message = "Success";

            //return Json(seralizedUser, JsonRequestBehavior.AllowGet);
            return Json(new
            {
                redirectUrl = Url.Action("VisitorChatPanel", "Visitor", ""),
                isRedirect = true
            });

          //  return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
        else
        {
            message = "Failed";
            //var seralizedUser = new JavaScriptSerializer().Serialize(userList);
            var seralizedUser = JsonConvert.SerializeObject(userList);
         //   return Json(seralizedUser, JsonRequestBehavior.AllowGet);
                          return Json(new
            {
                redirectUrl = Url.Action("VisitorChatPanel", "Visitor", ""),
                isRedirect = false
            }); 

        }

    }

&#13;
&#13;
angular.module('MyApp', [])
.controller('VisitorRegistrationController', function ($scope, RegistrationService) {
    $scope.SubmitText = "Save";
    $scope.IsFormValid = false;
    $scope.Submitted = false;
    $scope.Message = '';
    $scope.User = {
        UserName: '',
        Password: '',
        Email: '',
        FirstName: '',
        LastName: '',
        IsActive: false,
        UserType: 'Visitor'

    };

    //validates form on client side
    $scope.$watch('f1.$valid', function (newValue) {
        $scope.isFormValid = newValue;
    });

    //Save Data
    $scope.SaveData = function (data) {
        if ($scope.SubmitText == 'Save') {
            $scope.Submitted = true;
            $scope.Message = '';

            if ($scope.isFormValid) {
               // $scope.SubmitText = 'Please Wait...';
                $scope.User = data;
                alert('data : ' + $scope.User.FirstName);
                RegistrationService.SaveFormData($scope.User).then(function (d) {
                    alert(d);
                    if (d == 'Success') {
                        //have to clear form here
                        ClearForm();
                    }
                    $scope.SubmitText = "Save";
                });
            }
            else {
                $scope.Message = '';
            }
        }
    }
    //Clear Form 
    function ClearForm() {
        $scope.User = {};
        $scope.f1.$setPristine(); //here f1 is form name
        $scope.Submitted = false;
    }
}).factory('RegistrationService', function ($http, $q) {

   
    var fac = {};
    fac.SaveFormData = function (data) {
        //alert('$http : ' + $http);
        var defer = $q.defer();
        alert('q : ' + $q);
        $http({
            url: '/Visitor/RegisterUser',
            method: 'POST',
            data: JSON.stringify(data),
            headers: {'content-type' : 'application/json'}
        }).success(function (d) {
            // Success callback
            alert('Successfully registered !');
            if (d.isRedirect) {
                window.location.href = d.redirectUrl;
            }
            defer.resolve(d);
        }).error(function (e) {
            //Failed Callback
            alert('Error!');
          //  defer.reject(e);
        });
       
          return defer.promise;
        //return 'Successfull';
    }
    return fac;
});
;
&#13;
@{
    ViewBag.Title = "VisitorRegistrationForm";
}

<style>
    body {
        margin-top: 50px;
    }

    input {
        max-width: 300px;
    }

    .error {
        color: red;
    }
</style>


<h2>Visitor Registration Form</h2>
<div class="panel panel-info" style="margin-left:30px;margin-right:500px;">
    
    <div ng-controller="VisitorRegistrationController" class="panel-body">
        <form novalidate name="f1" ng-submit="SaveData(User)" class="form-horizontal">
            <div class="form-group">
                <label class="text text-info col-md-offset-2">First Name : </label>
                <input type="text" ng-model="User.FirstName" class="form-control col-md-offset-2" name="uFirstName" ng-class="Submitted?'ng-dirty':''" required autofocus />
                <span class="error col-md-offset-2" ng-show="(f1.uFirstName.$dirty || Submitted) && f1.uFirstName.$error.required">FirstName required!</span>
            </div>
            <div class="form-group">
                <label class="text text-info col-md-offset-2">Last Name : </label>
                <input type="text" ng-model="User.LastName" class="form-control col-md-offset-2" name="uLastName" ng-class="Submitted?'ng-dirty':''" required autofocus />
                <span class="error col-md-offset-2" ng-show="(f1.uLastName.$dirty || Submitted) && f1.uLastName.$error.required">LastName required!</span>
            </div>
            <div class="form-group">
                <label class="text text-info col-md-offset-2">Email  : </label>
                <input type="email" ng-model="User.Email" class="form-control col-md-offset-2" name="uEmail" ng-class="Submitted?'ng-dirty':''" />
                <span class="error col-md-offset-2" ng-show="(f1.uEmail.$dirty || Submitted) && f1.uEmail.$error.required">Email required</span>
                <span class="error col-md-offset-2" ng-show="(f1.uEmail.$dirty || Submitted) && f1.uEmail.$error.email">Email  not valid!</span>
            </div>
            <div class="form-group">
                <label class="text text-info col-md-offset-2">UserName : </label>
                <input type="text" ng-model="User.UserName" class="form-control col-md-offset-2" name="uUserName" ng-class="Submitted?'ng-dirty':''" required />
                <span class="error col-md-offset-2" ng-show="(f1.uUserName.$dirty || Submitted) && f1.uUserName.$error.required">UserName required!</span>
            </div>
            <div class="form-group">
                <label class="text text-info col-md-offset-2">Password : </label>
                <input type="password" ng-model="User.Password" class="form-control col-md-offset-2" name="uPassword" ng-class="Submitted?'ng-dirty':''" required />
                <span class="error col-md-offset-2" ng-show="(f1.uPassword.$dirty || Submitted) && f1.uPassword.$error.required">Password required!</span>
            </div>

            <div class="form-group">
                <label></label>
                <input type="submit" class="btn btn-success col-md-offset-2" value="{{SubmitText}}" />
            </div>
        </form>
    </div>
</div>
&#13;
&#13;
&#13;

enter image description here

0 个答案:

没有答案