DIV에서 부분보기를 열고 제출 단추를 사용하십시오.

Question

내보기에 단추가있어서 div의 피드백 양식을로드합니다.

<script> 
     // open feedback window 
     function openFeedback() {   
      $('#feedback-container').show(); 
      $('#feedback-container').load('@Url.Content("~/Feedback/")'); 
     } 
</script> 

<div id="feedback-container"></div> 
<button id="feedback-button" onclick="openFeedback()"> 
    Give feedback 
</button> 

이것은 Feedback 컨트롤러에서 Index보기를로드합니다. 안에는 다른 Submit 버튼이있는 양식이 있습니다.

@using (Html.BeginForm()) { 
    @Html.AntiForgeryToken() 
    ... some controls ... 

    <input type="submit" value="Send" /> 
} 

그리고 컨트롤러 :

public ActionResult Index() 
    { 
     return View(new Feedback()); 
    } 

    [ValidateAntiForgeryToken] 
    [HttpPost] 
    public ActionResult Index(Feedback feedback) 
    { 
     SaveFeedback(feedback); 
     return PartialView("ContactConfirm"); 
    } 

내가 양식을 다시 게시 될 때 feedback-container의 내부 메시지 "감사합니다", 대신에 전체 페이지가로드와보기를 반환 할 - 그리고 그것이 보기 만 ContactConfirm.

부분 뷰를 div로 반환 할 수 있습니까?

Answer 1

사용 Ajax.BeginForm는 :

@using (Ajax.BeginForm("Index", "ControlerName" 
    , new AjaxOptions 
     { 
      HttpMethod = "post", 
      InsertionMode = InsertionMode.Replace, 
      UpdateTargetId = "feedback-container" 
     })) 
{ 
    @Html.AntiForgeryToken() 
    ... some controls ... 

    <input type="submit" value="Send" /> 
} 

이 아약스를 통해 양식을 게시하고 "UpdateTargetId"뾰족한 용기에 응답 HTML을 삽입합니다.

Ajax.BeginForm을 사용하려면 jquery.unobtrusive-ajax.js가 필요합니다. 페이지 또는 js 번들에 js 참조를 추가하고 jquery 참조 아래에 있는지 확인하십시오. jquery.unobtrusive-ajax.js는 새 MVC4 프로젝트의 기본 js 라이브러리이며 Nuget을 통해 얻을 수도 있습니다.

아약스 게시물은 포털을 전환 할 수 없습니다. 즉, http 페이지에서 https ajax 양식을 게시 할 수 없습니다. 따라서 로그인 게시물이 https를 통과하는지 확인하려면 방문 페이지가 https로 강제 설정되어 있는지 확인해야합니다.