0

私はMVCノックアウトが初めてです。誰か助けてください。

ノックアウト js を使用して ajax 呼び出しで MVC4 webapi アクション メソッドを呼び出しています。ログインボタンをクリックすると、WebApi アクションメソッドが呼び出されます。 View にエラーメッセージを表示するにはどうすればよいですか?

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());

したがって、そのユーザーIDとパスワードが有効でない場合、ビューにメッセージを表示したいと思います。コントローラーからビューにエラーメッセージを渡すにはどうすればよいですか?

 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 コールバックで、ログインが false の場合、次のようにこのオブザーバブルを更新できます。

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 オブザーバブルは関数ですが、オブザーバブルが式の一部でない場合は表記を使用する必要がないことに注意してください。visible: ErrorMessage() != ''対を参照してくださいtext: ErrorMessage。

乾杯 ：）

于 2013-08-02T07:56:45.823 に答える