我需要使用Knockout js验证和提交数据，但我收到以下代码的错误是：isValid未定义，有时我得到的ViewModel未定义
public class EnrollmentRegister
{
public string AccountNumber { get; set; }
public string Type { get; set; }
public string OwnerLastName { get; set; }
public string OwnerFirstName { get; set; }
public string BusinessName { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public string Zip { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
public string Brand { get; set; }
}
#region GetIRFEnroll
public string GetIRFEnroll()
{
EnrollmentRegister oresult = new EnrollmentRegister();
return Newtonsoft.Json.JsonConvert.SerializeObject(oresult);
}
#endregion
[HttpPost]
public string PostIRFEnroll(EnrollmentRegister oresult)
{
return "Data Recievied";
}
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript">
</script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript">
</script>
<script src="../../Scripts/knockout.validation.min.js" type="text/javascript">
</script>
<script src="../../Scripts/Validation.Knockout.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ancSubmit").click(function () {
$.ajax({
url: '/Home/GetIRFEnroll',
datatype: 'json',
type: 'GET',
async: true,
success: function (result) {
ViewModel = ko.mapping.fromJSON(result);
ViewModel.Type.extend({ required: true });
ViewModel.BusinessName.extend({ required: true });
ViewModel.OwnerLastName.extend({ required: true });
ViewModel.OwnerFirstName.extend({ required: true });
ViewModel.AccountNumber.extend({ required: true });
ViewModel.LastName.extend({ required: true });
ViewModel.FirstName.extend({ required: true });
ViewModel.Email.extend({ required: true, email: true });
ViewModel.Phone.extend({ required: true });
ViewModel.Zip.extend({ required: true });
ViewModel.City.extend({ required: true });
ViewModel.State.extend({ required: true });
ViewModel.Address.extend({ required: true });
ViewModel.errors = validationSet([ViewModel.BusinessName,
ViewModel.OwnerLastName, ViewModel.OwnerFirstName, ViewModel.AccountNumber,
ViewModel.LastName, ViewModel.FirstName, ViewModel.Email, ViewModel.Phone,
ViewModel.Zip, ViewModel.City, ViewModel.State, ViewModel.Address]);
ko.applyBindings(ViewModel);
if (ViewModel.errors().length > 0) {
var isValid = false;
$('.Validations').css('display', 'block');
}
else
isValid = true;
}
});
if (isValid) {
$.ajax({
url: '/user/PostIRFEnroll',
type: 'post',
dataType: 'json',
data: ko.toJSON(ViewModel),
contentType: 'application/json; charset=utf-8',
success: function (result) {
alert(result);
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
ko.applyBindings(ViewModel);
});
});
</script>
<table>
<tr>
<td colspan="2" style="color: Red;">
* All fields are required
</td>
</tr>
<tr>
<td>
Enrollment Date
</td>
<td>
<span id="currentDate"></span>
</td>
<td>
</td>
</tr>
<tr>
<td>
Type
</td>
<td>
<select id="ddlType" data-bind="value:Type">
<option value="select">Select</option>
<option value="Body">Body</option>
<option value="Mechanical">Mechanical</option>
<option value="Both">Both</option>
</select>
<span class="Validations" style="color: Red; display: none;" data-
bind="validator:Type">
Required</span>
</td>
</tr>
<tr>
<td>
Business Name
</td>
<td>
<input id="BusinessName" type="text" style="width: 250px;" data-bind="value:
BusinessName"
placeholder="Enter Business Name" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: BusinessName" />
</td>
</tr>
<tr>
<td>
Owner First Name
</td>
<td>
<input id="OwnerFirstName" type="text" style="width: 250px;" data-bind="value:
OwnerFirstName"
placeholder="Enter Owner First Name" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: OwnerFirstName" />
</td>
</tr>
<tr>
<td>
Owner Last Name
</td>
<td>
<input id="OwnerLastName" type="text" style="width: 250px;" data-bind="value:
OwnerLastName"
placeholder="Enter Owner Last Name" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: OwnerLastName" />
</td>
</tr>
<tr>
<td style="width: 20%">
Billing Contact ID
<br />
(from DMS)
</td>
<td>
<input id="AccountNumber" type="text" style="width: 250px;" data-bind="value:
AccountNumber"
placeholder="Enter AccountNumber" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: AccountNumber" />
</td>
</tr>
<tr>
<td>
Contact First Name
<br>
<span style="font-size: 10px;">(Rewards assigned to this person)</span>
</td>
<td>
<input id="FirstName" type="text" style="width: 250px;" data-bind="value:
FirstName"
placeholder="Enter First Name" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: FirstName" />
</td>
</tr>
<tr>
<td>
Contact Last Name<br>
<span style="font-size: 10px;">(Rewards assigned to this person)</span>
</td>
<td>
<input id="LastName" type="text" style="width: 250px;" data-bind="value:
LastName"
placeholder="Enter Last Name" />
<span class="Validations" style="color: Red; display: none;" data-bind="validator: LastName" />
</td>
</tr>
<tr>
<td>
Email Address
</td>
<td>
<input id="Email" type="text" style="width: 250px;" data-bind="value: Email"
placeholder="Enter Email Address" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: Email" />
</td>
</tr>
<tr>
<td>
Confirm Email Address
</td>
<td>
<input id="ConfirmEmail" type="text" style="width: 250px;" placeholder="Enter
Confirm Email Address"
/>
</td>
</tr>
<tr id="msgconfrmemail" style="display: none;">
<td colspan="2">
<label style="color: Red;">
Email Address and Confirm Email Address do not match.</label>
</td>
</tr>
<tr>
<td>
Business Phone Number
</td>
<td>
<input id="Phone" type="text" style="width: 250px;" data-bind="value: Phone"
placeholder="Enter Phone Number" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: Phone" />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
Address
</td>
<td>
<input id="Address" type="text" style="width: 250px;" data-bind="value: Address"
placeholder="Enter Address" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: Address" />
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<input id="City" type="text" style="width: 250px;" data-bind="value: City"
placeholder="Enter City" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: City" />
</td>
</tr>
<tr>
<td>
State
</td>
<td>
<select id="ddlState" data-bind="value:State">
<option value="">Select</option>
<option value="New York">New York</option>
<option value="Latin"> Latin</option>
<option value="">NA</option>
</select>
<span class="Validations" data-bind="validator: State" style="color: Red;
display: none;">
Required</span>
</td>
</tr>
<tr>
<td>
Zip
</td>
<td>
<input id="Zip" type="text" style="width: 250px;" data-bind="value: Zip"
placeholder="Enter Zip" />
<span class="Validations" style="color: Red; display: none;" data-
bind="validator: Zip" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<div style="float: left; margin-bottom: 7px; margin-left: 0px">
<input type="button" id="ancSubmit" value="Submit" />
</div>
<div style="vertical-align: middle; padding-left: 10px; height: 39px; padding-
top: 12px">
<a href="/" style="color: #3F48DD; text-decoration: underline; cursor:
pointer; padding-left: 33px;">
Cancel</a>
</div>
</td>
</tr>
</table>