Question

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

    }

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

Answer 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加载第二个下拉列表的内容，您可以考虑将其更改为纯净的HTML

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

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

1 个答案: