使用 mvc 中的 ajax 调用将记录绑定到 html.dropdownlist

Question

我有一个 Mvc 应用程序。在一个视图中的那个应用程序中，我有 2 @html.dropdownlists.I 在 <script/> 标记中创建一个函数，将调用第一个下拉列表的 selectedIdnexchange 事件，并获取所选值并使用 ajax 发送到控制器称呼。控制器将 return 结果并尝试将该结果与第二个绑定 dropdown.I 想要在第二个下拉列表中显示所选状态的所有 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);

    }

请帮助我。将来自控制器的记录 returning 与第二个下拉列表

绑定

Answer 1

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

那么让我们 return 一个 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>

使用 mvc 中的 ajax 调用将记录绑定到 html.dropdownlist

Bind the record to html.dropdownlist using ajax call in mvc

c#

jquery

ajax

asp.net-mvc

dropdown