从Telerik Appbuilder表单调用Web-API

时间:2014-12-09 10:15:25

标签: asp.net-mvc knockout.js telerik

我有两个项目,一个是连接到我的Azure doucument DB的MVC API项目。另一个是Telerik Appbuilder项目(它们包含在同一个解决方案中)。

我正在构建一个登录系统。通过我的MVC项目,我可以毫无问题地注册和登录。棘手的部分是使用我的Telerik Appbuilder项目登录。我想通过Knockout或Ajax或两者一起操作MVC项目中的控制器。

所以代码..

这是我的index.html(Telerik-App),你可以看到使用淘汰赛。

    <script src="kendo/js/jquery.js"></script>
<!--<script src="kendo/js/jquery.min.js"></script>-->
<!--<script src="kendo/js/kendo.all.min.js"></script>-->
<script src="kendo/js/kendo.mobile.min.js"></script>
<!--<script src="kendo/js/knockout-3.2.0.debug.js"></script>
<script src="kendo/js/knockout-3.2.0.js"></script>-->
<script src="kendo/js/knockout-kendo.js"></script>
<script src="kendo/js/app.js"></script>

        <form data-bind="submit: register" method="POST">
        <h3>Register</h3>
        <div class="form-group">
            <label>Email</label>
            <input class="form-control" type="text" name="Email" data-bind="value: registerEmail" />
        </div>
        <div class="form-group">
            <label>Password</label>
            <input class="form-control" type="password" name="password" data-bind="value: registerPassword" />
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <input class="form-control" type="password" name="password" data-bind="value: registerPassword2" />
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-default">Register</button>
        </div>
    </form>
</div>

数据绑定指向app.js(也在Telerik-app中),app.js看起来像这样......

function ViewModel() {
var self = this;

self.registerEmail = ko.observable();
self.registerPassword = ko.observable();
self.registerPassword2 = ko.observable();

function showError(jqXHR) {
    self.result(jqXHR.status + ': ' + jqXHR.statusText);
}

self.register = function () {
    self.result('');

    var data = {
        Email: self.registerEmail(),
        Password: self.registerPassword(),
        ConfirmPassword: self.registerPassword2()
    };

    $.ajax({
        type: 'POST',
        url: 'http://localhost:15746/api/Account/Register',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data)
    }).done(function (data) {
        self.result("Done!");
    }).fail(showError);
}

}

var app = new ViewModel(); ko.applyBindings(APP);

因此。在Ajax调用中,您可以指出它指向我的AccountController方法Register(如果我单独运行MVC项目,此方法有效)。

如果我运行应用程序并打开调试模式,我可以看到我在文本框中编写的内容会显示在调试中,但它不会发送到我的数据库。

我做错了什么,我不完全明白淘汰赛是如何运作的。有人有什么想法吗?

0 个答案:

没有答案