在asp.net mvc中敲除绑定,验证和映射

时间:2015-11-13 05:04:36

标签: asp.net-mvc knockout.js knockout-mapping-plugin knockout-validation

我正在使用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代码。请更正我。谢谢你提前。

0 个答案:

没有答案