jquery - 在 DIV 中打开部分 View 并使用“提交”按钮

Question

我的 View 中有一个按钮，它将在 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>

这会从 Feedback Controller 加载 Index View 。在里面我有一个带有另一个 Submit 按钮的表单。

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

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

和 Controller :

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

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

当表单回发时，我想在反馈容器内返回一个带有“谢谢”消息的 View ，但整个页面都已加载 - 而且只是 ContactConfirm View 。

是否可以将部分 View 返回到 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 post 无法切换门户，即您无法从 http 页面发布 https ajax 表单。因此，如果您想确保登录帖子是通过 https 进行的，则需要确保着陆页强制使用 https。