Question

我对Knockout和Entity Framework相当新，我有一个问题，我似乎无法通过使用Knockout的AJAX调用从MVC 4控制器动作输出任何JSON到html页面。

该表包括字段Email和RegsitrationNumber，这些字段用于验证用户。

如果用户存在于表格中，则他们的国家/地区将显示在屏幕上。

分析器声明状态代码为200，即OK。有人可以帮忙吗？

HTML ------

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

    <script src="./Scripts/jquery-1.8.2.min.js"></script>

</head>
<body>

    <div>
        <div>
            <h2 id="title">Login</h2>
        </div>

        <div>
            <label for="email">Email</label>
            <input data-bind="value: $root.Email" type="text" title="Email" />
        </div>
        <div>
            <label for="registrationnumber">Registration Number</label>
            <input data-bind="value: $root.RegistrationNumber" type="text" title="RegistrationNumber" />
        </div>
        <div>
            <button data-bind="click: $root.login">Login</button>
        </div>
    </div>

    <table id="products1" data-bind="visible: User().length > 0">
        <thead>
            <tr>
                <th>Country</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: Users">
            <tr>
                <td data-bind="text: Country"></td>
            </tr>
        </tbody>

    </table>


    <script src="./Scripts/knockout-2.2.0.js"></script>
    <script src="./Scripts/knockout-2.2.0.debug.js"></script>
    <script src="./Scripts/functions.js"></script>
</body>
</html>

JAVASCRIPT -----

function UserViewModel() {

    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI
    self.Name = ko.observable("Robbie");
    self.Email = ko.observable("rob@test.com");
    self.Occupation = ko.observable("Designer");
    self.Country = ko.observable("UK");
    self.RegistrationNumber = ko.observable("R009");
    self.UserDate = ko.observable("06-04-2014");

    var User = {
        Name: self.Name,
        Email: self.Email,
        Occupation: self.Occupation,
        Country: self.Country,
        RegistrationNumber: self.RegistrationNumber,
        UserDate: self.UserDate
    };

    self.User = ko.observable();  //user
    self.Users = ko.observableArray(); // list of users

    //Login
    self.login = function ()
    {
        alert("login");

        if (User.Email() != "" && User.RegistrationNumber() != "") {


            $.ajax({
                url: '/Admin/Login',
                cache: false,
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON(User),
                success: function (data) {
                    self.Users.push(data);
                    $('#title').html(data.Email);
                }
            }).fail(
                function (xhr, textStatus, err) {
                    console.log('fail');
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(err);
                });

        } else {
            alert('Please enter an email and registration number');
        }

    };


}
var viewModel = new UserViewModel();
ko.applyBindings(viewModel);

行动-----

   public ActionResult Login(string Email, string RegistrationNumber)
        {

            var user = from s in db.Users
                              select s;

            user = user.Where(s => s.Email.ToUpper().Equals(Email.ToUpper())
                                                 && s.RegistrationNumber.ToUpper().Equals(RegistrationNumber.ToUpper())
                                                 );

            if (user == null)
            {
               return HttpNotFound(); 
            }
            return Json(user, JsonRequestBehavior.AllowGet);
        }

Answer 1

看起来您的绑定不正确......

<table id="products1" data-bind="visible: Users().length > 0">
    <thead>
        <tr>
            <th>Country</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Users">
        <tr>
            <td data-bind="text: Country"></td>
        </tr>
    </tbody>
</table>

User().length应为Users().length。

使用AJAX，Knockout和JSON获取数据库记录

1 个答案: