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

【问题标题】：How to open partial view modal when datatables row click?单击数据表行时如何打开部分视图模式？
【发布时间】：2019-04-09 22:54:00
【问题描述】：

我的布局中有一般的模态结构。

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

【问题讨论】：

你得到什么错误？

标签： jquery ajax asp.net-mvc

【解决方案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);            
        }

【讨论】：

我看到 .html(data) 应该是 html(result) 但结果仍然是错误函数。谢谢
我在函数中找不到错误信息（错误）。
尝试将端点添加到您的控制器以便能够检测到异常
我添加了，但是我找不到错误信息对不起。
我更新了我的答案，希望这个答案现在对你有帮助

【解决方案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);
                }
            });
        }
    }

【讨论】：