I'm developing an app using asp.net mvc.I'm using Code First Approach. My Goal is to develop asp.net mvc app using Knock out JS for Validation, Mapping and Binding to database. My Model class:
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; }
}
The customers Controller Contains only one GET method INDEX() I have added CustomersAPIController which has HTTP METHODs for CRUD operations. The Index action method of CustomersController has view:
@{
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>
}
When I submit the form ,I'm not seeing either any error or the data is not being saved to the database.Please look at the Javascript Code.Please correct me.Thank you in advance.