級聯下拉列表不會將數據綁定到第二個下拉列表

我有一個主視圖。發佈完成後，它將在主視圖中呈現局部視圖。級聯下拉列表不會將數據綁定到第二個下拉列表

我的分部視圖有一個級聯下拉列表，它根據第一個DropdownList中選定的值更改第二個DropdownList項目。

這是我在部分視圖中的下拉菜單。

@model MigratingDB.Models.ViewModel 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<div> 
    @Html.DropDownListFor(m => m.DropdownViewModel.SelectedValue1, 
    Model.DropdownViewModel.List1, "Select",htmlAttributes: new { @class = "form-control", @id = "ddl1" }) 
</div> 

<div> 
    @Html.DropDownListFor(m => m.DropdownViewModel.SelectedValue2, 
      Model.DropdownViewModel.List2 = new SelectList(Enumerable.Empty<SelectListItem>()), "Select", 
      htmlAttributes: new { @class = "form-control", @id = "ddl2" }) 
</div>

我試過的腳本基於this。

<script> 
    $(function() { 
     $('#ddl1').change(function() { 
      $("#ddl2").empty(); 
      var selectedValue = $(this).val(); 
      $.ajax({ 
       url: '@Url.Action("Getddl2Items", "Controller")', 
       type: "POST", 
       dataType: 'json', 
       data: { id: selectedValue }, 
       success: function (value) { 
        $.each(value, function (i, val) { 
         $("#ddl2").append('<option value="' + val.Value + '">' + 
          val.Text + '</option>'); 
        }); 
       }, 
       error: function (ex) { 
        alert('Failed' + ex); 
       }, 
      }); 
     }); 
    }); 
</script>

在我的控制器：

[HttpPost] 
    public ActionResult Foo (ViewModel vm) 
    { 
     // Dropdownlist 
     var list1 = // get items frop ddl1 
     vm.DropdownViewModel.List1= new SelectList(list1, "Value", "Text"); 

     return PartialView("_PartialView", vm); 
    } 
     // Get ddl2 Items 
     public JsonResult Getddl2Items (int id) 
     { 
      var ViewModel = new ViewModel(); 
      var list2= // get ddl2 items from the database 
      ViewModel.DropdownViewModel.List2= new SelectList(list2, "Value", "Text"); 
      return Json(ViewModel.DropdownViewModel.List2, JsonRequestBehavior.AllowGet); 
     }

每次我試圖從DDL1選擇一個值，它的錯誤，並顯示

失敗[對象的對象。

這是什麼原因造成的？

來源

2017-07-17 progammer101

這是一篇很長的文章，我測試和工作。由於它很長，你可以挑選出你需要的零件。讓我們一起弄清楚爲什麼它不適合你。

這將是你的表和數據創建：

--Use your database name instead of Breaz 
USE [Breaz] 
GO 
/****** Object: Table [dbo].[tblCity] Script Date: 7/17/2017 9:46:31 AM ******/ 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
CREATE TABLE [dbo].[tblCity](
    [Cityid] [int] NOT NULL, 
    [CityName] [nvarchar](50) NULL, 
    [stateid] [int] NOT NULL 
) ON [PRIMARY] 

GO 
/****** Object: Table [dbo].[tblState] Script Date: 7/17/2017 9:46:31 AM ******/ 
SET ANSI_NULLS ON 
GO 
SET QUOTED_IDENTIFIER ON 
GO 
CREATE TABLE [dbo].[tblState](
    [stateid] [int] NOT NULL, 
    [statename] [nvarchar](50) NULL, 
PRIMARY KEY CLUSTERED 
(
    [stateid] ASC 
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] 
) ON [PRIMARY] 

GO 
INSERT [dbo].[tblCity] ([Cityid], [CityName], [stateid]) VALUES (1, N'Phoenix', 1) 
INSERT [dbo].[tblCity] ([Cityid], [CityName], [stateid]) VALUES (2, N'Las Angeles', 2) 
INSERT [dbo].[tblState] ([stateid], [statename]) VALUES (1, N'Arizona') 
INSERT [dbo].[tblState] ([stateid], [statename]) VALUES (2, N'California') 
ALTER TABLE [dbo].[tblCity] WITH CHECK ADD FOREIGN KEY([stateid]) 
REFERENCES [dbo].[tblState] ([stateid]) 
GO

創建EDMX，通過Visual Studio的嚮導來。

創建視圖模型：

//user your namespace 
namespace Testy20161006.Models 
{ 
    public class Registration 
    { 
     [Required(ErrorMessage = "Enter State")] 
     public string State { get; set; } 
     [Required(ErrorMessage = "Enter City")] 
     public string City { get; set; } 
    } 
}

你的控制器/類：

public class HomeController : Controller 
{ 
    public JsonResult getCity(int id) 
    { 
     //use your dbcontext name from edmx wizard 
     using (BreazEntities33 objEF = new BreazEntities33()) 
     { 
      var ddlCity = objEF.tblCities.Where(x => x.stateid == id).ToList(); 
      List<SelectListItem> licities = new List<SelectListItem>(); 

      licities.Add(new SelectListItem { Text = "--Select State--", Value = "0" }); 
      if (ddlCity != null) 
      { 
       foreach (var x in ddlCity) 
       { 
        licities.Add(new SelectListItem { Text = x.CityName, Value = x.Cityid.ToString() }); 
       } 
      } 
      return Json(new SelectList(licities, "Value", "Text", JsonRequestBehavior.AllowGet)); 
     } 
    } 

    [HttpPost] 
    public ActionResult IndexStackOverflow(Registration registration) 
    { 
     //put breakpoint here to see values coming back from view 
     return View(registration); 
    } 

    //use your name of action that starts the process, named in routeconfig.cs 
    public ActionResult IndexStackOverflow() 
    { 
     bindState(); 
     return View(); 
    } 

    public void bindState() 
    { 
     //use your dbcontext name from edmx wizard 
     using (BreazEntities33 objEF = new BreazEntities33()) 
     { 
      var state = objEF.tblStates.ToList(); 
      List<SelectListItem> li = new List<SelectListItem>(); 
      li.Add(new SelectListItem { Text = "--Select State--", Value = "0" }); 

      foreach (var m in state) 
      { 
       li.Add(new SelectListItem { Text = m.statename, Value = m.stateid.ToString() }); 
       ViewBag.state = li; 
      } 
     } 
    }

這是你的看法：

@model Testy20161006.Models.Registration 
@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>IndexStackOverflow</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#State").change(function() { 
       $("#City").empty(); 
       $.ajax({ 
        type: 'POST', 
        url: '@Url.Action("getcity")', 
        dataType: 'json', 
        data: { id: $("#State").val() }, 
        success: function (city) { 
         $.each(city, function (i, city) { 
          $("#City").append('<option value="' 
                 + city.Value + '">' 
               + city.Text + '</option>'); 
         }); 
        }, 
        error: function (ex) { 
         alert('Failed.' + ex); 
        } 
       }); 
       return false; 
      }) 
     }); 
    </script> 
</head> 
<body> 
    @using (Html.BeginForm()) 
    { 
     <div class="container"> 
      <div class="row"> 
       <div class="form-group"> 
        @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownListFor(model => model.State, ViewBag.state as List<SelectListItem>, new { style = "width: 200px;" }) 
         @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="form-group"> 
        @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownListFor(model => model.City, new SelectList(string.Empty, "Value", "Text"), "--Select City--", new { style = "width:200px" }) 
         @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
      </div> 
     </div> 
     <div><input type="button" value="submit" /></div> 
    } 
</body> 
</html>

來源

2017-07-17 17:21:12 kblau

對不起，回覆遲了。我會在家嘗試。無論如何，我試圖在我的控制器動作「Getddl2Items」上使用調試器，它會返回我需要的數據。此外，'失敗[對象對象]'停止顯示請求成功的含義。但不知何故，每次我在第一個下拉列表中點擊一個值，即使請求成功，我仍然沒有在第二個下拉列表中獲得任何價值。 – progammer101

你有沒有從ViewModel的SelectListItem中返回Json值的例子？ – progammer101

@ progammer101我改變了我的帖子，所以視圖上的按鈕沒有提交。 – kblau

這裏是從返回的Json值的示例ViewModel中的SelectListItem。

public class ReturnJsonVM 
{ 
    public List<SelectListItem> licities = new List<SelectListItem>(); 
} 

public class HomeController : Controller 
{ 
    //use your name of action that starts the process, named in routeconfig.cs 
    public string IndexStackOverflow() 
    { 
     using (BreazEntities33 objEF = new BreazEntities33()) 
     { 
      var ddlCity = objEF.tblCities.Where(x => x.stateid == 1).ToList(); 
      List<SelectListItem> licities = new List<SelectListItem>(); 

      ReturnJsonVM returnJsonVM = new ReturnJsonVM(); 
      if (ddlCity != null) 
      { 
       foreach (var x in ddlCity) 
       { 
        returnJsonVM.licities.Add(new SelectListItem { Text = x.CityName, Value = x.Cityid.ToString() }); 
       } 
      } 
      string json = JsonConvert.SerializeObject(returnJsonVM.licities); 
      //put your break point here to see example that return Json value from SelectListItem in ViewModel 
      return json; 
     } 
    }

來源

2017-07-18 18:34:08 kblau

謝謝你的答案。我通過刪除ViewModel並將其屬性放到MainViewModel直接訪問來解決問題。不知道發生了什麼，但確定它的工作。 – progammer101

級聯下拉列表不會將數據綁定到第二個下拉列表

回答

相關問題