asp.net-mvc - ASP.NET MVC4 によるノックアウト

Question

ASP.NET MVC4 でKnockoutの使用を開始しようとしています。いくつかの例を見て、次の質問に遭遇しました。

1. 今日、私はビュー モデル バックエンドを作成します。クライアント側でノックアウト ビュー モデルに完全に置き換えることができますか?

2. 検証のためにノックアウトに DataAnnotations のようなものはありますか?

Answer 1

1. はい、サーバービューとビューモデルを削除します。これで、すべてがクライアント上にあります。

2. ノックアウト検証を参照してください

また、OData / WCFデータサービス（http://blogs.msdn.com/b/astoriateam/）を確認することもできます。それは基本的にあなたにモデルとコントローラーを与えます。このアプローチでは、サーバーは静的HTMLページとモデルデータのみをAJAX呼び出しとして提供することになります。また、データの「ページング」もサポートしています。

私見、これは未来の道です。

興味のある他のリンク：

• 承認-http://msdn.microsoft.com/en-us/library/dd728284.aspx
• ルーティング-http: //blogs.msdn.com/b/rjacobs/archive/2010/04/05/using-system-web-routing-with-data-services-odata.aspxまたはhttp://code.msdn。 microsoft.com/WCF-Data-Service-with-285746ac

Answer 2

Knockout.js は優れたライブラリです。しかし、ノックアウトとアンギュラーのどちらを使用するかを人々に尋ねると. それらのほとんどは、非常に似ていますが、Angular.js の方が優れていると言うでしょう。

プロジェクトでノックアウトを使用しています。そして、開発を簡素化できるものはたくさんあります。例えば。サーバー側の検証のみを使用します。ユーザーが「送信」をクリックすると、JavaScript がモデルを収集し、コントローラー (非同期 AJAX) に送信します。コントローラーには検証があり、検証が失敗した場合、応答は HTTP:500 になり、本文は検証結果構造になり、HTML の正しい場所にすべてのエラーが表示されます。

ユーザーの観点からは、クライアント側の検証のように見えます。この例でどのように機能するかを確認できます: Create Order Example (Upida.Net)。

Answer 3

このライブラリまたはこれを使用できます

またはこのサモーレを使用してください

<script id="customMessageTemplate" type="text/html">
    <em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>First name: <input data-bind='value: firstName'/></label>
    <label>Last name: <input data-bind='value: lastName'/></label>    
    <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
        <label>Email: <input data-bind='value: emailAddress' required pattern="@"/></label>
        <label>Location: <input data-bind='value: location'/></label>
        <label>Age: <input data-bind='value: age' required/></label>
    </div>
    <label>
        Subscriptions: 
        <select data-bind='value: subscription, options: subscriptionOptions, optionsCaption: "Choose one..."'></select>
    </label>
    <label>Password: <input data-bind='value: password' type="password"/></label>
    <label>Retype password: <input data-bind='value: confirmPassword' type="password"/></label>
    <label>10 + 1 = <input data-bind='value: captcha'/></label>
</fieldset>
<button type="button" data-bind='click: submit'>Submit</button>
<br />
<br />
<button type="button" data-bind='click: requireLocation'>Make 'Location' required</button>

ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

var captcha = function (val) {
    return val == 11;
};

var mustEqual = function (val, other) {
    return val == other();
};

var viewModel = {
    firstName: ko.observable().extend({ minLength: 2, maxLength: 10 }),
    lastName: ko.observable().extend({ required: true }),
    emailAddress: ko.observable().extend({  // custom message
        required: { message: 'Please supply your email address.' }
    }),
    age: ko.observable().extend({ min: 1, max: 100 }),
    location: ko.observable(),
            subscriptionOptions: ['Technology', 'Music'],
    subscription: ko.observable().extend({ required: true }),
    password: ko.observable(),
        captcha: ko.observable().extend({  // custom validator
        validation: { validator: captcha, message: 'Please check.' }
    }),
    submit: function () {
        if (viewModel.errors().length == 0) {
            alert('Thank you.');
        } else {
            alert('Please check your submission.');
            viewModel.errors.showAllMessages();
        }
    }
};

viewModel.confirmPassword = ko.observable().extend({
    validation: { validator: mustEqual, message: 'Passwords do not match.', params: viewModel.password }
}),
viewModel.errors = ko.validation.group(viewModel);
viewModel.requireLocation = function () {
    viewModel.location.extend({ required: true });
};
ko.applyBindings(viewModel);