如何在数据表行单击时打开局部视图模态？

Posted 2021-03-27

我有一般模态结构，位于我的布局上。

 <div class="modal fade" id="m_modal_general">
        <div class="modal-dialog modal-lg" role="document">
            <div id="generalModal" class="modal-content"></div>
        </div>
    </div>

在我的客户索引页面中，我可以轻松地将模态内容称为来自控制器的部分视图。

$(function () {
    $("#newCustomer").click(function () {
        var $buttonClicked = $(this);
        $.ajax({
            type: "GET",
            url: "/Customer/Customer_Add",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function (data) {
                $('#generalModal').html(data);
            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });
    });
});


public IActionResult Customer_Add()
{
   return PartialView("~/Views/Customer/AddCustomerPartial.cshtml");
}

现在我想在我点击数据表行但是ajax调用结果给出错误时得到另一个部分。我的代码有什么问题？

function OperationDetail() {
    var table = $('#tbloperations').DataTable();
    $('#tbloperations tbody').on('click', 'tr', function () {        
        var data = table.row(this).data();
        $.ajax({
            url: '/Customer/CustomerOperationDetail_Read',
            type: 'GET',
            dataType: 'json',
            data: { customerOperationId: data.Id },
            success: function (result) {
                $('#generalModal').html(data);
            },
            error: function (error) {
                alert("Dynamic content load failed.");
            }
        });
    });
}

public async Task<ActionResult> CustomerOperationDetail_Read(int customerOperationId){

var result = await operationsBusiness.GetCustomerOperationDetails(new GetCustomerOperationDetailsCommand {

                OperationId = customerOperationId
            });
 CustomerOperationDetailsVm vm = new CustomerOperationDetailsVm();

 vm.CustomerOperationDetails = result.Result;

return PartialView("~/Views/Customer/OperationDetailsPartial.cshtml",vm);            
}

答案

你在这个功能中有错误。 尝试此解决方案：

  function OperationDetail() {
        var table = $('#tbloperations').DataTable();
        $('#tbloperations tbody').on('click', 'tr', function () {        
            var data = table.row(this).data();
            $.ajax({
                url: '/Customer/CustomerOperationDetail_Read',
                type: 'GET',
                dataType: 'json',
                data: { customerOperationId: data.Id },
                success: function (result) {
                    $('#generalModal').html(result);
                },
                error: function (error) {
                    alert("Dynamic content load failed.");
                }
            });
        });
    }

UPDATE 尝试将此代码放入：

$(function () {
    $("#newCustomer").click(function () {
        var $buttonClicked = $(this);
        $.ajax({
            type: "GET",
            url: "/Customer/Customer_Add",
            success: function (data) {
                $('#generalModal').html(data);
            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });
    });
});


public IActionResult Customer_Add()
{
   return PartialView("~/Views/Customer/AddCustomerPartial.cshtml");
}

另一个功能：

  function OperationDetail() {
        var table = $('#tbloperations').DataTable();
        $('#tbloperations tbody').on('click', 'tr', function () {        
            var data = table.row(this).data();
            $.ajax({
                url: '/Customer/CustomerOperationDetail_Read',
                type: 'GET',
                data: { customerOperationId : data.Id },
                success: function (result) {
                    $('#generalModal').html(result);
                },
                error: function (error) {
                    alert("Dynamic content load failed.");
                }
            });
        });
    }




      public async Task<ActionResult> CustomerOperationDetail_Read(int customerOperationId){

        var result = await operationsBusiness.GetCustomerOperationDetails(new GetCustomerOperationDetailsCommand {

                        OperationId = customerOperationId
                    });
         CustomerOperationDetailsVm vm = new CustomerOperationDetailsVm();

         vm.CustomerOperationDetails = result.Result;

        return PartialView("~/Views/Customer/OperationDetailsPartial.cshtml",vm);            
        }

另一答案

当我将数据类型json更改为html时。有效。

function OperationDetail(customerOperationId) {
        if (customerOperationId > 0) {
            $.ajax({
                url: '/Customer/CustomerOperationDetail_Read',
                type: 'GET',
                dataType: 'html',
                data: { customerOperationId: customerOperationId },
                success: function (result) {
                    $('#generalModal').html(result);
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(xhr.responseText);
                }
            });
        }
    }