Почему в моём модальном окне появляется сообщение о недопустимом объекте, переданном при попытке заполнить его данными, основанными на том, на что я нажал

Question

Почему в моем модальном окне появляется сообщение о недопустимом объекте, переданном мне, когда я пытаюсь заполнить его данными, основанными на том, на что я нажал

У меня есть таблица, в которой есть некоторые данные о клиенте, поэтому когда я щелкаю по клиенту, я хочу всплывающее окно, которое отображает остальную информацию о клиентах, но во всплывающем окне отображается сообщение о том, что передан недопустимый объект. Обратите внимание, что клиент метода заполняет данные, и они отображаются в частичном представлении. Моя ссылка для загрузки всплывающего окна называется View

, вот мой код ниже

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
      rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            title: "View Details"
        });
        $("#tableData .details").click(function () {
            //var $buttonClicked = $(this);
            //var InfoId = $buttonClicked.attr('data-id');
            var id = $(this).closest("tr").find("td").eq(0).html();

            $.ajax({
                type: "POST",
                url: "/FilteredSearch/Client",
                data: '{Id: "' + id + '" }',
                contentType: "application/json; charset=utf-8",
                //dataType: "html",
                datatype: "json",
                success: function (response) {
                    $('#dialog').html(response);
                    $('#dialog').dialog('open');
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });




 <table id="tableData" class="table">
        <tr>
            <th>
                First Name
            </th>

            <th>
                Last Name
            </th>
            <th>
                Cell1
            </th>

            <th>
                Email1
            </th>

            <th>
                Identification Number
            </th>
            <th>
                @Html.ActionLink("Export", "ExportSearchDataToExcel", new { conditionBasedSearch = condition })
                @*<button onclick="exportToExcel()">
                        Export to Excel
                    </button>*@
            </th>
        </tr>

        @foreach (var item in Model)
        {
        <tr>
            <td><a class="details"  href="javascript:;" data-id = @item.ClientId>View</a></td>
            <td>
              @Html.DisplayFor(modelItem => item.FirstName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cell1)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Email1)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IdentificationNumber)
            </td>


            @*<td>
            @Html.ActionLink("Edit", "Edit", new { id = item.ClientDataId }) |
            @Html.ActionLink("Details", "Details", new { id = item.ClientDataId }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.ClientDataId })
        </td>*@
        </tr>
        }

    </table>

Answer 1

Исходя из вашего кода, я бы посоветовал что-то вроде следующего.

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    title: "View Details"
  });
  $("#tableData").on("click", ".details", function(e) {
    e.preventDefault();
    var id = $(this).data("id");

    $.ajax({
      type: "POST",
      url: "/FilteredSearch/Client",
      data: { id: id },
      contentType: "application/json; charset=utf-8",
      datatype: "json",
      success: function(response) {
        $("#dialog").html("");
        $.each(response, function(key, value) {
          $("#dialog").append("<label>" + key + ":</label>" + value + "<br />");
        });
        $('#dialog').dialog('open');
      },
      failure: function(response) {
        alert(response.responseText);
      },
      error: function(response) {
        alert(response.responseText);
      }
    });
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />

<table id="tableData" class="table">
  <tr>
    <th>&nbsp;</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Cell1</th>
    <th>Email1</th>
    <th>Identification Number</th>
    <th><button onclick="exportToExcel()">Export to Excel</button></th>
  </tr>
  <tr>
    <td><a href="#" class="details" data-id="1002">View</a></td>
    <td>Homer</td>
    <td>Simpson</td>
    <td>417-555-1212</td>
    <td>hsimpson@springfieldpowerplant.com</td>
    <td>1002</td>
    <td>Edit | Details | Delete</td>
  </tr>
</table>

Лучше предоставить итоговый HTML, поскольку именно с ним взаимодействует jQuery, и он более полезен для тех, кто может попытаться помочь вам , Пожалуйста, рассмотрите, как предложить минимальный воспроизводимый пример: { ссылка }