Ajax 在视图中返回json结果

我有一个新闻稿文本框，在一个局部视图中呈现。这是get操作：

[ChildActionOnly]
public PartialViewResult NewsLetterSidebar()
{
    return PartialView("_NewsLetterSidebar");
}

这是Razor的观点：

model Blog.Web.UI.ViewModels.NewsLetterViewModel 

@{
    ViewBag.Title = "_NewsLetterSidebar";
}

@using (Html.BeginForm("NewsLetter", "Home", FormMethod.Post))
{
    <h3>News Letter</h3>
    <div>
        @Html.TextBoxFor(news => news.EmailAddress)
        @Html.ValidationMessageFor(news => news.EmailAddress)
    </div>
    <div>
        <input type="submit" value="Verify">
    </div>
}

---

如何在视图下显示JSON消息？

未测试，但将帮助您完成所需内容

[HTTPGET]
public JsonResult NewsLetter(NewsLetterViewModel newsLetter)
{
    var newsLetterViewModel = newsLetter.ConvertToNewsLetterModel();

    if (ModelState.IsValid)
    {
        _newsLetterRepository.Add(newsLetterViewModel);
        _newsLetterRepository.Save();
    }
    return Json("Done!", JsonRequestBehavior.AllowGet);
}

替换这个

@using (Html.BeginForm("NewsLetter", "Home", FormMethod.Post))
{}

与

JS

---

如果您想使用我上面评论中的第一种方法，您需要稍微修改代码。首先，将

消息

属性添加到您的

新闻稿视图模型

，然后更改局部视图：

@using (Ajax.BeginForm("NewsLetter", new AjaxOptions{UpdateTargetId = "newsletter-container"}))
{
    <h3>News Letter</h3>
    <span>@Model.Message</span>
    <div>
        @Html.TextBoxFor(news => news.EmailAddress)
        @Html.ValidationMessageFor(news => news.EmailAddress)
    </div>
    <div>
        <input type="submit" value="Verify">
    </div>
}

现在，控制器中有一个小变化：

[HttpPost]
public ActionResult NewsLetter(NewsLetterViewModel newsLetter)
{
    var newsLetterViewModel = newsLetter.ConvertToNewsLetterModel();

    if (ModelState.IsValid)
    {
        _newsLetterRepository.Add(newsLetterViewModel);
        _newsLetterRepository.Save();
            model.Message = "Done!";
    }

    return PartialView("_NewsLetterSidebar", model);
}

---

您还需要添加

jquery.unobtrusive ajax.js

，以使其正常工作。

您是要更改页面还是只是发布数据并停留在原地？不，我不想更改页面，我只想显示成功或失败消息，您可以更改post的操作以返回整个页面，而不是JSON（或局部视图，取决于视图结构）但使用“完成！”消息呈现。或者，您可以通过AJAX调用POST操作，从控制器获取JSON并用Javascript呈现消息。您更喜欢哪种方式？第一种方式更简单、更流畅，但如何？我找不到任何相关的方法sample@EricNielsen下面的答案对你有帮助吗？我认为你应该回应你得到的答案anks，我测试了你的答案，它很有效，你知道我应该如何在视图中显示json结果消息吗？如果你想按原样显示json结果，那么就使用这个新的AjaxOptions{updateTargetID}。或者如果你必须从json构建标记，那么就在ShowMessage函数var d=json.Parse（data）；d.PropertyName等等。。。

function ShowMessage(data){
alert(data);
}

@using (Ajax.BeginForm("NewsLetter", new AjaxOptions{UpdateTargetId = "newsletter-container"}))
{
    <h3>News Letter</h3>
    <span>@Model.Message</span>
    <div>
        @Html.TextBoxFor(news => news.EmailAddress)
        @Html.ValidationMessageFor(news => news.EmailAddress)
    </div>
    <div>
        <input type="submit" value="Verify">
    </div>
}

<div id="newsletter-container">
    @{Html.RenderPartial("_NewsLetterSidebar", new NewsLetterModel());}
</div>

[HttpPost]
public ActionResult NewsLetter(NewsLetterViewModel newsLetter)
{
    var newsLetterViewModel = newsLetter.ConvertToNewsLetterModel();

    if (ModelState.IsValid)
    {
        _newsLetterRepository.Add(newsLetterViewModel);
        _newsLetterRepository.Save();
            model.Message = "Done!";
    }

    return PartialView("_NewsLetterSidebar", model);
}