在 mvc 中使用 ajax 调用将记录绑定到 html.dropdownlist答案

【问题标题】：Bind the record to html.dropdownlist using ajax call in mvc在 mvc 中使用 ajax 调用将记录绑定到 html.dropdownlist
【发布时间】：2016-01-21 16:19:10
【问题描述】：

我有一个 Mvc 应用程序。在一个视图中的该应用程序中，我有 2 个@html.dropdownlists。我在<script/> 标记中创建一个函数，将在第一个下拉列表的 selectedIdnexchange 事件中调用，并获取所选值并使用 ajax 调用发送到控制器。控制器将返回结果并尝试将该结果与第二个下拉列表绑定。我想在第二个下拉列表中显示所选状态的所有 RTO 名称。这是我的下拉菜单

@Html.DropDownList("State", new List<SelectListItem> { 
                                                        new SelectListItem{Text="Andaman and Nicobar Islands",Value="Andaman and Nicobar Islands"},
                                                        new SelectListItem{Text="Andhra Pradesh",Value="Andhra Pradesh"},
                                                        new SelectListItem{Text="Arunachal Pradesh",Value="Arunachal Pradesh"},
                                                        new SelectListItem{Text="Assam",Value="Assam"},
                                                        new SelectListItem{Text="Bihar",Value="Bihar"},
                                                        new SelectListItem{Text="Chandigarh",Value="Chandigarh"},
                                                        new SelectListItem{Text="Chhattisgarh",Value="Chhattisgarh"},
                                                        new SelectListItem{Text="Dadra and Nagar Haveli",Value="Dadra and Nagar Haveli"},
                                                        new SelectListItem{Text="Daman and Diu",Value="Daman and Diu"},
                                                        new SelectListItem{Text="National Capital Territory of Delhi",Value="National Capital Territory of Delhi"},
                                                        new SelectListItem{Text="Goa",Value="Goa"} }, null, new { @class="ddlHtml form-control",@id="ddlState"})
@Html.DropDownList("RTOListItem", new List<SelectListItem> { 
                                                                     new SelectListItem{Text="None",Value="-1"}
                                                                     }, null, new { @class = "ddlHtml form-control", @id = "DDlforLocations" })

这是我的脚本函数

 $(document).on('change', '#ddlState', function () {
     var v = document.getElementById("ddlState");
     var statevalue = v.options[v.selectedIndex].text;
     alert(statevalue);
     var j = v.selectedIndex;
     if (j == 0) {
         sweetAlert("Oops..", "choose correct State", "error");
     }
     else {
         $.ajax({
             url: '@Url.Action("GetLocations","Home")',
             type: 'GET',
             datatype: 'json',
             data: { selectedState: statevalue }
         })
            .success(function (data) {
                $('#DDlforLocations').html(data);
            });
     }
 });

这是我的控制器

public JsonResult GetLocations(string selectedState) {

        ConsumerNomineeFormEntities db= new ConsumerNomineeFormEntities();
        RTOCode tbl = new RTOCode();
        var optionList = db.RTOCodes.Where(a => a.State == selectedState).Select(a => "<option value='" + a.Location + "'>" + a.Location + "</option>");

        var val = tbl.Location;


        return Json(optionList, JsonRequestBehavior.AllowGet);

    }

请帮助我。将从控制器返回的记录与第二个下拉列表绑定

【问题讨论】：

您的问题是什么？有问题吗？
@FelixCen 当我从第一个下拉列表中选择项目时，它会调用一个包含 ajax 调用的函数，用于将我的项目值发送到控制器，控制器会将结果返回给 ajax 调用。现在我想将该结果绑定到第二个下拉列表作为下拉列表的值和文本

标签： c# jquery ajax asp.net-mvc dropdown

【解决方案1】：

在服务器端代码中混合代码来构建 UI 标记并不是一个好主意。您可以考虑从服务器端返回一些数据，您将在客户端使用这些数据来构建 UI 标记。

让我们返回一个 SelectListItem 对象列表。

var optionList = db.RTOCodes.Where(a => a.State == selectedState)
       .Select(c => new SelectListItem { Value = c.Location, 
                                         Text = c.Location}).ToList();

在您的 ajax 调用的成功事件中，循环遍历该数组并为选项构建标记。

success : function(data){
  var options="";
  // options = "<option value='-1'>None</option>"; // uncomment if you want this item
  $.each(data,function(a,b){
    options+="<option value='"+b.Value+"'>"+b.Text+"</option>";
  });
  $("#DDlforLocations").html(options);
}

此外，由于当用户在第一个下拉列表中选择某些内容时，您正在通过 ajax 加载第二个下拉列表的内容，因此您可以考虑将其更改为 pure clean HTML

<select name="RTOListItem" id="DDlforLocations">
    <option value="-1">Select one</option>
</select>

【讨论】：