-1
我有一个视图，复制按钮单击控件。我通过KO的可观察阵列实现了这一点。我现在面临的问题是，它会复制所有控件，但是当我尝试在保存时获取该可观察数组时，它没有包含所有元素。我正在尝试更新用于phnumber的文本更改上的hiddenfor元素的值。对于第一个，它工作得很好，但是当我点击添加新的电话号码并输入值时，除了下拉值和备注之外，它全部为空。以下检查 [{“IsDomestic”：“True”，“CountryCode”：“1”，“AreaCode”：“201”，“PhoneNumber”：“5555555”，“InternationalNumber”：“”，“Extension”：“55 ”， “注释”： “测试”， “PrimaryNumberYN”： “错误”， “OkToId”： “NULL”， “OkToLeaveMessageYN”： “错误”， “phoneTypeDscId”：74}，{ “注释”： “teststestststt”， “phoneTypeDscId”：73}]淘汰赛观察阵列动态添加元素值为空
以下是我的代码
<script type="text/javascript">
var i = 1;
// var temp = @Html.Raw(Json.Encode(Model));
// console.log(temp);
function PhoneTypeViewModel() {
this.PhoneType = ko.observable();
this.selectedPhoneType = ko.observable();
var newPhone = function() {
return {
PhoneID: ko.observable(),
IsDomestic: ko.observable(),
CountryCode: ko.observable(),
AreaCode: ko.observable(),
PhoneNumber: ko.observable(),
InternationalNumber: ko.observable(),
Extension: ko.observable(),
Notes: ko.observable(),
PrimaryNumberYN: ko.observable(),
OkToId: ko.observable(),
OkToLeaveMessageYN: ko.observable(),
phoneTypeDscId: ko.observable()
}
};
this.multiplePhone = ko.observableArray([newPhone()]);
//this.multiplePhone = ko.ko.observable(),([{
// PhoneID: 1,
// IsDomestic: "",
// CountryCode: "",
// AreaCode: "",
// PhoneNumber: "",
// InternationalNumber: "",
// Extension: "",
// Notes: "",
// PrimaryNumberYN: "False",
// OkToId: "False",
// OkToLeaveMessageYN: "False",
// phoneTypeDscId: ""
// // visible : false
//}]);
this.addPhone = function() {
i = i + 1;
// this.multiplPhone.push(newPhone());
this.multiplePhone.push({
PhoneID: ko.observable(),
IsDomestic: ko.observable(),
CountryCode: ko.observable(),
AreaCode: ko.observable(),
PhoneNumber: ko.observable(),
InternationalNumber: ko.observable(),
Extension: ko.observable(),
Notes: ko.observable(),
PrimaryNumberYN: ko.observable(),
OkToId: ko.observable(),
OkToLeaveMessageYN: ko.observable(),
phoneTypeDscId: ko.observable()
});
//this.multiplePhone.push(
// {
// //id: i, visible: true
// PhoneID: i,
// IsDomestic: "",
// CountryCode: "",
// AreaCode: "",
// PhoneNumber: "",
// InternationalNumber: "",
// Extension: "",
// Notes: "",
// PrimaryNumberYN: "False",
// OkToId: "False",
// OkToLeaveMessageYN: "False",
// phoneTypeDscId: ""
// // visible : true
// }
// );
// console.log(this.multiplePhone()[0]['PhoneID']);
};
this.removePhone = function (data) {
this.multiplePhone.remove(data);
};
this.intlTelInpt = function() {
console.log("test");
this.intlTelInput({
autoFormat: true,
allowExtensions: true,
utilsScript: "../../Scripts/IntlTelInput/utils.js"
});
};
this.save = function() {
console.log(ko.toJSON(this.multiplePhone));
$.ajax({
url: '@Url.Action("addPhone", "Patients")',
type: "POST",
data: ko.toJSON(this.multiplePhone),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data);
alert("Phone successfully added.");
$('#phNumber').val("").change();
$('#phTypeSelect').val("").change();
$('#notes').val("").change();
//this.multiplePhone.removeAll();
// ko.applyBindings(new PhoneTypeViewModel());
},
error: function (data) {
console.log(data);
alert("An error has occurred.");
}
});
}
}
$(document).ready(function() {
$(window).load(function() {
//$(document).on(".intltelinput", function() {
// $(this).intlTelInput({
// autoFormat: true,
// allowExtensions: true,
// utilsScript: "../../Scripts/IntlTelInput/utils.js"
// });
//});
//ko.applyBindings(new multiplePhonesViewModel(), document.getElementById("phoneInfo"));
//$(document).on('click', ".remove", function() {
// console.log("Entered remove function");
// i = i - 1;
// $(this).closest("div.dynamicTel").remove();
//});
$(document).on('focus', "input.phNumber", function() {
$(this).intlTelInput({
autoFormat: true,
allowExtensions: true,
utilsScript: "../../Scripts/IntlTelInput/utils.js"
});
});
$.ajax({
url: '@Url.Action("getDescriptorListByType", "Descriptor")',
data: {type : "Phone"},
type: "POST",
success: function (data) {
var phoneTypeViewModel = new PhoneTypeViewModel();
phoneTypeViewModel.PhoneType(data);
ko.applyBindings(phoneTypeViewModel);
}
});
@*$.ajax({`enter code here`
url: '@Url.Action("getPhoneById", "Phone")',
data: {Id : -1},
type: "POST",
success: function (phone) {
var phoneTypeVM = new PhoneTypeViewModel();
phoneTypeVM.multiplePhone(phone);
console.log(phoneTypeVM);
}
});*@
// $(function() {
// $("#phNumber").intlTelInput({
// autoFormat: true,
// allowExtensions: true,
// utilsScript: "../../Scripts/IntlTelInput/utils.js"
// });
//});
$(document).on('change', "input.phNumber", function() {
//$('#phNumber').change(function() {
if ($(this).intlTelInput("isValidNumber") == false) {
var err = $('#phNumber').intlTelInput("getValidationError");
console.log($('#phNumber').intlTelInput("getValidationError"));
console.log(intlTelInputUtils.validationError);
switch (err) {
case intlTelInputUtils.validationError.INVALID_COUNTRY_CODE:
alert("The country code is not valid");
$("#error-msg").val("The country code is not valid");
break;
case intlTelInputUtils.validationError.TOO_SHORT:
alert("The phone number is too short");
$("#error-msg").val("The phone number is too short");
break;
case intlTelInputUtils.validationError.TOO_LONG:
alert("The phone number is too long");
$("#error-msg").val("The phone number is too long");
break;
case intlTelInputUtils.validationError.NOT_A_NUMBER:
alert("The value is not a number");
$("#error-msg").val("The value is not a number");
break;
default:
alert("The phone number is not valid");
$("#error-msg").val("The phone number is not valid");
break;
}
$("#error-msg").removeClass("hide");
}
else
{
$('#primaryNumber').val("False").change();
$('#okToID').val("NULL").change();
$('#okToLeaveMessage').val("False").change();
$('#extension').val("").change();
$('#isDomestic').val("True").change();
$('#areaCode').val("").change();
$('#number').val("").change();
$('#intlNumber').val("").change();
var countryCode = $('#phNumber').intlTelInput("getSelectedCountryData").dialCode;
$('#countryCode').val(countryCode).change();
$('#extension').val($('#phNumber').intlTelInput("getExtension")).change();
if (countryCode == "1")
{
$('#number').val(($('#phNumber').intlTelInput("getNumber", intlTelInputUtils.numberFormat.NATIONAL).substring(6, 14)).replace('-','')).change();
$('#areaCode').val(($('#phNumber').intlTelInput("getNumber", intlTelInputUtils.numberFormat.NATIONAL)).substring(1, 4)).change();
}
else
{
$('#intlNumber').val($('#phNumber').intlTelInput("getNumber")).change();
$('#isDomestic').val("False").change();
}
console.log("country code = " + countryCode);
console.log("extension = " + $('#extension').val());
console.log("is domestic = " + $('#isDomestic').val());
console.log("number = " + $('#number').val());
console.log("area code = " + $('#areaCode').val());
console.log("international number" + $('#intlNumber').val());
}
});
});
});
</script>
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
<div i class="row" data-bind="foreach: multiplePhone">
<div class="row">
<div class="col-md-3">
<div class="form-group">
@Html.Label("Phone Number ")
@Html.TextBox("phNumber", "", new { @id = "phNumber", type = "tel", @class = "form-control input-sm phNumber" })
@Html.HiddenFor(model => model.PhoneNumber,new { @id = "number", @data_bind = "value: PhoneNumber" })
@Html.HiddenFor(model => model.IsDomestic, new { @id = "isDomestic" , @data_bind = "value: IsDomestic" })
@Html.HiddenFor(model => model.CountryCode, new { @id = "countryCode", @data_bind = "value: CountryCode" })
@Html.HiddenFor(model => model.AreaCode, new { @id = "areaCode", @data_bind = "value: AreaCode" })
@Html.HiddenFor(model => model.InternationalNumber, new { @id = "intlNumber", @data_bind = "value: InternationalNumber" })
@Html.HiddenFor(model => model.Extension, new { @id = "extension", @data_bind = "value: Extension" })
@Html.HiddenFor(model => model.PrimaryNumberYN, new { @id = "primaryNumber", @data_bind = "value: PrimaryNumberYN" })
@Html.HiddenFor(model => model.OkToId, new { @id = "okToID", @data_bind = "value: OkToId" })
@Html.HiddenFor(model => model.OkToLeaveMessageYN, new { @id = "okToLeaveMessage", @data_bind = "value: OkToLeaveMessageYN" })
@*<input type="tel" class="form-control input-sm phNumber">*@
</div>
</div>
<div class="col-md-3">
<div class="form-group">
@Html.Label("Phone Type ")
@Html.DropDownListFor(model => model.phoneTypeDscId, Enumerable.Empty<SelectListItem>(), new { @class = "form-control", id = "phTypeSelect", @data_bind = "options: $parent.PhoneType, optionsValue:'DescriptorId', optionsText: 'Name', optionsCaption: '-- Choose Phone Type --', value: phoneTypeDscId" })
@*<select class="dropdown" data-bind="options: $parent.PhoneType, optionsValue:'DescriptorId', optionsText: 'Name', optionsCaption: '-- Choose Phone Type --'"></select>*@
@Html.ValidationMessageFor(model => model.phoneTypeDscId, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-5">
<div class="form-group">
@Html.Label("Notes ")
@Html.EditorFor(model => model.Notes, new { htmlAttributes = new {id="notes", @class = "form-control input-sm", @data_bind = "value: Notes" } })
@Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<br />
<button data-bind="click: $parent.removePhone.bind($parent), clickBubble: false, visible: $index() > 0"><span class="glyphicon glyphicon-trash"></span></button>
@*<label data-bind="visible: visible">Remove</label>*@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button data-bind="click: addPhone, clickBubble: false"><span class="glyphicon glyphicon-plus"></span></button>
<label>Add New Phone Number</label>
</div>
</div>
</div>
@*<div class="row">
<div class="col-md-12">
<button class="btn btn-default save">Save</button>
</div>
</div>*@
@*<div class="row">
@Html.HiddenFor(model => model.InternationalNumber, new { htmlAttributes = new { @id = "internationalPhoneNumber"} })
</div>*@
<div>
<div class="col-md-3">
<input type="submit" value="Add Phone" data-bind="click: save" class="btn btn-default" />
</div>
</div>