Question

所以，我有一个表格，每行都有一个编辑按钮。当点击编辑时，用户被重定向到另一个页面，其中字段是自动填充的。要实现这一点，我使用Knockout绑定。但是当我更新属性时它们只有Null值，即使字段已经填满。我正在使用双向buinding，我不明白我做错了什么。任何帮助都会受到赞赏。

HTML

<body>
<div class="container">
    <h1 class="col-sm-offset-2">Edit Provider Details:</h1>
    <br />
    <form class="form-horizontal" role="form" id="EditProviderDetailsForm" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">LAST NAME:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the Last Name" id="LastName" data-bind="value:LastName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_LastName">Enter the last name</label>
        </div>
         <div class="form-group">
            <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value:ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="13">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value:ContactEmail" placeholder="Enter your email address" id="EmailAddress">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
        </div>
        <div class="form-group">
            <button type="submit" id="Update" class="btn btn-primary col-sm-1 col-sm-offset-4">Update</button>
            <button type="button" id="Reset" class="btn btn-primary col-sm-1">Reset</button> 
        </div>
    </form>
</div>
<script type="text/javascript" src="../../App_Scripts/Edit_Jquery.js">   </script>
      <script type="text/javascript">var providerData = @Html.Raw(Json.Encode(Model))</script>

JS如图所示

 var ProviderEdit = function () {
var self = this;
self.ProviderID = ko.observable(providerData.ProviderID);
self.FirstName = ko.observable(providerData.FirstName);
self.LastName = ko.observable(providerData.LastName);
self.ContactNumber = ko.observable(providerData.ContactNumber);
self.ContactEmail = ko.observable(providerData.ContactEmail);
var Provider =
    {
        ProviderID: self.ProviderID,
        FirstName: self.FirstName,
        LastName: self.LastName,
        ContactNumber: self.ContactNumber,
        ContactEmail: self.ContactEmail,
    };
self.Provider = ko.observable();
}
 $(document).ready(function () {
   ko.applyBindings(new ProviderEdit());
   $("#EditProviderDetailsForm").validate({
    onfocusout: function (element, event) {
        this.element(element);
    },
    onkeyup: function (element, event) {
        if (event.which === 9 && this.elementValue(element) === '') {
            return;
        } else if (element.name in this.submitted) {
            this.element(element);
        }
    },
    rules:
        {
            FirstName: { required: true, minlength: 2, maxlength: 20 },
            LastName: { required: true, minlength: 2, maxlength: 20 },
            ContactNumber: { required: true, minlength: 10, maxlength: 10 },
            ContactEmail: { required: true, AcceptEmail: true }
        },
    messages: {
        FirstName: {
            required: "Please enter your first name",minlength: "Minimum 2 characters required",maxlength: "Maximum 20 characters allowed"
        },
        LastName: {
            required: "Please enter your last name",minlength: "Minimum 2 characters required",maxlength: "Maximum 20 characters allowed"
        },
        ContactNumber: {
            required: "Please enter your Contact Number",minlength: "Enter a 10 digit contact number",maxlength: "Enter a 10 digit contact number"
        },
        ContactEmail: {
            required: "Please enter your Email Address",AcceptEmail: "Please enter a valid email ID"
           }
       }
    });   
});

我没有发布控制器代码，因为我相信如果数据很好就可以工作。请指导我正确的方向。

enter image description here

除了ID之外，表单字段在编辑后具有空值

0 个答案: