带MVC调用的angularJS - 如何做除CRUD之外的其他事情?

时间:2014-07-02 04:47:47

标签: asp.net-mvc angularjs

我一直在关注网络教程,试图在.NET MVC应用程序上学习angularJS。所有教程似乎都包括获取列表,获取单个项目等。

我想要做的是允许用户填写电子邮件地址,我想针对数据库验证该电子邮件地址,如果存在则返回true或false。然后我试图把这个值放在范围内,这样我就可以做一些事情来回应它的真或假。

我正在使用单页应用,所以这是登录html。

<form name="form" class="form-horizontal">
    <div class="control-group" ng-class="{error: form.ValidEmailAddress.$invalid}">
        <label class="control-label" for="ValidEmailAddress">Valid Email Address</label>
        <div class="controls">
            <input type="email" ng-model="item.ValidEmailAddress" id="ValidEmailAddress">
        </div>
    </div>
    <div class="form-actions">
        <button ng-click="login()" class="btn btn-primary">
            Go!
        </button>
        <label ng-if="user.isAuthorised">Authorised</label>
        <label ng-if="!user.isAuthorised">NotAuthorised</label>
    </div>
</form>

在我的app.js文件中,当url为/ login时,我声明了一个loginCtrl控制器,这样就可以了。我在点击按钮时调用的逻辑是:

var LoginCtrl = function ($scope, $location, $http, AuthorisedUser) {

    $scope.login = function() {
           var isValidUser =  $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress);
           $scope.user.isAuthorised = isValidUser;
    } };

然后调用MVC AuthorisedUserController类方法:

public bool IsValidUser(string id)
{
    var list = ((IObjectContextAdapter)db).ObjectContext.CreateObjectSet<ApprovedUser>();
    var anyItems = list.Any(u => u.ValidEmailAddress == id);
    return anyItems;
}

当我在文本框中输入类似“aaa”的值时,似乎有点模糊。但是,一旦我尝试输入电子邮件地址,该值就是未定义的。也许我应该做一个帖子,但我唯一可以成功点击我的.NET控制器就是使用get。

我确信我缺少基本知识,并且可能以错误的方式解决这个问题。

如果有帮助我创建了一个模块并定义了这样的工厂:

var EventsCalendarApp = angular.module("EventsCalendarApp", ["ngRoute", "ngResource"]).
    config(function ($routeProvider) {
        $routeProvider.
            when('/login', { controller: LoginCtrl, templateUrl: 'login.html', login: true }).
            otherwise({ redirectTo: '/' });
    });


EventsCalendarApp.factory('AuthorisedUser', function ($resource) {
    return $resource('/api/AuthorisedUser/:id', { id: '@id' }, { isValidUser: { method: 'GET' }  });
});

我的一个问题是 - 我应该使用$ http对象访问控制器方法,还是有办法使用我的工厂声明,以便我可以这样:

AuthorisedUser.IsValidUser($scope.item.validEmailAddress)

我知道在我关注的教程中我可以做类似的事情:

 CalendarEvent.save()

能够调用CalendarEventController post方法。

1 个答案:

答案 0 :(得分:1)

我认为,你的get()函数将返回一个promise。你不能像这样分配承诺。所以最好试试这个approch一次。我希望,它有效。如果没有,请告诉我......

这里我假设你的第一,第二和第三段代码工作正常......

$http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress).success(function (result, status) {

        var isValidUser=result;
        $scope.user.isAuthorised = isValidUser;
        $scope.$apply();
    }).error(function (result, status) {
        //put some error msg
    });
相关问题