AJAX POST MVC 4의 반환을 올바르게 렌더링하는 방법

Question

MVC 4를 사용 중이고 게시 요청을 보내려고하고 있으며 HTML에서 결과보기로 컨트롤러에서 성공적인 반환을 얻지 만, 그 시점에서 무엇을해야할지 모르겠습니다.

JS

$("form").submit(function (e) { 
    e.preventDefault(); 
    if ($(this).valid()) { 
     $.ajax({ 
      url: submitUrl, type: "POST", traditional: true, 
      data: { EventName: 'Name of event'}, 
      success: function(data){ 
       $("#content").html(data); 
      } 
     }) 
    } 
}); 

내 컨트롤러

[HttpPost] 
public ActionResult CreateEvent(EventModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     return RedirectToAction("Index"); 
    } 
    else 
    { 
     return View(model); 
    } 
} 

그래서 내 컨트롤러가보기 또는 RedirectToAction을 반환하거나 볼 수 있습니다. 내 아약스 호출의 성공 콜백에서 다음을 수행하고있다 : $ ("# content") .html (data); 하지만 아무 일도 없을 것 같습니다. 누군가가 컨트롤러 동작의 반환을 제대로 처리하는 올바른 방향으로 나를 밀어 넣을 수 있습니까?

정말 고마워요!

Answer 1

제대로 이해하면 페이지에 이벤트 만들기 양식이 있고 새 이벤트를 만들기 위해 AJAX 요청을 보내려합니다. 그런 다음 페이지 #content의 섹션을 CreateEvent 조치의 결과로 대체하려고합니다.

AJAX가 올바르게 설정되어있어 CreateEvent이 성공적으로 응답하는 것으로 보입니다. 나는 당신이 지금 그 반응에 대해 혼란스러워하고 있다고 생각합니다. 몇 가지 옵션이 있지만 두 가지를 선택합시다.

JSON 응답

[HttpPost] 
public ActionResult CreateEvent(EventModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     var event = service.CreateEvent(model); // however you create an event 
     return Json(event); 
    } 
    else 
    { 
     // model is not valid so return to original form 
     return View("Index", model); 
    } 
    ... 

은 이제 JSON에서 HTML 태그를 생성하고 #content에 삽입해야합니다.

$.ajax({ 
    url: submitUrl, type: "POST", traditional: true, 
    data: { EventName: 'Name of event'}, 
    success: function(data){ 
     var obj = JSON.Parse(data); 
     var html; // build html with the obj containing server result 
     $("#content").html(html); 
    } 
}) 

또는 HTML 조각 대신에 우리가 Layout 모든 head 및 script 태그없이 단지 PartialView을 돌아갑니다 정의 Layout로 전체 페이지를 반환

.

[HttpPost] 
public ActionResult CreateEvent(EventModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     var event = service.CreateEvent(model); // however you create an event 
     return PartialView("CreateEventResult", event); 
    } 
    else 
    { 
     // model is not valid so return to original form 
     return View("Index", model); 
    } 
} 

지금 새로운 부분보기 CreateEventResult.cshtml (면도기)

@model Namespace.EventModelResult 
@ { 
    Layout = null; 
} 
<div> 
    <!-- this stuff inserted into #content --> 
    @Model.Date 
    ... 
</div> 

을하고 자바 스크립트

$.ajax({ 
    url: submitUrl, type: "POST", traditional: true, 
    data: { EventName: 'Name of event'}, 
    success: function(data){ 
     $("#content").html(data); 
    } 
}) 

편집 변경되지 않습니다 :이 이벤트 작성에 실패 경우 입력을 확인한 후에 어떤 이유로 든 너는 응답하고 싶다. 한 가지 옵션은 반환 한 객체에 응답 상태를 추가하고 새로 만든 Event 대신 해당 상태를 표시하는 것입니다.