如何根据mvc中第一个下拉列表的值填充第二个下拉列表？ [英] how to populate second dropdown based on the value of first dropdown in mvc?

问题描述

详细问题是如何根据第一个下拉列表的值填充第二个下拉列表，如果两个下拉列表都在部分视图中并将该部分视图调用到我的索引页面，该怎么办：



我的控制器：

  public  ActionResult _Prepaid（）
 {
  //   PrepaidRechargeModel Pre = new PrepaidRechargeModel（）;  
  //   ViewBag.PrepaidCompanyList = Pre.GetPrepaidCompany（）。ToList（）;  
 
 List< SelectListItem> ; li =  new  List< SelectListItem>（）; 
 li.Add（ new  SelectListItem {Text =  选择，值=   0}）; 
 li.Add（ new  SelectListItem {Text =   Aircel，值=   1}）; 
 li.Add（ new  SelectListItem {Text =   Airtel，值=   2}）; 
 li.Add（ new  SelectListItem {Text =   BPL，值=   3}）; 
 li.Add（ new  SelectListItem {Text =   BSNL，值=   4}）; 
 li.Add（ new  SelectListItem {Text =   Docomo，值=   5}）; 
 li.Add（ new  SelectListItem {Text =  想法，值=   6}）; 
 li.Add（ new  SelectListItem {Text =  循环，值=   7}）; 
 li.Add（ new  SelectListItem {Text =   MTNL，值=   8}）; 
 li.Add（ new  SelectListItem {Text =   MTS，值=   9}）; 
 li.Add（ new  SelectListItem {Text =  依赖，值=   10}）; 
 li.Add（ new  SelectListItem {Text =   S-Tel，值=   11}）; 
 li.Add（ new  SelectListItem {Text =   TataIndicom，值=   12}）; 
 li.Add（ new  SelectListItem {Text =   Uninor，值=   13}）; 
 li.Add（ new  SelectListItem {Text =   Videocon，值=   14}）; 
 li.Add（ new  SelectListItem {Text =   Virgin，Value =   15}）; 
 li.Add（ new  SelectListItem {Text =  沃达丰，值=   16}）; 
 ViewData [ 公司] = li; 
 
  return 查看（）; 
} 
 
  public  JsonResult GetProductID（ string  id）
 {
 List< SelectListItem> products =  new  List< SelectListItem>（）; 
  switch （id）
 {
  case    4：
 products.Add（ new  SelectListItem {Text =   TopUp，Value =    1}）; 
 products.Add（ new  SelectListItem {Text =  充值，值=   2}）; 
  break ; 
  case    5 ：
 products.Add（ new  SelectListItem {Text =   Flexi，Value =   3}）; 
 products.Add（ new  SelectListItem {Text =  特殊，值=   4}）; 
  break ; 
  case    13 ：
 products.Add（ new  SelectListItem {Text =   Flexi，Value =   7}）; 
 products.Add（ new  SelectListItem {Text =  特殊，值=   8}）; 
  break ; 
  case    14 ：
 products.Add（ new  SelectListItem {Text =   Flexi，Value =   9}）; 
 products.Add（ new  SelectListItem {Text =  特殊，值=   10}）; 
  break ; 
} 
 返回 Json（ new  SelectList（产品， 值， 文字））; 
 
} 

我的CSHTML页面：

 @model NomzyPay.Models.PrepaidRechargeModel 
 
 <   script     src   = 〜/ Scripts / jquery-1.7.1.min.js >  <   /   script  >  
 <   script     src   = 〜/ Scripts / jquery.validate.min.js  >  <   /  脚本 >  
 <   script     src   =  〜/ Scripts / jquery.validate.unobtrusive.min.js >  <   /   script  >  
 <   link     href   =  〜/ Content / control.css    rel   = 样式表    /  >  
 <   script     src   =  ../../ Scripts / jquery-1.7.1.min.js    type   =  text / javascript >  <   /   script  >  
 <   script     type   =  text / javascript >  
 < span class = code-keyword> var  $ js = jQuery.noConflict（）; 
 $ js（ document ）。ready（ function （）{
 $ js （ ＃ddln）。change（ function （）{
 $ js（ ＃ProductID）。empty（）; 
 $ js.ajax（{
 type：'  POST'，
 url：'  @ Url.Action（GetProductID）'，
 dataType： '  json'，
 data：{id：$ js（ ＃ddln）。val（）}，
成功： function （产品）{
 $ js.each（products， function （i，ProductID）{
 $ js（ ＃ProductID）。append（< span class =code-string>' < option value =' + ProductID.Value +  ' >' + ProductID.Text + ' < /选项>'）; 
}）; 
}，
错误： function （ex）{
 alert（' 无法使用产品 + ex）; 
} 
}）; 
  return   false ; 
}）
}）; 
 <   /   script  >  
 @using（Html.BeginForm（））
 {
 @ Html.ValidationSummary（true）
 
 <   fieldset  >  
 <  图例 >  <   / legend  >  
 
 <   div     class   =  editor-label >  
 @ Html.LabelFor（model => model.CompanyID，new {@class =lbldis}）
 <   / div  >  
 <   div     class   =  editor-field >  
 @ Html.DropDownList（公司，ViewData [公司]为List <   SelectListItem  > ，new {style =width：250px，@ class =dropdown1，id = ddln}）
 @ Html.ValidationMessageFor（model => model.CompanyID）
 <   / div   >  
 
 <   div     id   =  ndl >  
 <   div     class   =  editor-label >  
 @ Html.LabelFor（model => model .ProductID，new {@class =lbldis}）
 <   / div  < span class =code-keyword>>  
 <   div     class   =  editor-field >  
 @ Html.DropDownList（ProductID，新的SelectList（string.Empty，Value） ，文字），请选择一个，新{@class =txtbox}）
 <   / div  >  
 <   / div  >  

和索引页面我在哪里调用我的部分页面来索引这样的

 @ Html.Partial（〜/ Views / Recharge /_Prepaid.cshtml\")

解决方案

js = jQuery.noConflict（）;

js （ document ）。ready（ function （）{

js（ #ddln）。change（ function （）{

The Question in detail is how to populate second dropdown based on the value of first dropdown and what if both the dropdowns are in partial view and calling that partial view to my index page:

My Controller:

public ActionResult _Prepaid()
{
//PrepaidRechargeModel Pre = new PrepaidRechargeModel();
//ViewBag.PrepaidCompanyList = Pre.GetPrepaidCompany().ToList();

List<SelectListItem> li = new List<SelectListItem>();
li.Add(new SelectListItem { Text = "Select", Value = "0" });
li.Add(new SelectListItem { Text = "Aircel", Value = "1" });
li.Add(new SelectListItem { Text = "Airtel", Value = "2" });
li.Add(new SelectListItem { Text = "BPL", Value = "3" });
li.Add(new SelectListItem { Text = "BSNL", Value = "4" });
li.Add(new SelectListItem { Text = "Docomo", Value = "5" });
li.Add(new SelectListItem { Text = "Idea", Value = "6" });
li.Add(new SelectListItem { Text = "Loop", Value = "7" });
li.Add(new SelectListItem { Text = "MTNL", Value = "8" });
li.Add(new SelectListItem { Text = "MTS", Value = "9" });
li.Add(new SelectListItem { Text = "Reliance", Value = "10" });
li.Add(new SelectListItem { Text = "S-Tel", Value = "11" });
li.Add(new SelectListItem { Text = "TataIndicom", Value = "12" });
li.Add(new SelectListItem { Text = "Uninor", Value = "13" });
li.Add(new SelectListItem { Text = "Videocon", Value = "14" });
li.Add(new SelectListItem { Text = "Virgin", Value = "15" });
li.Add(new SelectListItem { Text = "Vodafone", Value = "16" });
ViewData["Company"] = li;

return View();
}

public JsonResult GetProductID(string id)
{
List<SelectListItem> products = new List<SelectListItem>();
switch (id)
{
case "4":
products.Add(new SelectListItem { Text = "TopUp", Value = "1" });
products.Add(new SelectListItem { Text = "Recharge", Value = "2" });
break;
case "5":
products.Add(new SelectListItem { Text = "Flexi", Value = "3" });
products.Add(new SelectListItem { Text = "Special", Value = "4" });
break;
case "13":
products.Add(new SelectListItem { Text = "Flexi", Value = "7" });
products.Add(new SelectListItem { Text = "Special", Value = "8" });
break;
case "14":
products.Add(new SelectListItem { Text = "Flexi", Value = "9" });
products.Add(new SelectListItem { Text = "Special", Value = "10" });
break;
}
return Json(new SelectList(products, "Value", "Text"));

} 

My CSHTML Page:

@model NomzyPay.Models.PrepaidRechargeModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/Content/control.css" rel="stylesheet" />
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $js = jQuery.noConflict();
$js(document).ready(function () {
$js("#ddln").change(function () {
$js("#ProductID").empty();
$js.ajax({
type: 'POST',
url: '@Url.Action("GetProductID")',
dataType: 'json',
data: { id: $js("#ddln").val() },
success: function (products) {
$js.each(products, function (i, ProductID) {
$js("#ProductID").append('<option value="' + ProductID.Value + '">' + ProductID.Text + '</option>');
});
},
error: function (ex) {
alert('Failed To Retive Products' + ex);
}
});
return false;
})
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

<fieldset>
<legend></legend>

<div class="editor-label">
@Html.LabelFor(model => model.CompanyID, new { @class = "lbldis" })
</div>
<div class="editor-field">
@Html.DropDownList("Company", ViewData["Company"] as List<SelectListItem>, new { style = "width:250px", @class = "dropdown1", id = "ddln" })
@Html.ValidationMessageFor(model => model.CompanyID)
</div>

<div id="ndl">
<div class="editor-label">
@Html.LabelFor(model => model.ProductID, new { @class = "lbldis" })
</div>
<div class="editor-field">
@Html.DropDownList("ProductID", new SelectList(string.Empty, "Value", "Text"), "Please Select One", new { @class = "txtbox" })
</div>
</div>

and the index page where i am calling my partial page to index like this

@Html.Partial("~/Views/Recharge/_Prepaid.cshtml")

解决方案

js = jQuery.noConflict();

js(document).ready(function () {

js("#ddln").change(function () {

这篇关于如何根据mvc中第一个下拉列表的值填充第二个下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！