Question

我的布局上有通用的模态结构。

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

现在，当我单击datatables行时，我想得到另一个部分，但是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);            
}

Answer 1

此功能有错误。
尝试以下解决方案：

  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.");
                }
            });
        });
    }

更新
尝试输入以下代码：

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

Answer 2

当我将数据类型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);
                }
            });
        }
    }

数据表行单击时如何打开部分视图模式？

2 个答案: