如何通过jquery动态加载项目时如何验证mvcdropdownlist。 [英] How do I validate mvcdropdownlist when the items are loaded dynamically via jquery.
问题描述
我需要您的紧急帮助
我正在开发一个mvc5视图，用户可以在其中填写详细信息，以便他们的订单项目能够交付...... <当用户从mvcdropdownlistfor中选择状态时，城市的下拉列表由jquery自动填充，调用控制器函数以通过用户选择的状态选项填充列表。 ..
一切正常，直到这一点......
这里的问题是模型验证不再适用于城市下拉列表因为我当用户点击选择他们的状态时，通过jquery加载它...我尝试使用不同的jquery sripts进行城市下拉列表的客户端验证，但它不能正常运行...
---------------------------------------------- -----------------------------
这是mvc dropdownlist
Please I need your urgent help
I am working on an mvc5 view where users fill in their details inorder for their order item to be delivered...
When users select their state from an mvcdropdownlistfor, the drop down for city is auto populated by jquery calling the controller function to populate the list via the user selected choice for state...
Everything works fine till this point...
The issue here is model validation doesnt work for the city dropdown anymore because i loaded it via jquery when user click to select their state ...I have tried using different jquery sripts for client side validation for the city dropdown but its not working as well...
---------------------------------------------------------------------------
This is the code on the view for both mvc dropdownlist
<span class="required">* </span>@Html.LabelFor(Function(m) m.deliveryState)<br />
@Html.DropDownListFor(Function(m) m.deliveryState, Model.Items, " -- select -- ", New With {.id = "deliveryState", .class = "pbuy", .name = "command"})
<span style="color:red; display:block;">@Html.ValidationMessageFor(Function(m) m.deliveryState)</span>
</td>
<span class="required">* </span>@Html.LabelFor(Function(m) m.cityId)<br />
@Html.DropDownListFor(Function(m) m.cityId, Model.AvailableCities, " -- select -- ", New With {.id = "cityId", .class = "pbuy", .name = "command"})
<span style="color:red; display:block;">@Html.ValidationMessageFor(Function(m) m.cityId)</span>
<span id="cities-loading-progress" style="display: none;"><b>LOADING. PLEASE WAIT ...</b></span><br />
我的尝试：
控制器上
Dim con As New SqlConnection（taaxxto）
con.Open（）
Dim sqlSelect As String =SELECT * FROM [TF_States_DeliveryCharges] ORDER BY [StateId] ASC
Dim oComm As New SqlCommand（sqlSelect，con）
Dim rdr As SqlDataReader = oComm.ExecuteReader（）
如果rdr.Read和rdr.HasRows那么
虽然rdr.Read
m.StateItems.Add（rdr（StateDesc））
结束时
结束如果
rdr.Close（）
con.C丢失（）
返回查看（m）
视图
$（＃deliveryState）。change（function（）{
var selectedItem = $（this）.val（）;
var ddlCities = $（＃ cityId）;
var citiesProgress = $（＃cities-loading-progress）;
citiesProgress.show（）;
$ .ajax（{
缓存：false，
类型：GET，
url：@（Url.RouteUrl（GetCitiesByStateId） ）），
数据：{stateId：selectedItem}，
成功：函数（数据）{
ddlCities.html（' '）;
$ .each（数据，函数（id，选项）{
ddlCities.append（$（'< option>< / option>'）） .val（option.id）.html（option.name））;
}）;
citiesProgress.hide（）;
$ .validator.unobstrusive.parse（'＃CheckoutForm'）;
if（$ .validator）$ .validator.setDefaults（{
ignore：[]
}）;
}，
错误：function（xhr，ajaxOptions，thrownError）{
alert（'无法检索城市。'）;
citiesProgress.hide（）;
}
}）;
}）;
}）;
$（'＃cityId'）。触发器（输入）;
$（'＃cityId'）。validate（）;
var userCity = $（＃cityId）。val（）;
if（userCity ==''）{
var validator = $（ #CheckoutForm）。VAL idate（）;
validator.element（＃cityId）;
返回false;
$（＃cityId）。 （'城市是必需的'）;
}
if（！$（'＃cityId'）。valid（））{
e.preventDefault（）;
}
}）< / script>
使用的脚本
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery。 min.js>< / script>
< script type =text / javascriptsrc =〜/ Taafoo / JS / jquery.validate.js>< / script> ;
< script type =text / javascriptsrc =http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js>< / script>
< script type =text / javascriptsrc =http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js >< / script>
< script type =text / javascriptsrc =http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine- en.js
charset =utf-8>< / script>
< script type =text / javascriptsrc =http：/ /cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js
charset =utf-8>< / script>
What I have tried:
on the controller
Dim con As New SqlConnection(taaxxto)
con.Open()
Dim sqlSelect As String = "SELECT * FROM [TF_States_DeliveryCharges] ORDER BY [StateId] ASC"
Dim oComm As New SqlCommand(sqlSelect, con)
Dim rdr As SqlDataReader = oComm.ExecuteReader()
If rdr.Read And rdr.HasRows Then
While rdr.Read
m.StateItems.Add(rdr("StateDesc"))
End While
End If
rdr.Close()
con.Close()
Return View(m)
on the view
$("#deliveryState").change(function () {
var selectedItem = $(this).val();
var ddlCities = $("#cityId");
var citiesProgress = $("#cities-loading-progress");
citiesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetCitiesByStateId"))",
data: { "stateId": selectedItem },
success: function (data) {
ddlCities.html('');
$.each(data, function (id, option) {
ddlCities.append($('<option></option>').val(option.id).html(option.name));
});
citiesProgress.hide();
$.validator.unobstrusive.parse('#CheckoutForm');
if ($.validator) $.validator.setDefaults({
ignore: []
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve cities.');
citiesProgress.hide();
}
});
});
});
$('#cityId').trigger("input");
$('#cityId').validate();
var userCity = $("#cityId").val();
if (userCity == '') {
var validator = $("#CheckoutForm").validate();
validator.element("#cityId");
return false;
$("#cityId").after('City is required');
}
if (!$('#cityId').valid()) {
e.preventDefault();
}
})</script>
scripts used
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Taafoo/JS/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>
推荐答案
（＃deliveryState）。change（function（）{
var selectedItem =
("#deliveryState").change(function () {
var selectedItem =
（this）.val （）;
var ddlCities =
(this).val();
var ddlCities =
（＃cityId）;
var citiesProgress =
("#cityId");
var citiesProgress =
这篇关于如何通过jquery动态加载项目时如何验证mvcdropdownlist。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
