Asp.net mvc 使用ASP.NET MVC4进行淘汰

希望开始在ASP.NET MVC4中使用淘汰版。观看一些示例并遇到以下问题

今天我写了我的视图模型后端，我可以完全取代它 在客户端使用淘汰视图模型

在淘汰赛中是否有类似DataAnnotations的内容 验证

是，删除服务器视图和视图模型。现在所有都在客户端上

看

此外，您可能希望签出OData/WCF数据服务（）。它基本上给你一个模型和控制器。使用这种方法，服务器最终只能作为AJAX调用提供静态HTML页面和模型数据。它还支持数据的“分页”

这就是未来的道路

其他相关链接：

• 授权-
• 路由-或

是，删除服务器视图和视图模型。现在所有都在客户端上

看

此外，您可能希望签出OData/WCF数据服务（）。它基本上给你一个模型和控制器。使用这种方法，服务器最终只能作为AJAX调用提供静态HTML页面和模型数据。它还支持数据的“分页”

这就是未来的道路

其他相关链接：

• 授权-
• 路由-或

您可以使用库或

或者使用这个samole

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

用户：错误
名字：
姓氏：
电邮：
地点：
年龄：
订阅：
密码：
重新键入密码：
10 + 1 = 
提交




使“位置”成为必需的
ko.validation.rules.pattern.message='无效'；
ko.validation.configure({
registerExtenders:对，
messages:true，
insertMessages:true，
ParseInputAttribute:true，
messageTemplate:null
});
var captcha=功能（val）{
返回值=11；
};
var mustEqual=函数（val，其他）{
return val==other（）；
};
var viewModel={
firstName:ko.observable（）.extend（{minLength:2，maxLength:10}），
lastName:ko.observable（）.extend（{required:true}），
emailAddress:ko.observable（）.extend（{//自定义消息
必需：{消息：'请提供您的电子邮件地址。}
}),
年龄：ko.observable（）.extend（{min:1，max:100}），
位置：ko.observable（），
订阅选项：[“技术”、“音乐”]，
订阅：ko.observable（）.extend（{required:true}），
密码：ko.observable（），
captcha:ko.observable（）.extend（{//自定义验证器
验证：{验证程序：验证码，消息：“请检查”。}
}),
提交：函数（）{
if（viewModel.errors（）.length==0）{
警惕（‘谢谢’）；
}否则{
提醒（'请检查您提交的内容'）；
viewModel.errors.showAllMessages（）；
}
}
};
viewModel.confirmPassword=ko.observable（）.extend({
验证：{validator:mustEqual，消息：'密码不匹配'，参数：viewModel.password}
}),
viewModel.errors=ko.validation.group（viewModel）；
viewModel.requireLocation=函数（）{
viewModel.location.extend（{required:true}）；
};
应用绑定（视图模型）；

您可以使用库或

或者使用这个samole

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

用户：错误
名字：
姓氏：
电邮：
地点：
年龄：
订阅：
密码：
重新键入密码：
10 + 1 = 
提交




使“位置”成为必需的
ko.validation.rules.pattern.message='无效'；
ko.validation.configure({
registerExtenders:对，
messages:true，
insertMessages:true，
ParseInputAttribute:true，
messageTemplate:null
});
var captcha=功能（val）{
返回值=11；
};
var mustEqual=函数（val，其他）{
return val==other（）；
};
var viewModel={
firstName:ko.observable（）.extend（{minLength:2，maxLength:10}），
lastName:ko.observable（）.extend（{required:true}），
emailAddress:ko.observable（）.extend（{//自定义消息
必需：{消息：'请提供您的电子邮件地址。}
}),
年龄：ko.observable（）.extend（{min:1，max:100}），
位置：ko.observable（），
订阅选项：[“技术”、“音乐”]，
订阅：ko.observable（）.extend（{required:true}），
密码：ko.observable（），
captcha:ko.observable（）.extend（{//自定义验证器
验证：{验证程序：验证码，消息：“请检查”。}
}),
提交：函数（）{
if（viewModel.errors（）.length==0）{
警惕（‘谢谢’）；
}否则{
提醒（'请检查您提交的内容'）；
viewModel.errors.showAllMessages（）；
}
}
};
viewModel.confirmPassword=ko.observable（）.extend({
验证：{validator:mustEqual，消息：'密码不匹配'，参数：viewModel.password}
}),
viewModel.errors=ko.validation.group（viewModel）；
viewModel.requireLocation=函数（）{
viewModel.location.extend（{required:true}）；
};
应用绑定（视图模型）；

Knockout.js是一个很棒的库。但如果你问人们该用击出还是角度。 大多数人会告诉你Angular.js更好，尽管它们非常相似

我在项目中使用淘汰制。还有许多事情可以简化您的开发。 例如我只使用服务器端验证。当用户单击“提交”时，我的javascript收集模型并将其发送给控制器（异步AJAX）。控制器有验证，如果验证失败，响应将是HTTP:500，主体将是验证结果结构，它在HTML的正确位置显示所有错误

从用户的角度来看，这似乎是客户端验证。

---

您可以在本例中看到它的工作原理：。

Knockout.js是一个很棒的库。但是