Question

我已经看过很多关于如何在表单中使用ActionLink来调用控制器上的方法的示例。当它遇到该方法时，它返回一个bootstrap模式中的局部视图。我想做的是让我的表单将表单结果发布到我的控制器上的HttpPost方法，然后从那里调用局部视图来显示引导模式。我怎么能这样做？

表单视图：

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

_layout：

<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

以下是实际工作的内容：

我将此代码段应用于我的布局页面

$('#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){ });

});

Answer 2

似乎相对简单。

将事件处理程序附加到表单的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响应代码，这并不一定意味着您的响应正是您想要的。

将MVC表单结果提交给HttpPost方法并在bootstrap模式中显示模型

2 个答案: