0

我是 MVC 淘汰赛的新手，任何人都可以帮助我。

我正在使用淘汰赛 js 在 ajax 调用中调用 MVC4 webapi 操作方法。当我单击登录按钮时，它会调用 WebApi Action 方法。让我们考虑一下，当我如何在视图中显示错误消息时，用户 ID 和密码是无效的。

var User = function () {
    this.Email = ko.observable();
    this.Password = ko.observable();
};


var LoginViewModel = function () {
    var self = this;
    this.IncorrectLogin = ko.observable(false);

    this.User = ko.observable(new User());
    this.Login = function () {
        $.ajax({
            url: '../api/Login/PostAddUser',
            contentType: "application/json",
            cache: false,
            dataType: 'json',
            type: 'POST',
            data: "{'Email':'" + self.User.Email + "' , 'password':'" + self.User.Password + "'}",
            success: function (data,status,xhttps) {
                var result = data;
                if (data == true) {
                    window.location.href = '../User/Account';
                } else {

                }
            },
            error: function (data, status, xhttps) {
                alert('failed');
            }
        });
    };

};
ko.applyBindings(new LoginViewModel());

因此，如果该用户名和密码无效，我想在视图中显示一些消息。如何将错误消息从控制器传递到视图？

 public bool PostAddUser(User user)
        {
            User u = DataAccessLayer.ValidateUser(User.email, User.password);
            if (string.IsNullOrEmpty(u.Id) || u.Id == 0)
            {
                //retun the custome validation error like Invalid UserId
            }
            else
            {
                if (u.activeCodeConfirmed)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
        }
4

2 回答 2

0

使用 jquery 并发送消息到

<span id="messageError" style="display:none; color:red"> </span>

这将在输入登录并通过。

if (data == true) {
                    window.location.href = '../User/Account';
                } else {
                    $('span#messageError').text('user and password is not valid');
                    $('span#messageError').css('display','inline');
                }

稍后输入用户名或密码，您可以执行 onclick = "hideMessage()" 这将隐藏

function hideMessage ()
{
$('span#messageError').css('display','none');
}
于 2013-08-02T07:57:37.387 回答
0

从您的代码中，您似乎已经设置了以下内容：

  1. this.IncorrectLogin = ko.observable(false);
  2. if (data == true) { window.location.href = '../User/Account'; } else { \\Do something }

首先，将模型绑定到变量中是个好主意，this这样您就不会this在回调中遇到所有问题。

因此，您可以执行以下操作：

var self = this;
self.IncorrectLogin = ko.observable(false);
//... other code

所以在你的 AJAX 回调中，如果登录为假，你可以更新这个 observable，像这样：

if (data == true) { 
    window.location.href = '../User/Account'; 
} else { 
    self.IncorrectLogin(true); 
}

既然您有办法通知 KO 这种错误登录，您可以选择在您的 HTML 表单中显示错误消息或其他内容。样本：

<div data-bind="visible: IncorrectLogin">
    <span style="color: red">I will only show up if it's an incorrect login!</span>
</div>

这就是您如何使用 KO 查看更新的基础知识。

现在，如果您有来自服务器的错误消息，例如data.message，那么您只需采用相同的概念并使消息可观察。有点像这样：

self.ErrorMessage = ko.observable('');

//AJAX callback
if (data.valid) { 
    window.location.href = '../User/Account'; 
} else { 
    self.ErrorMessage(data.message); 
}

在您的 HTML 中，

<div data-bind="visible: ErrorMessage() != ''">
    <span style="color: red" data-bind="text: ErrorMessage"></span>
</div>

()请注意，KO observables 是函数，但如果 observable 不是表达式的一部分，则不需要使用符号。见visible: ErrorMessage() != ''与text: ErrorMessage..

干杯:)

于 2013-08-02T07:56:45.823 回答