AJAX MVC 4를 사용하여 드롭다운 목록 채우기

AJAX MVC 4를 사용하여 드롭다운 목록 채우기

2 @DropDownListFor's Helper가 포함된 보기가 있습니다.

    @using (Html.BeginForm("CreateOneWayTrip", "Trips"))
    {
        @Html.ValidationSummary(false);
        <fieldset>
            <legend>Enter Your Trip Details</legend>

            <label>Start Point</label>
            @Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces, new { @Id = "province_dll", @class = "form-control" })
            @Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities, new { @Id = "city_dll", @class = "form-control" })

            <p style="float: none; text-align: center;">
                <button type="submit" value="Create" class="btn btn-info btn-circle btn-lg">
                    <i class="fa fa-check"></i>
                </button>

                <button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg">
                    <i class="fa fa-times"></i>
                </button>
            </p>
        </fieldset>
    }

데이터를 캡처하는 데 사용하는 임시 모델은 다음과 같습니다.

 public class CaptureCreateTrip
 {
    [Required]
    [Display(Name = "Trip ID")]
    public string TripID { get; set; }

    [Required]
    public string StartPointProvince { get; set; }

    [Required]
    public string StartPointCity { get; set; }
}

DropDownList 중 하나는 페이지가 생성될 때 채워지고 두 번째는 사용자가 첫 번째 DropDownList에서 선택한 옵션에 따라 채워집니다.이를 위해 저는 ajax를 사용하고 있습니다.제가 사용하는 자바스크립트는 다음과 같습니다.

$("#province_dll").change(function () {
        $.ajax({
            url: 'getCities/Trips',
            type: 'post',
            data: {
                provinceId: $("#province_dll").val()
            }
        }).done(function (response) {
            $("cities_dll").html(response);
        });
    });

다음은 AJAX가 호출하는 컨트롤러입니다.

  [HttpPost]
  public ActionResult getCicites(int provinceId)
  {
      var lstCities = new SelectList(new[] { "City1", "City2", "City3" });

      return Content(String.Join("", lstCities));
  }

지금까지 모든 것이 작동합니다 - 내 도 드롭다운에서 값을 선택하면 javascript 이벤트가 발생하고 컨트롤러 작업이 선택한 목록 값을 도시 드롭다운으로 반환합니다. 그러나 문제는 작업이 반환하는 데이터 형식의 데이터가 올바르지 않다는 것입니다.port 요소를 만들어 axis call의 return 값으로 텍스트를 업데이트하여 테스트했는데, 이 값은 "System.웹.Mvc.ListItemSystem을 선택합니다.웹.Mvc.ListItemSystem을 선택합니다.웹.Mvc.목록 항목 선택"

*참고: 저는 ajax가 처음이고 Jquery와 Ajax를 배우는 중입니다.

당신이 많은 문자열을 받는 이유."System.Web.Mvc.SelectListItemSystem"저것이var lstCities = new SelectList(new[] { "City1", "City2", "City3" });돌아온다IEnumerable<SelectListItem>그리고.String.Join("", lstCities)부름.ToString()각각의 방법SelectListItem반환되는 컬렉션의 항목"System.Web.Mvc.SelectListItemSystem"(값이 아님)Text의 소유물.SelectListItem)

두 번째 드롭다운 목록을 채우는 가장 좋은 방법은 도시 집합이 포함된 json을 반환하고 ax success callback에서 DOM을 업데이트하는 것입니다.다음을 생성할 이유가 없습니다.SelectList- 불필요한 추가 오버헤드와 필요한 양의 3배 이상의 데이터를 클라이언트에 반환합니다(클라이언트는 C#에 대한 개념이 없습니다).SelectListItem학급.

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    // In reality you will do a database query based on the value of provinceId, but based on the code you have shown
    var cities = new List<string>() { "City1", "City2", "City3" });
    return Json(cities, JsonRequestBehavior.AllowGet);
}

그런 다음 스크립트에서(기본값을 수정한 이유가 확실하지 않음)id부터id="StartPointProvince"로.id="province_dll", 단)

var url = '@Url.Action("FetchCities", "Trips")'; // Don't hard code your url's!
var cities = $('#city_dll'); // cache it
$("#province_dll").change(function () {
    var id = $(this).val(); // Use $(this) so you don't traverse the DOM again
    $.getJSON(url, { provinceId: id }, function(response) {
        cities.empty(); // remove any existing options
        $.each(response, function(index, item) {
            cities.append($('<option></option>').text(item));
        });
    });
});

편집

OP의 설명 외에도 데이터베이스에 테이블 이름이 포함되어 있는 경우Cities밭이 있는ID그리고.Name, 그러면 컨트롤러 방법은 다음과 같습니다.

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    var cities = db.Cities.Select(c => new
    {
      ID = c.ID,
      Text = c.Text
    }
    return Json(cities, JsonRequestBehavior.AllowGet);
}

옵션을 만드는 스크립트는

$.each(response, function(index, item) { // item is now an object containing properties ID and Text
    cities.append($('<option></option>').text(item.Text).val(item.ID));
});

당신은 다음을 시도해 볼 수 있습니까?

이것은 며칠 전에 제가 대답한 게시물입니다.글꼴: MVC 4 형식의 동적 드롭다운 목록

도 ddl의 변경 이벤트에서 아약스 콜을 생성해야 합니다.이 전화는 조치를 요청하고 선택한 주의 도시를 반환합니다.

$("province_dll").change(function(){
    $.ajax({
         url: 'getCitiesController/getCitiesAction',
         type: 'post',
         data: {
               provinceId: provinceIdVar
         }
    }).done(function(response){
         $("cities_dll").html(response);
    }); 
});

작업 중:

[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
     var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";

     return Content(String.Join("", cities));
}

좀 더 간단하게.

• 1단계: 서버측 기능 / 데이터

  public JsonResult FetchP(string O)
  {
      List<SelectListItem> PList = new List<SelectListItem>();
       PList = _PService.GetAllPActive()
                .Select(i => new SelectListItem()
                           {
                               Text = i.PName,
                               Value = i.PID                                   
                           }).ToList();
  
      return Json(PList, JsonRequestBehavior.AllowGet);
  }
  

• 2단계 : 클라이언트측 기능 / 데이터 해석기

  function FetchP()
  {
      var url = '@Url.Action("FetchP", "Your_Controller")'; 
      var PDD= $("#PDD");
      var ODD= $("#ODD").val(); 
  
      $.getJSON(url, { O: ODD}, function (response) {
          PDD.empty(); 
          debugger;
          $.each(response, function (index, item) {
              debugger;
              var p = new Option(item.Text, item.Value);
              PDD.append(p);
          });
      });
  }
  

• 3단계 : 콜 - 클라이언트측 기능 / 시작

• 목록 1:

  @Html.DropDownList("ODD", ViewBag.OList as IEnumerable<SelectListItem>, new { @id = "ODD", @class = "form-control", @onchange= "FetchP()" })
  

• 목록 2:

  @Html.DropDownList("PDD", ViewBag.PList as IEnumerable<SelectListItem>,new { @id = "PDD", @class = "form-control"})
  

언급URL : https://stackoverflow.com/questions/30084568/populate-dropdownlist-using-ajax-mvc-4