c# - 首次单击时对话框始终为空白

Question

我正在从 WebAPI 中提取数据并尝试在对话框中以表格格式显示。WebAPI 在按钮单击时被调用。第一次单击时，对话框始终为空白。从第二次单击开始，我可以看到数据 iun 表格格式。在第一次单击时，我可以看到数据来自 WebAPI。它仍然显示一个空白对话框。我能做些什么来解决这个问题？

提前致谢

<input id="prevApps" type="button" value="Previous Apps" 
class="divHHoldRowPmtEditinput" onclick="LoadPreviousApplications();" />

function openDialogPrevApps(titlemessage) {
$(document.body).append('<div id="gridPreviousApps"></div>');
$(document.body).append('<table id="tblPrevApps"></table>');
$('#gridPreviousApps').dialog({
autoOpen: false,
hide: "false",
title: titlemessage,
width: 800,
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});

$('#gridPreviousApps').dialog("open");
}


function LoadPreviousApplications() {
var hHoldtext = getSelectedHouseholdIDFromUC(); 
var loginPar = {
UserName: 'myUser',
CompanyID: 'myCompany',
HouseholdID: hHoldtext,
ProgramID: ''
}

$.ajax({
type: 'POST',
url: '/api/Payment/GetPreviousApplications',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(loginPar),
success: function (data) {
var divRow = '';
$("#tblPrevApps tr").remove();
$('#tblPrevApps').append($('<tr>')
.append($('<th>').append("ApplicationID"))
.append($('<th>').append("ApplicationDate"))
.append($('<th>').append("Household"))
.append($('<th>').append("ClientName"))
.append($('<th>').append("Status"))
.append($('<th>').append("StatusDate"))
.append($('<th>').append("ServiceItem"))
)
$.each(data, function (i, item) {
$('#tblPrevApps').append($('<tr>')
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ApplicationID))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ApplicationDate))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.HouseholdID))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ClientName))
.append($('<td class="divModalDialogSpanColumn">').append(item.Status))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.StatusDate))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ServiceItem))
)
});
$('#gridPreviousApps').append($('#tblPrevApps'));
openDialogPrevApps('Previous Applications');
},
failure: function (data) {
},
error: function (data) {
}
});
}

标签： c#asp.netjquery-uiasp.net-web-apijquery-ui-dialog

Answer 1

考虑以下代码。

var tempData = [{
  ApplicationID: 1,
  ApplicationDate: "02/11/2019",
  HouseholdID: 1,
  ClientName: "Test App",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "None"
}, {
  ApplicationID: 100,
  ApplicationDate: "02/11/2019",
  HouseholdID: 42,
  ClientName: "Test Client",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "Full"
}, {
  ApplicationID: 999,
  ApplicationDate: "02/10/2019",
  HouseholdID: 123,
  ClientName: "Simpsons",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "Duff"
}];

$(function() {
  function populateTable(tObj, tData) {
    var headers = Object.keys(tData[0]);
    tObj.html("");
    var head = $("<thead>").appendTo(tObj);
    $("<tr>").appendTo(head);
    $.each(headers, function(k, v) {
      $("tr", head).append($("<th>").html(v));
    });
    var body = $("<tbody>").appendTo(tObj);
    $.each(tData, function(k, v) {
      var row = $("<tr>").appendTo(body);
      $.each(headers, function(j, h) {
        $("<td>", {
          class: "divModalDialogSpanColum"
        }).html(v[h]).appendTo(row);
      });
    });
  }

  function openDialogPrevApps(diagTitle, tableData) {
    var gridDiag = $('<div>', {
      title: diagTitle,
      id: "gridPreviousApps"
    }).appendTo($("body"));
    var gridTable = $('<table>', {
      id: "tblPrevApps"
    }).appendTo(gridDiag);
    gridDiag.dialog({
      autoOpen: false,
      hide: "false",
      width: 800,
      buttons: {
        'Ok': function() {
          $(this).dialog('close');
          gridDiag.remove();
        }
      }
    });
    populateTable(gridTable, tableData);
    $('#gridPreviousApps').dialog("open");
  }

  function loadPreviousApplications() {
    /* AJAX Code
      Place your AJAX Code to collect data here.
      When ready, pass the data to the operner
    */
    openDialogPrevApps('Previous Applications', tempData);
  }

  $("#prevApps").click(loadPreviousApplications);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="prevApps" type="button" value="Previous Apps" class="divHHoldRowPmtEditinput" />

把功能再分解一点，你可以更好地利用它们，并在不同的时间使用它们。在您的加载函数中，您只需要收集数据并将其传递给打开的对话框函数。

希望有帮助。