データを部分表示に戻す

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); 
} 

私は、これは将来的には同じことを達成しようとしている人を助けることを願っています。ところで、私はこのブログで解決策を見つけました：http://xhalent.wordpress.com/2011/02/05/using-unobtrusive-ajax-forms-in-asp-net-mvc3/。

Answer 2

フォームを送信すると、ブラウザがサーバにHTTP POSTリクエストを送信。ブラウザはレスポンスのペイロードを表示します。あなたのポストコントローラアクションは、ブラウザがうまくレンダリングしているPartialViewを返しています（本当に有効なHTMLにするために必要なhtml、head、またはbodyタグがなくても）。

ブラウザにページの読み込みとレンダリングの大半を保存し、フォームを投稿してから結果のHTMLを取り出し、読み込まれたページの一部のみを置き換えるように思えます。簡単に言えば、ブラウザはスマートではありません。

• ユーザーが何らかの/保存/行く/提出するいくつかのフォームデータとクリックで塗りつぶし：あなたはおそらく何をしたいのか

  はこのようなものです。

• しかし、現在のページの大部分をあなたが望むように保存しないので、ブラウザはフォームを送信したくありません。
• 代わりに、「送信」ボタンでローカルのJavaScriptを呼びたいとします。
• ローカルJSはユーザーが入力したフォームデータをバンドルし、そのデータをペイロードとしてPOSTを作成し、Ajaxを使用してPOSTを送信します。これにより、現在のページがロードされ、Ajaxリクエストがコントローラのアクションに当たる間に表示されます。
• コントローラの動作は元の状態にとどまり、部分的なビューを返します。
• Ajax呼び出しを起動したJS関数は、操作が完了したときに呼び出される「success」関数も定義する必要があります。
• この成功関数の中で、JavaScriptはレスポンスからHTMLを取得し、元のフォームを保持していたページの領域を置き換えるために使用します。

jQueryを強くお勧めします.Ajaxリクエストを作成し、成功のコールバックを処理し、現在ロードされているページのセクションだけを結果に置き換えることが非常に簡単になります。私の理解は、MSの「邪魔されないjavascript」もこれを実現するのに役立つかもしれないが、私はそれを直接経験していない。

明らかに、このすべては、ブラウザでJavaScriptが有効になっている場合にのみ有効です。