将数据返回到局部视图

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请求到服务器。浏览器然后显示Response的有效载荷。您的后控制器操作正在返回一个PartialView，浏览器正在愉快地呈现它（尽管它没有必要的html，head或body标签才能使其成为真正有效的HTML）。

这听起来像你希望浏览器保持大部分页面加载和渲染，发布表单，然后取得生成的HTML并只替换加载页面的一部分。简而言之，浏览器不够聪明。

你可能想要做的是这样的：

• 用户填写某种形式的数据和点击保存/提交/去/不管。
• 但是，您不希望浏览器提交表单，因为它不会以您想要的方式保留大部分当前页面。
• 相反，你想要“提交”按钮来调用一些本地的JavaScript。
• 本地JS应该捆绑用户输入的表单数据，制作包含该数据的POST作为有效内容，并使用Ajax提交POST。这将保持当前页面加载，而阿贾克斯请求触及你的控制器动作
• 你的控制器动作保持原样，并返回一个局部视图。
• 启动Ajax调用的JS函数还必须定义一个“成功”函数，该函数在操作完成时会被调用。
• 在该成功函数中，您的javascript将从响应中获取HTML，并使用它来替换保存原始表单的页面区域。

我强烈推荐jQuery--它将使制作Ajax请求，处理成功回调以及用结果替换当前加载页面的一部分变得更加容易。我的理解是，MS的'unobtrubsive JavaScript'也可能有助于实现这一点，但我没有任何直接的经验。

显然，只有浏览器启用了JavaScript，所有这些才会起作用。