데이터를 부분보기로 되 돌리는 중

Question

사용자가 내 전자 메일 뉴스 피드에 가입 할 수있는 부분보기가있는 세로 막대가있는 블로그가 있습니다. 내가하려는 것은 데이터를 게시 한 후 사용자가 보낸 페이지로 사용자를 되돌려 보내고 유효성 검사를 표시하거나 양식의 부분보기에 메시지를 반환하는 것입니다.

문제는 내 부분보기가 레이아웃이없는 새 창에서 열리는 것입니다. 사이드 바에 반환 데이터가있는 내 블로그로 돌아가려면 어떻게 수정해야합니까?

@using Blog.Models.Entities 
@model Subscriber 

<header> 
    <h2>Subscribe</h2> 
</header> 

<p>Subscribe to my e-mail newsfeed.</p> 

@using (Html.BeginForm("Form", "Subscription")) 
{ 
    <div class="editor-label">@Html.LabelFor(subscriber => subscriber.Email)</div> 
    <div class="editor-field ">@Html.EditorFor(subscriber => subscriber.Email)</div> 

    @Html.ValidationMessageFor(subscriber => subscriber.Email) 

    <input type="submit" value="Subscribe" /> 

    <p>@ViewBag.Result</p> 
} 

그리고 데이터를 처리하는 컨트롤러 관련 상품 : :

이

내 볼 수있는 양식을 제출하면

public ActionResult Form() 
{ 
    return PartialView("_Form"); 
} 

[HttpPost] 
public ActionResult Form(Subscriber subscriber) 
{ 
    if (ModelState.IsValid) 
    { 
     Subscriber foundSubscriber = _repository.Subscribers.Where(s => s.Email.Equals(subscriber.Email)).FirstOrDefault(); 
     if (foundSubscriber != null) 
     { 
      ModelState.AddModelError("Email", "This e-mail address has already been added."); 
      return PartialView("_Form", subscriber); 
     } 

     _repository.SaveSubscriber(subscriber); 

     ViewBag.Result = "Succesfully subscribed to the newsletter."; 
     return PartialView("_Form"); 
    } 

    ModelState.AddModelError("Email", "Please provide a valid e-mail address."); 
    return PartialView("_Form", subscriber); 
} 

Answer 1

마침내 문제의 해결책을 발견했습니다. 내가 AJAX로 구현하고 다음 코드를 사용하여 결국 :

_Index.cshtml에게

<header> 
    <h2>Subscribe</h2> 
</header> 

<p>Subscribe to my e-mail newsfeed.</p> 

<div id="subscription-form"> 
    @{Html.RenderPartial("_Form");} 
</div> 

_form합니다.cshtml

@using Blog.Models.Entities 
@model Subscriber 
@{ 
    AjaxOptions ajaxOptions = new AjaxOptions 
    { 
     LoadingElementId = "loading", 
     LoadingElementDuration = 2000, 
     HttpMethod = "Post", 
     UpdateTargetId = "subscription-form" 
    }; 
} 

<div id="loading" style="display: none;"> 
    <p>Processing request...</p> 
</div> 

@using (Ajax.BeginForm("Index", "Subscription", ajaxOptions)) 
{ 
    <div class="editor-label">@Html.LabelFor(subscriber => subscriber.Email)</div> 
    <div class="editor-field ">@Html.EditorFor(subscriber => subscriber.Email)</div> 

    @Html.ValidationMessageFor(subscriber => subscriber.Email) 

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

_Succes.cshtml

@using Blog.Models.Entities 
@model Subscriber 

<p id="subscription-result">@ViewBag.Result</p> 

그리고 다음 컨트롤러 액션 방법 :

public ActionResult Index() 
{ 
    return PartialView("_Index"); 
} 

[HttpPost] 
public PartialViewResult Index(Subscriber subscriber) 
{ 
    if (ModelState.IsValid) 
    { 
     Subscriber foundSubscriber = _repository.Subscribers.Where(s => s.Email.Equals(subscriber.Email)).FirstOrDefault(); 
     if (foundSubscriber != null) 
     { 
      ModelState.AddModelError("Email", "This e-mail address has already been added."); 
      return PartialView("_Form", subscriber); 
     } 

     _repository.SaveSubscriber(subscriber); 

     ViewBag.Result = "Succesfully subscribed to the newsletter."; 
     return PartialView("_Succes", subscriber); 
    } 

    ModelState.AddModelError("Email", "Please provide a valid e-mail address."); 
    return PartialView("_Form", subscriber); 
} 

나는 이것이 미래에 동일한을 달성하려고하는 사람을 도움이되기를 바랍니다. BTW, 나는이 블로그에서 해결책을 찾았습니다 : http://xhalent.wordpress.com/2011/02/05/using-unobtrusive-ajax-forms-in-asp-net-mvc3/.

Answer 2

를, 브라우저는 서버에 HTTP POST 요청을 전송 . 그러면 브라우저는 응답의 페이로드를 표시합니다. 포스트 컨트롤러 액션은 브라우저가 행복하게 렌더링하는 PartialView를 반환합니다 (실제로 유효한 HTML로 만들기 위해 필요한 HTML, 헤드 또는 본문 태그가 없더라도).

브라우저에서 페이지로드 및 렌더링을 유지하고 양식을 게시 한 다음 결과 HTML을 가져 와서로드 된 페이지의 일부만 바꾸는 것처럼 들리는 것 같습니다. 간단히 말해서, 브라우저는 그렇게하기에 현명하지 않습니다.

은 당신이 아마하고 싶은 것은이 같은 것입니다 :

• 사용자가 채워 어떤 형태의 데이터와 클릭 수는/무엇을 이동/제출/저장합니다.
• 그러나 현재 페이지의 대부분을 원하는 방식으로 보존하지 않기 때문에 브라우저가 양식을 제출하지 않게 할 수 있습니다.
• 대신 "제출"버튼을 클릭하여 일부 로컬 자바 스크립트를 호출 할 수 있습니다.
• 로컬 JS가 사용자가 입력 한 양식 데이터를 묶어서 해당 데이터를 페이로드로 사용하여 POST하고 Ajax를 사용하여 POST를 제출해야합니다. ajax 요청이 컨트롤러 액션에 부딪히는 동안 현재 페이지가로드됩니다.
• 컨트롤러 동작은 그대로이며 부분 뷰를 반환합니다.
• Ajax 호출을 시작한 JS 함수는 작업이 완료 될 때 호출되는 "success"함수도 정의해야합니다.
• 성공 함수 내에서 자바 스크립트는 응답에서 HTML을 가져 와서 원본 양식을 보유한 페이지 영역을 대체합니다.

은 내가보기 엔 jQuery를 권장합니다 - 그것은 훨씬 쉽게 Ajax 요청을 정교하게 할 수 있도록 성공 콜백을 처리하고 결과에 현재로드 된 페이지의 단지 부분을 대체합니다. 내 이해는 MS의 'unobtrubsive javascript'도 이것을 구현하는 데 도움이 될 수 있지만, 나는 그것에 대한 직접적인 경험이 없다.

분명히 브라우저의 자바 스크립트가 활성화 된 경우에만이 모든 기능이 작동합니다.