MV3에서 html.DropDownList()를 동적 바인딩하는 방법

Question

내 페이지에 드롭 다운 목록과 텍스트 상자가 있습니다. 텍스트 상자가 변경되면서 드롭 다운 목록을 변경하고 싶습니다. 나는이 같은 JQuery와 포스트를 사용

public ActionResult Index() 
    { 
     string buildDate = Request.Params.Get("builddate"); 
     DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate); 
     List<SelectListItem> list = new List<SelectListItem>(); 
     foreach (DataRow bd in tbBuildid.Rows as IEnumerable) 
     { 
      list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() }); 
     } 
     ViewData["tbbuildid"] = list; 
     return View(); 
    } 

하지만 드롭 다운리스트가 DataView를 [ "tbbuildid"] 변화에 변경되지 않았 음을 발견

$("#txtBuildId").change(function() { var builddate = $("#txtBuildId").val(); $.post("/UTOverview/Index?builddate=" + builddate); });

내 색인 기능은 무엇입니까? 왜 ?

다음과 같이 전체 포스트 백 방식으로 시도합니다. window.location = "/UTOverview/Index?builddate=" + builddate; 작동합니다. ViewData [ "tbbuildid"] 메소드 인덱스에 새로운 builddate를 게시 할 때마다 변경되었습니다.하지만 어떻게 Ajax 방식으로이 작업을 수행 할 수 있습니까?

Answer 1

액션 메서드에서보기를 반환하지만이보기가 있습니까? 이 경우 액션 메서드에서 Json을 반환하기 만하면됩니다.

조치 방법에서 Json을 반환하고이를 사용하여 드롭 다운을 채 웁니다. 당신이 HTTP POST를 호출을하고 있기 때문에, 그것은 당신의 HTTPPost의 조치 방법을 칠 것이다

[HttpPost] 
public ActionResult Index() 
{ 
     string buildDate = Request.Params.Get("builddate"); 
     DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate); 
     List<SelectListItem> list = new List<SelectListItem>(); 
     foreach (DataRow bd in tbBuildid.Rows as IEnumerable) 
     { 
      list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() }); 
     } 
     return Json(list); 
} 

그리고 스크립트에서

,

$("#txtBuildId").change(function() { 
     var builddate = $("#txtBuildId").val(); 
     $.post("@Url.Action("Index","UTOverview")", {builddate:builddate},function(data){ 
      $.each(data, function() { 
       $("#select1").append($("<option />").val(this.Value).text(this.Text)); 
     }); 
     }); 
    }); 

항상 경로를 얻을 수 Url.Action HTML 도우미를 사용하는 것이 좋습니다 MVC가 액션 메소드에 올바른 경로를 돌려 주므로 처리 메소드에 전달합니다. ../을 얼마나 많이 사용해야할지 걱정할 필요가 없습니다.

위 코드는 테스트를 거쳤으므로 정상적으로 작동합니다.

Answer 2

cs 코드를 디버깅하고 자바 스크립트 코드에 경고를 추가 했습니까?

실제 문제에 더 가까워 야하며 이러한 결과를 질문에 게시하십시오.

Answer 3

jquery. post()는 실제로 서버에 대한 비동기 호출입니다. 그것은 당신이 뭔가를해야 할 몇 가지 데이터를 반환합니다.

당신은 단순히 전체 포스트 백을 통해 페이지를 새로 고침 할 경우 동적 드롭 다운의 상태를 변경하려는 경우,

window.location = "/UTOverview/Index?builddate=" + builddate; 

을 할 수있는 페이지 새로 고침없이, 당신은 합격해야합니다 .post()에 대한 콜백은 반환 된 데이터를 기반으로 드롭 다운 상자를 업데이트합니다. 어떤 경우에는 인덱스 작업을 호출하지 않고 업데이트 된 데이터를 검색하기위한 특정 작업을 수행 할 수 있습니다. 예 :

$.post("/UTOverview/BuildSelect?builddate=" + builddate, function(data) { 
    $('#buildDropDown').html(data); 
}); 

자세한 내용은 jQuery.post()을 참조하십시오. 또는 컨트롤러 동작에서 HTML을 구성하는 것보다는 조금 싫어서 Json 결과를 반환하고 드롭 다운을 바인딩하십시오.

두 경우 모두 onchange 이벤트 수신은 텍스트 상자가 포커스를 잃을 때만 실행된다는 점에 유의하십시오.