选择列表项值不适用于Javascript asp mvc

时间:2017-03-07 18:59:31

标签: javascript asp.net asp.net-mvc twitter-bootstrap

我有一份登记表。根据个人或商业角色,会出现两个不同的字段。

隐藏&显示js工作正常。但我猜测强制个人业务中的所有空字段仅对模型中Integer的{​​{1}}不起作用。但是选择Individual并填写所有表格!不适用于Business ....

我有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时,一切都很完美,我可以注册。

但是当我选择Business并且如果我从下拉菜单中选择“20'Carter'时,我收到错误The value 'Select Fleet Type,7' is not valid for Fleet Type.

我可以得到一些帮助吗?谢谢!!

1 个答案:

答案 0 :(得分:1)

可能导致此问题的一件事是,当您从运营商类型中选择Business并继续提交表单时,jQuery代码段将填写#Individual中的所有空字段,但是, #Individual内的下拉列表保留为Select Fleet Type,这会在表单提交到服务器时导致错误。如果是这种情况,您可以尝试将以下代码行添加到代码段中,以便#Individual下的下拉列表更新为#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());
    }
});