MVC 2.0 Ajax : 드롭 다운 목록의 자동 제출이 일반적인 포스트 백이 발생합니다.

Question

MVC 응용 프로그램에 Ajax 기능을 추가하려고합니다. 양식을 비동기 적으로 다시 게시하고 싶습니다.

using (Ajax.BeginForm("SetInterviewee", "Date", routeValues, new AjaxOptions { UpdateTargetId = "divInterviewee" })) 

나는 드롭 다운 목록은 값이 변경을 선택하면 자동으로 다시 게시 할 : 다음은 폼 코드는 그러나

<%= Html.DropDownList("interviewees", Model.interviewees.intervieweeLists.intervieweesList, "-- select employee --", new { @class = "ddltext", style = "width: 200px", onchange = "this.form.submit();" })%> 

을, 나는, 프로그램 다시 게시 일반적으로, 지금 연결 안 함을하려고 할 때 내가 예상했던 부분적인 포스트 백. 여기에 문제가 있다고 생각합니다 : onchange = "this.form.submit();" 드롭 다운 목록에서

어떻게 든 비동기 포스트 백 대신 정상적인 포스트 백이 발생한다고 생각합니다.

여기 MVC 폼 태그에 HTML에 대해 생성하는 작업은 다음과 같습니다

<form action="/SetInterviewee/2011-1-26/2011-1/visit" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;divInterviewee&#39; });"> 

내가 함께 "this.form.submit는()"를 "onsubmit"이벤트 핸들러가 호출되지 않는 것이라고 생각합니다. 것은, 나는 왜 이해하지 않는다이다. 양식을 제출하는 모든 이벤트를 "onsubmit"하지 않습니까?

업데이트 : 내가 thusly 히, JQuery와에 갔다 :

 $(function() { 
     $('#interviewees').change(function() { 
      var form = $('#intervieweeForm'); 
      $.ajax({ 
       url: form.attr('action'), 
       type: form.attr('method'), 
       data: form.serialize(), 
       success: function (result) { 
        $('#selectedInterviewee').val(result); 
       } 
      }); 
     }); 
    }); 

이 그들 가운데, 많은 문제를 일으키는 :

- 여전히 asyncrhonous 포스트 백을 수행하지 않는 것 같습니다. 내 컨트롤러 작업 메서드에서 다음 코드가 있습니다 : "if (Request.IsAjaxRequest())"false를 반환합니다.

- 더 이상 모델 바인딩을 수행 할 수 없습니다. 같은 내 경로가 같습니다

http://localhost:1986/Interviews/2011-2-25/2011-2/visit

하지만 분명히 끝나는 경로가 전송되는이 작동하지 바인딩 모델의 원인

http://localhost:1986/SetInterviewee/2011-2-25/2011-2? 
Count=5&Keys=System.Collections.Generic.Dictionary`2+KeyCollection 
[System.String,System.Object] 
&Values=System.Collections.Generic.Dictionary`2+ValueCollection 
[System.String,System.Object] 

입니다 - "방문을"A "모드 있어야하는데 "매개 변수가 있지만 거기에 없기 때문에"모드 "는 기본적으로"전화 "로 설정되어 전체 사과 카트를 뒤집습니다.

이 문제를 일으키는 것은 serialize 명령입니까? POST가 메서드 일 때 쿼리 문자열에 추가 할 이유가 무엇인지 이해할 수 없습니다.

그 중에서도 내 작업이 ViewResult를 반환해야한다는 사실 때문에, 아약스를 사용하여 필요한 모든 문자열을 반환 할 수는 있지만 ... 나는 라우팅/바인딩 일을 바로 잡아!

업데이트 : "SetInterviewee"는 실제로 올바른 경로이지만, routeValues ​​매개 변수는 현재보기에서 경로 값을 복사해야합니다. 다음 폼의 코드는 다음과 같습니다

RouteValueDictionary routeValues = ViewContext.RouteData.Values; 
using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "intervieweeForm" })) 

Answer 1

내가 jQuery를 사용하고 모든 Ajax.* 도우미와 MSAjax 스크립트 제거를 추천 할 것입니다.그래서

:

$(function() { 
    $('#interviewees').change(function() { 
     var form = $('#myform'); 
     $.ajax({ 
      url: form.attr('action'), 
      type: form.attr('method'), 
      data: form.serialize(), 
      success: function(result) { 
       $('#divInterviewee').html(result); 
      } 
     }); 
    }); 
}); 

이제 우리는 성공적으로 자바 스크립트에서 HTML 마크 업을 분리 한 : 다음 별도의 자바 스크립트 파일에

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<% using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "myform" })) { %> 
    ... 
<% } %> 

<%= Html.DropDownList(
    "interviewees", 
    Model.interviewees.intervieweeLists.intervieweesList, 
    "-- select employee --", 
    new { id = "interviewees", @class = "ddltext", style = "width: 200px" } 
)%> 

. 그것은 눈에 잘 띄지 않는 자바 스크립트입니다.

Answer 2

나는 이것이 꽤 오래된 질문이라는 것을 알고 있지만, 유사한 문제로 뒤범벅을 보았고, 앞으로 유용 할 수도있는 해결 방법이있는 것처럼 보입니다.

양식 내에 제출 버튼을 추가하십시오. 다음과 같음 :

<input type="submit" name="submit" value="save" style="display: none;" /> 

이 경우 중요한 것으로 보이는 특성 이름을 지정했는지 확인하십시오. 여기에 내가 그것이 현재 전체 모델 바인딩과 협력이 코드입니다 :

<% using (Ajax.BeginForm("SaveStatus", "Finding", new { FindingId = Model.FindingId }, 
     new AjaxOptions { 
      HttpMethod = "Post", 
      InsertionMode = InsertionMode.Replace, 
      UpdateTargetId = "StatusWindow", 
      OnBegin = "function(){ jQuery('#SaveStatusForm').block({ Message: 'Saving' }); }", 
      OnComplete = "function(){ jQuery('#SaveStatusForm').unblock(); }", 
      OnFailure = "HandleMSAjaxFail", 
     }, new { id = "SaveStatusForm" })) { %> 
<div> 
    <%: Html.DropDownListFor(Status => Status.SelectedTagId, Model.AvailableStatuses, null, new Dictionary<string, object> { { "onchange", "jQuery('#SaveStatusForm').submit();" } })%> 
    <input type="submit" name="submit" value="save" style="display: none;" /> 
</div> 
<% } %> 

부여 이것이 당신의 예에 묶여 내 코드와하지,하지만 당신은 무슨 일이 일어나고 있는지의 아이디어를 얻을 수 있습니다. 원래 드롭 다운 목록을 제출하는 중이었고 해고 당했을 때 모든 동기식 포스트 백을 포함하여 모든 종류의 기발한 응답을 얻었습니다. 제출 버튼을 추가하면 MS ajax 코드가 아름답게 작동하는 것 같습니다. 한번 해봐!