Question

我的视图中有一个按钮，它会在div内加载反馈表单。

<script>
        // open feedback window
        function openFeedback() {         
            $('#feedback-container').show();
            $('#feedback-container').load('@Url.Content("~/Feedback/")');
        }
</script>

<div id="feedback-container"></div>
<button id="feedback-button" onclick="openFeedback()">
    Give feedback
</button>

这会从Index控制器加载Feedback视图。在里面，我有一个带有另一个Submit按钮的表单。

@using (Html.BeginForm()) {
   @Html.AntiForgeryToken()
   ... some controls ...

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

和控制器：

    public ActionResult Index()
    {
        return View(new Feedback());
    }

    [ValidateAntiForgeryToken]
    [HttpPost]
    public ActionResult Index(Feedback feedback)
    {
        SaveFeedback(feedback);
        return PartialView("ContactConfirm");
    }

我希望在回复表单时返回feedback-container内部带有“谢谢”消息的视图，而是加载整个页面 - 它只是ContactConfirm视图。

是否可以将部分视图返回到div？

Answer 1

使用Ajax.BeginForm：

@using (Ajax.BeginForm("Index", "ControlerName"
    , new AjaxOptions
        {
            HttpMethod = "post",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "feedback-container"
        }))
{
    @Html.AntiForgeryToken()
    ... some controls ...

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

它将通过ajax发布表单并将响应html插入“UpdateTargetId”指向的容器中。

Ajax.BeginForm需要jquery.unobtrusive-ajax.js才能工作。确保将js引用添加到页面或js包中，并确保它在您的jquery引用下。 jquery.unobtrusive-ajax.js是新MVC4项目的默认js库，您也可以通过Nuget获取它。

请记住，ajax帖子无法切换门户网站，即您无法从http网页发布https ajax表单。因此，如果您想确保登录帖子是通过https，则需要确保登录页面强制为https。

在DIV中打开局部视图并使用“提交”按钮

1 个答案: