Question

我有一个MVC应用程序，它使用模式表单来收集用户信息。有一个带有dataTable的主视图，dataTable中的每一行都会呈现一个按钮，用于在模式对话框中呈现部分视图内容。提交后，模式应该会消失，以便用户可以点击相同的按钮或任何其他按钮。

我遇到的问题是按钮只点击一次。具体来说，当我单击其中一个按钮时，表单按预期打开，我可以将更改提交到数据库;这没问题。之后，当我点击它们时，该页面上的所有按钮都不会执行任何操作。

关于我可以采取哪些措施来解决这个问题？

这是我的代码：

原始视图：

<html>
    <head></head>
    <body>
        <table id="NewCounterpartyRequests" class="display">
                    <thead>
                    <tr>                        
                        <th>Counterparty Legal Name</th>
                        <th>Requestor</th>
                        <th>View Details</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Counterparty Legal Name</th>
                        <th>Requestor</th>
                    </tr>
                </tfoot>
                <tbody></tbody>
        </table>
    </body>
</html>

<div id='dialogDiv' class='modal fade in'>
    <div id='dialogContent'></div>
</div>

部分视图

<div id="dialogDiv" class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Counterparty Request Details</h3>
    </div>

@using (Ajax.BeginForm("EditNewFullCounterpartyRequestDetails", "Counterparty",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "dialogDiv",
            HttpMethod = "POST",
            OnSuccess = "ShowSuccess"
        }))
{
<div>
        @Html.ValidationSummary()
        @Html.HiddenFor(x => x.RequestDetails.CounterpartyRequestId)
        @Html.HiddenFor(x => x.RequestDetails.CreatorUserId)
        @Html.EditorFor(x => x.RequestDetails.CounterpartyLegalName)

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
}

控制器：

    [HttpGet]
    public ActionResult GetNewFullCounterpartyRequestDetails(int counterpartyRequestId)
    {
        FullCounterpartyRequestViewModel model = unitOfService.CreateFullCounterpartyRequestViewModel(counterpartyRequestId);
        model.ViewMode = "NEW";
        return PartialView("DisplayCounterpartyRequestPartial",model);
    }

    [HttpPost]
    public ActionResult EditNewFullCounterpartyRequestDetails(FullCounterpartyRequestViewModel model)
    {
        if(ModelState.IsValid)
        {
            //code to update the database
            return Json(new { success = true });
        }
        else
        {
            return PartialView("DisplayCounterpartyRequestPartial", model);
        }
    }

JAVASCRIPT

function ShowSuccess(result) {
    if (!result.success) {
        $('#dialogDiv').html(result);
    } else {
        alert('Thanks for submitting');
        $('#dialogDiv').modal('hide');
    }
};

$('.modal-dialog').on('show.bs.modal', function () {
    $(this).find('.modal-body').css({
        'max-height':'100%'
    })});

$(function () {
    $.ajaxSetup({ cache: false });

    $('#NewCounterpartyRequests').on('click', '.ViewRequest', function (event) {
        var id = $(event.target).attr("data-id");
        var url = 'Counterparty/GetNewFullCounterpartyRequestDetails?counterpartyRequestId=' + id;
        $('#dialogContent').load(url, function () {
            $('#dialogDiv').modal('show');
        });
        return false;
    });
});

$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#NewCounterpartyRequests tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    //create a DataTable
    var table = $('#NewCounterpartyRequests').DataTable({
    "bServerSide": true,
    "sAjaxSource": "Counterparty/DisplayNewCounterpartyRequests",
    "bProcessing": true,
    "aoColumns": [
                    { "sName": "COUNTERPARTYLEGALNAME" },
                    { "sName": "REQUESTOR" },
                    {
                        "sName": "DETAILS",
                        "bSearchable": false,
                        "bSortable": false,
                        "mRender": function (data, type, full) {
                            var id = full[2];
                            return '<button class="ViewRequest" data-id=' + id + '>View Details</button>';
                        }
                    }
    ]
    });

    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.footer()).on('keyup change', function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
    });
});

Answer 1

我想出来了;基本上发生的事情是.load方法的目标是dialogContent元素，当你加载局部视图时，它会被删除。因此，我只是更改了load方法以直接加载dialogDiv元素，并完全删除了dialogContent元素。这现在有效。

Ajax Modal只能使用一次

1 个答案: