级联下拉列表不会将数据绑定到第二个下拉列表

我有一个主视图。发布完成后，它将在主视图中呈现局部视图。级联下拉列表不会将数据绑定到第二个下拉列表

我的分部视图有一个级联下拉列表，它根据第一个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

级联下拉列表不会将数据绑定到第二个下拉列表

回答

相关问题