0

我有一个在 PartialView 中呈现的时事通讯文本框。这是获取操作：

[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>
}

如果输入有效，我希望成功消息显示在验证按钮下。这是我的帖子操作：

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

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

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

4

2 回答 2

0

未经测试，但会帮助您完成您想要的。

[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))
{}

和

@using (Ajax.BeginForm("NewsLetter", "Home", new AjaxOptions{ onsuccess:"ShowMessage"}))
    {}

JS

function ShowMessage(data){
alert(data);
}
于 2013-04-10T19:10:29.230 回答
0

如果您想使用我上面评论中的第一种方法，您需要稍微修改您的代码。首先，将Message属性添加到您的NewsLetterViewModel，然后更改部分视图：

@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>
}

请注意，您的部分视图应包含id="newsletter-container"在页面上的 html 元素中，例如：

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

您还需要添加jquery.unobtrusive-ajax.js以使其工作。

于 2013-04-10T20:59:56.807 回答