Как открыть модальное частичное представление при щелчке строки данных?

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

Теперь я хочу получить еще один фрагмент, когда я щелкнул строку данных, но результат вызова 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);
                }
            });
        }
    }