选择列表项值不适用于Javascript ASP MVC [英] Select List Item value does not working with Javascript asp mvc
问题描述
我有一个注册表.根据个人或企业角色，会出现两个不同的字段.
I am having a register form. And based on roles Individual or Business, two different fields appears.
隐藏&显示js效果很好.但是我猜想强迫个体中的所有空字段都不能仅用于 FleetType ，后者是模型中的 Integer .但请选择 Individual ，然后填写所有适用的表格！不适用于 Business ....
Hide & Show js works fine. But I guessing Forcing all empty fields in individual to business not working only for FleetType which is an Integer in model. But select Individual and fill out all the form it works! Not working just for Business....
我有register.cshtml:
I have register.cshtml:
ViewBag.NCFleetTypeList = new List<SelectListItem>
{
new SelectListItem { Text="Select Fleet Type", Value=null},
new SelectListItem { Text="Car", Value="1"},
new SelectListItem { Text="Cargo Van", Value="2"},
new SelectListItem { Text="Pickup Truck", Value="3"},
new SelectListItem { Text="10' Truck", Value="4"},
new SelectListItem { Text="15' Truck", Value="5"},
new SelectListItem { Text="17' Truck", Value="6"},
new SelectListItem { Text="20' Truck", Value="7"},
new SelectListItem { Text="26' Truck", Value="8"}
};
ViewBag.CFleetTypeList = new List<SelectListItem>
{
new SelectListItem { Text="Select Fleet Type", Value=null},
new SelectListItem { Text="10' Truck", Value="4"},
new SelectListItem { Text="15' Truck", Value="5"},
new SelectListItem { Text="17' Truck", Value="6"},
new SelectListItem { Text="20' Truck", Value="7"},
new SelectListItem { Text="26' Truck", Value="8"}
};
<div class="form-group">
<div class="col-md-10">
@Html.DropDownListFor(m => m.CarrierType, ViewBag.CarrierTypeList as List<SelectListItem>, new { @class = "btn btn-primary btn-block dropdown-toggle", id = "CarrierType" })
</div>
</div>
<!--Individual-->
<div id="Individual">
<h4>Individual Information</h4>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15})
@Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16})
@Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17})
@Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18})
@Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.DropDownListFor(m => m.FleetType, ViewBag.NCFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary dropdown-toggle"})
</div>
</div>
</div>
<!--Business-->
<div id="Business">
<h4>Business Information</h4>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.DriverLicenseNumber, new {@class = "form-control ", placeholder = "Driver's License Number", required = "required", tabindex = 15})
@Html.ValidationMessageFor(m => m.DriverLicenseNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VehicleRegNumber, new {@class = "form-control ", placeholder = "Vehicle Registration Number", required = "required", tabindex = 16})
@Html.ValidationMessageFor(m => m.VehicleRegNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VehiclePlateNumber, new {@class = "form-control ", placeholder = "Vehicle Plate Number", required = "required", tabindex = 17})
@Html.ValidationMessageFor(m => m.VehiclePlateNumber, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.TextBoxFor(m => m.VecInsNum, new {@class = "form-control ", placeholder = "Vehicle Isurance Number", required = "required", tabindex = 18})
@Html.ValidationMessageFor(m => m.VecInsNum, null, new {@class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-10">
@Html.DropDownListFor(m => m.FleetType, ViewBag.CFleetTypeList as List<SelectListItem>, new {@class = "btn btn-primary dropdown-toggle"})
</div>
</div>
</div>
JS我有以下内容:
// Assuming the form has a submit button with id = "submit-btn"
$('#submit-btn').on('click', function () {
var form = $(this).closest('form');
var businessDiv = form.find('#Business');
// Assuming this is only required when Business is selected
if (businessDiv.is(':visible')) {
var individual = form.find('#Individual input:text');
var business = businessDiv.find('input:text');
for (var i = 0; i < individual.length; ++i) {
// Perform the required logic here.
// I'm just forcing all empty fields in individuals to
// their business counterpart
if (individual[i].value === "") {
individual[i].value = business[i].value;
}
}
}
});
当我选择 Individual 时，一切正常，我可以注册.
When I select Individual and everything works perfect and I could register.
但是当我选择 Business 时，如果从下拉列表中选择"20'Truck"，则会出现错误值'Select Fleet Type，7'对于Fleet Type无效.
But When I select Business and if I choose "20' Truck' from dropdown, I get error The value 'Select Fleet Type,7' is not valid for Fleet Type.
我可以寻求帮助吗?谢谢！！
Can I get some help? Thank you!!
推荐答案
可能导致此问题的一件事是，当您从运营商类型中选择 Business 并继续提交表格时，jQuery代码段将填写 #Individual 中的所有空白字段，但是， #Individual 中的下拉列表保留为 Select Fleet Type ，这将导致表单提交到服务器时出错.如果是这种情况，您可以尝试将以下代码行添加到代码段中，以便将 #Individual 下的下拉列表更新为在 #Business 下的下拉列表中选择的值:
One thing that might be causing this issue is, when you select Business from the carrier type and proceed to submit the form, the jQuery snippet will fill out all the empty fields in #Individual however, the dropdown inside #Individual is left as Select Fleet Type and this causes the error when the form gets submitted to the server. If that's the case, you can try adding the following lines of code to the snippet so that the dropdown under #Individual gets updated to the value selected in the dropdown under #Business:
// Assuming the form has a submit button with id = "submit-btn"
$('#submit-btn').on('click', function() {
var form = $(this).closest('form');
var businessDiv = form.find('#Business');
// Assuming this is only required when Business is selected
if(businessDiv.is(':visible')) {
var individual = form.find('#Individual input:text');
var business = businessDiv.find('input:text');
for(var i = 0; i < individual.length; ++i) {
// Perform the required logic here.
// I'm just forcing all empty fields in individuals to
// their business counterpart
if(individual[i].value === "") {
individual[i].value = business[i].value;
}
}
// Add the following lines
// let the business dropdown update the individual dropdown
var individualFleetSelect = $(form.find('#Individual .dropdown-toggle'));
var businessFleetSelect = $(form.find('#Business .dropdown-toggle'));
individualFleetSelect.val(businessFleetSelect.val());
}
});
这篇关于选择列表项值不适用于Javascript ASP MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
