我正在使用asp.net mvc开发一个应用程序。我正在使用Code First Approach。我的目标是使用Knock out JS来验证,映射和绑定到数据库来开发asp.net mvc应用程序。 我的模型类:
public class Customers
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int Customer_ID { get; set; }
[Display(Name="Customer Name")]
public string Customer_Name { get; set; }
[Display(Name = "Contact Name")]
public string Contact_Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
[Display(Name = "Postal Code")]
[DataType(DataType.PostalCode)]
public string PostalCode { get; set; }
public string Country { get; set; }
}
客户控制器仅包含一个GET方法INDEX() 我添加了CustomersAPIController,它具有用于CRUD操作的HTTP METHOD。 CustomersController的Index操作方法具有视图:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/knockout-3.3.0.js"></script>
<script src="~/Scripts/knockout.validation.min.js"></script>
<script type="text/javascript">
var CustomersInformationSystem = {};
//The Model with the validation Rules
CustomersInformationSystem.CustomersViewModel = function (customer) {
var CustomersInfoModel = ko.validatedObservable({
CustomerName:
ko.observable(customer.CustomerName).extend({required: true,
minLength: 20,pattern:
{
message: 'Enter a valid customer Name'
}}),
ContactName: ko.observable(customer.ContactName).extend({
required: true,minLength: 20,pattern:
{
message: 'Enter a valid contact Name'
}}),
Address: ko.observable(customer.Address).extend({required:
true,minLength: 20,pattern:
{
message: 'Enter a valid Address '}}),
City: ko.observable(customer.City).extend({required:
true,minLength: 20,pattern:
{
message: 'Enter a valid city Name'
}}),
PostalCode: ko.observable(customer.PostalCode).extend({required:
true,
minLength: 20,pattern:
{
message: 'Enter a valid Postal Code'
}}),
Country: ko.observable(customer.Country).extend({required: true,
minLength: 20,pattern:
{
message: 'Enter a valid customer Name'
}})
});
return CustomersInfoModel();
};
CustomersInformationSystem.bindModel = function (customer) {
// Create the view model
CustomersInformationSystem.customerViewModel =
CustomersInformationSystem.CustomersViewModel(customer);
//The Validation initialization
ko.validation.init({ messagesOnModified: false, errorClass:
'errorStyle', insertMessages: true });
ko.applyBindings(this.CustomersViewModel);
};
//Save the Information
CustomersInformationSystem.saveCustomer = function () {
if (CustomersInformationSystem.CustomersViewModel.isValid()) {
$.ajax({
url: "/api/CustomersAPI",
type: "POST",
data: ko.toJSON(this),
datatype: "json",
contentType: 'application/json'
}).done(function (res) {
alert("Record Added Successfully" + res.EmpNo);
}).error(function (err) {
alert("Error " + err.status);
});
} else {
alert("Please enter the valid data");
}
};
$(document).ready(function () {
CustomersInformationSystem.bindModel({ CustomerName: "",
ContactName: "", Address: "", City: "",PostalCode:"",Country:"" });
});
</script>
<h2>Index</h2>
<style type="text/css">
.errorStyle {
border: 2px solid red;
background-color: #fdd;
}
</style>
<h1>Customer Information System</h1>
<form method="post" action="">
<table class="table table-bordered table-condensed table-striped"
id="tblemp">
<tr>
<td>Customer Name</td>
<td>
<input type="text" id="Customer_Name" data-bind="value:
CustomerName" />
</td>
</tr>
<tr>
<td>Contact Name</td>
<td>
<input type="text" id="Contact_Name" data-bind="value:
ContactName" />
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" id="Address" data-bind="value: Address"
/>
</td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" id="City" data-bind="value: City" />
</td>
</tr>
<tr>
<td>Postal Code</td>
<td>
<input type="text" id="PostalCode" data-bind="value:
PostalCode" />
</td>
</tr>
<tr>
<td>Country</td>
<td>
<input type="text" id="Country" data-bind="value: Country"
/>
</td>
</tr>
<tr>
<td>
<input type="button" value="Save" id="save"
data-bind="click:
CustomersInformationSystem.saveCustomer" class="btn btn-success" />
</td>
<td></td>
</tr>
</table>
</form>
}
当我提交表单时,我没有看到任何错误或数据没有保存到数据库。请查看Javascript代码。请更正我。谢谢你提前。