将 MVC 表单结果提交到 HttpPost 方法并以 bootstrap 模式显示模型

Question

我看过很多关于如何在表单中使用 ActionLink 来调用控制器方法的示例。当它遇到该方法时，它会 returns 一个 bootstrap 模态中的部分视图。我想做的是让我的表单 post 将表单结果发送到我的控制器上的 HttpPost 方法，然后从那里调用局部视图以显示 bootstrap 模态。我该怎么做？

表单视图：

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "ballotForm" }))
{
    @Html.AntiForgeryToken()
    @(Html.EditorFor(m => m.BallotViewModel, new ViewDataDictionary(ViewData)
    {
        TemplateInfo = new System.Web.Mvc.TemplateInfo
        {
            HtmlFieldPrefix = "BallotViewModel"
        }
    }))
    <button type="submit" class="btn btn-primary" data-target="#modal-container" data-toggle="modal">Vote Management Ballot</button>

控制器：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(HomeViewModel bModel)
{
    if (ModelState.IsValid)
    {
        return PartialView("ViewVoteConfirmation", bModel.BallotViewModel);
    }
}

_布局：

<div id="modal-container" class="modal fade"
     tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>
<script type="text/javascript">

$(function () {

    // Initalize modal dialog
    // attach modal-container bootstrap attributes to links with .modal-link class.
    // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
        //$.post($(this).attr("href"), function (data) {
            // got the result in data variable. do whatever you want now
            //may be reload the page
        //});
    });

    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });

    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });

    $('#CancelModal').on('click', function () {
        return false;
    });
});
</script>

Answer 1

看起来比较直接。

将事件处理程序附加到表单的 onsubmit 事件。
取消正常事件（您不希望页面本身发出 POST 请求）。
序列化表单，以便您有一些数据要提交。
获取表格的 target 属性，这样您就知道在哪里发布您的 POST。
使用jQuery的$.post函数发出ajax请求。
您的回复将是部分 HTML 页面。我们想把它注入到模态的主体中。

你应该有这样的东西：

$('#ballotForm').on('submit', function(e) {
    e.preventDefault();

    var data = $(this).serialize();
    var url = $(this).attr('target');

    $.post(url, data)
        .done(function(response, status, jqxhr){

            $('#modal-container').on('show.bs.modal', function (event) {
                var modal = $(this);
                modal.find('.modal-body').html(response);
            });

            $('#modal-container').modal('show');

        })
        .fail(function(jqxhr, status, error){ });

});

这是假设晴天的情况。 .done() 处理所有 2xx 响应代码，这并不一定意味着您的响应正是您想要的。

Answer 2

这是实际起作用的：

我将这段代码应用到我的布局页面

$('#ballotForm').on('submit', function(e) {
e.preventDefault();

var data = $(this).serialize();
var url = $(this).attr('target');

$.post(url, data)
    .done(function(response, status, jqxhr){

        $('#modal-container').modal('show');
        $('#modal-container').on('show.bs.modal', function (event) {
            var modal = $(this);
            modal.find('.modal-body').html(response);
        });

    })
    .fail(function(jqxhr, status, error){ });

最初它没有用。所以正如@Tieson 所建议的，我搬家了

$('#modal-container').modal('show');

下方

$('#modal-container').on('show.bs.modal', function (event) {
    var modal = $(this);
    modal.find('.modal-body').html(response);
 });

这使得模态能够触发。所以修改后的工作片段看起来像这样：

$('#ballotForm').on('submit', function(e) {
e.preventDefault();

var data = $(this).serialize();
var url = $(this).attr('target');

$.post(url, data)
    .done(function(response, status, jqxhr){

        $('#modal-container').on('show.bs.modal', function (event) {
            var modal = $(this);
            modal.find('.modal-body').html(response);
        });

        $('#modal-container').modal('show');

    })
    .fail(function(jqxhr, status, error){ });

});

将 MVC 表单结果提交到 HttpPost 方法并以 bootstrap 模式显示模型

Submit MVC Form Results to HttpPost method and display model in bootstrap modal

asp.net-mvc

jquery

twitter-bootstrap

bootstrap-modal