jquery ajax 및 MVC3을 사용하여 양식을 게시하는 올바른 방법은 무엇입니까?

Question

이 작업을 수행하는 방법에 대한 몇 가지 방법을 살펴 보았습니다.

데이터를 수집하고 이것은이다 json 객체

var objToSend = { Property : $('#propertyField').val(), Property2 : ... }; 

를 구축 형태의

1. 공중 납치 제출 이벤트 : 내가 한 부분에서 제외하고, 좋아하는 내 자신의 방법은 다음과 같다 이 부분처럼 25 개의 값을 수집하는 일이 지겨워지기 때문에 부탁하지 않습니다.

2. 으로 전화하고 [HttpPost] 활성화 작업을 가리 키도록 URL을 지정하십시오. somewhere

3. 성공 : ajax-query의 일부로 반환 된 데이터 (문자열로 반환)를 수집하고 적절한 위치에 씁니다. 여기에도 오류를 처리하고 첫 번째 단어가 "오류 :"인지 확인한 다음 적절한 조치를 취합니다.

나는 수집 단계와 별개로이 방법을 좋아합니다. 나는 이것을하는 더 좋은 방법이 있다고 확신하지만 나는 자신을 웹에 WebForms 배경에서 오는 jquery에 던져 넣었다. 그래서 전체 "포용 웹"부분은 나에게 완전히 외국이다.

Answer 1

모든 필드를 하나씩 전달하지 않으려면 serialize() 메서드를 사용할 수 있습니다. 이 표준 양식 제출 것처럼 그것은 application/x-www-form-urlencoded 콘텐츠 형식을 사용하여 서버에 전체 양식 데이터를 전송합니다

$('#myform').submit(function() { 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     success: function(result) { 
      // TODO: handle the success case 
     }  
    }); 
    return false; 
}); 

또 다른 가능성이있는 jQuery form plugin :

$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case 
}); 

어떤 사람들에게 그것은 또한 유용 당신이,524을 포함 할 필요가 ASP.NET MVC 3에서

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" })) 
{ 
    ... some input fields 
} 

: 양식을 렌더링하는 Ajax.BeginForm 헬퍼를 사용Ajax 도우미가 내 보낸 HTML 5 data-* 속성을 눈에 띄지 않게 AJAXifies 스크립트.

Answer 2

그렇게 할 수 있습니다.

예를 들어 양식을 처리하는 경우 MVC 도우미를 사용하여 게시물 코드 처리 코드를 만들 수 있습니다.

<% using (html.BeginForm()) {%> 

    // html for the form 


    <input type='submit' value='post' /> 

<% } %> 

MVC에 웹폼에서의 전환은 BTW 나는 이것이 좋은 일이라고 믿는 ... 당신이 정말로 웹 프로그래밍, 즉 HTTP, HTML과 자바 스크립트의 원시 측면을 다루고있는이 사람들을위한 까다로운 하나가 될 수 있습니다 저는 WebForms의 의사 단일 프로세스 이벤트 모델을 좋아하지 않습니다.

긴 라이브 MVC! :)

Answer 3

json이 json을 빌드하도록 허용합니다. 제출할 데이터 세트를 작성할 양식을 직렬화 할 수 있습니다.

$.post("myUrl", 
     $("form").serialize(), 
     function(callback) { ... } 
    ); 

Answer 4

"jQuery 양식 플러그인"을 사용하는 경향이 있습니다.

http://jquery.malsup.com/form/

그것은 또한 당신이 쉽게 함정 다양한 이벤트, 고장 상태, 검증 등등과에 양식을 변환 할 수 있습니다 : 그것은 당신이 아주 약간의 노력과 AJAX 형태로 깨끗하게 추상화 표준 형태로 할 수 있습니다 원하는 경우 JSON 요청 또는 XML 파일 업로드도 처리합니다.