c# - JSon 返回一串 HTML 表格显示在 jQuery 数据表的 fnopen 中

Question

一个多月以来，我一直在努力寻找这个问题的答案，但一直没有成功。 所以我开始了这项工作。

我有一个 jQuery 数据表，它显示解析器的案例负载。

1. claim 编号
2. claim 人姓名
3. claim 状态
4. 最后修改日期
5. 未完成事件总数
6. 最后一篇日记
7. claim details pop up img

我的问题是在运行时我生成了 2 组按钮，一个显示未决事件的详细信息，第二个显示弹出的 claim 人详细信息。

在我不得不从服务器端获取突出的事件详细信息并使用 html 和进一步的 jQuery 为表格设置动画之前，一切都很顺利。

我读了很多书，最接近的是 MVC，它没有解决问题。

所以我开始制作一个带有 html 标签和内联 jquery 的字符串，以便从 JSON 服务传回。它工作正常，动画也有效。

现在的问题是当我将它部署到服务器时。它停止工作。 HTML 标签在那里，标题正在显示，但没有实际数据。我已经检查了 SQL 查询，它正在返回数据。我在 Debug模式下检查了内联字符串，它看起来也不错。

我不明白为什么它在服务器上不起作用，以及是否有任何其他“更好”的方法来做到这一点。

任何帮助将不胜感激。提前致谢

代码(数据表)

<div class="EventDetailsTable">
<asp:Repeater ID="TestRepeater" runat="server">
    <HeaderTemplate>
        <table id="tblOverDueCases" cellpadding="0" cellspacing="0" border="0" class="display">
            <thead>
                <tr>
                    <th>
                        Claim Ref
                    </th>
                    <th>
                        Claimant
                    </th>
                    <th>
                        Last Action
                    </th>
                    <th>
                        Status
                    </th>
                    <th>
                        Events
                    </th>                        
                    <th>
                        Notes
                    </th>
                </tr>
            </thead>
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%# Eval("Claim Ref") %>
            </td>
            <td>
                <%# Eval("Claimant") %>
            </td>
            <td>
                <%# Eval("[Last Action]")%>
                <%# Eval(" [Last Action Time]")%>
            </td>
            <td>
                <%# Eval("[Status]")%>
            </td>
            <td class="center"> <%--JCTEST AddedControl center class--%>
                <%# Eval("[NoE]")%>
            </td>
            <td class="center">
                <%# (String.IsNullOrEmpty(Eval("[Latest Diary Note]").ToString()) ? "n/a" : "<img id='imgDiaryNote' src='Images/DiaryIcon.png' alt='noDiaryNote' />")%>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody> </table>
    </FooterTemplate>
</asp:Repeater>
</div>

代码 (jQuery)

$(document).ready(function () {


var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img id="btnEventDet" src="Images/details_open.png" />';
nCloneTd.className = "center";

var nCloneTh2 = document.createElement('th');
var nCloneTd2 = document.createElement('td');
nCloneTd2.innerHTML = '<img id="btnClaimInfo" src="Images/InfoIcon.png" />';
nCloneTd2.className = "center";

$('#tblOverDueCases thead tr').each(function () {
    this.insertBefore(nCloneTh, this.childNodes[0]);
    this.insertBefore(nCloneTh2, this.childNodes[14]);
});
/*hack to display the info column as the last col*/
$('#tblOverDueCases tbody tr').each(function () {
    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
    this.insertBefore(nCloneTd2.cloneNode(true), this.childNodes[14]);

});

var oTable = $('#tblOverDueCases').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aLengthMenu": [
        [10, 25, 50,-1],
        [10, 25, 50,"All"]
    ]
});


$('#btnEventDet').live('click', function () {
    var nTr = this.parentNode.parentNode;
    if (this.src.match('details_close')) {
        /* This row is already open - close it */
        this.src = "Images/details_open.png";
        oTable.fnClose(nTr);
        /*change background color*/
        unfocusRow(nTr);
    }
    else if (this.src.match('details_open')) {
        /*collapse all open rows*/
        $('table img').each(function (event) {
            var nTr = this.parentNode.parentNode;
            if (this.src.match('details_close')) {
                /* This row is already open - close it */
                this.src = "Images/details_open.png";
                oTable.fnClose(nTr);
                /*Change the highlight back to the orginal colors*/
                unfocusRow(nTr);
            }
        });

        /* Open this row */
        this.src = "Images/details_close.png";
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
        /*Highlight and bold the selected row*/
        focusRow(nTr);
    }
});
/*test diary note button*/
var highlightRow;
$('#imgDiaryNote').live('click', function () {
    var nTr = this.parentNode.parentNode;
    highlightRow = nTr;        
    var aData = oTable.fnGetData(nTr);
    var sOut = aData[1];


    $.ajax({
        type: "POST",
        url: "DiaryView.aspx/GetDiaryNote",
        data: "{'leadID': " + sOut + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg){
            $('#lbDiaryNote').text(msg.d);
             //centering with css
            centerPopup("#DNWindow", '#backGroundDiaryNote');
            //load popup
            loadPopup("#DNWindow", '#backGroundDiaryNote');

            //highlight row
            focusRow(highlightRow);
        }
        });

    });

function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = aData[1];

$.ajax({
    type: "POST",
    url: "DiaryView.aspx/GetData",
    data: "{'leadID': " + sOut + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        oTable.fnOpen(nTr, msg.d, 'details');
    }
});

return "";
}

代码(JSON)

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetData(int leadID)
{
    #region string table code

    OverDueEvents overDueEvent = new OverDueEvents();
    DataSet ds = Query_OverdueEvents.Instance.OverdueEvents(followUpTime, userID, leadTypeID, leadID);
    DataSet innerDs = new DataSet();

    int count = ds.Tables[0].Rows.Count;

    StringBuilder returnString = new StringBuilder();

    returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventDetailsSubTablejQuery());
    returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableHeaders());

    List<OverDueEvents> listOverDueClaims = new List<OverDueEvents>();

    for (int i = 0; i < count; i++)
    {
        overDueEvent = new OverDueEvents();
        overDueEvent.OverDueClaim.LeadID = (int)ds.Tables[0].Rows[i].ItemArray[0];
        overDueEvent.LeadEventID = ds.Tables[0].Rows[i].ItemArray[1].ToString();
        overDueEvent.OverDueEvent.EventID = (int)ds.Tables[0].Rows[i].ItemArray[2];
        overDueEvent.OverDueEvent.FollowUpTime = overDueEvent.OverDueEvent.GetFollowUpTime(overDueEvent.OverDueEvent.EventID);
        overDueEvent.OverDueEvent.EventName = ds.Tables[0].Rows[i].ItemArray[3].ToString();
        overDueEvent.EventActioned = ds.Tables[0].Rows[i].ItemArray[4].ToString();
        overDueEvent.EventDueDate = ds.Tables[0].Rows[i].ItemArray[5].ToString();
        overDueEvent.DaysOverDue = (int)ds.Tables[0].Rows[i].ItemArray[6];

        innerDs = Query_NextPossibleEvents.Instance.GetNextPossibleEvents(followUpTime, userID, leadTypeID, leadID, overDueEvent.OverDueEvent.EventID);

        for (int nextEventCount = 0; nextEventCount < innerDs.Tables[0].Rows.Count; nextEventCount++)
        {
            Events nextAction = new Events();
            nextAction.EventName = innerDs.Tables[0].Rows[nextEventCount].ItemArray[1].ToString();

            overDueEvent.NextActions.Add(nextAction);
        }
        listOverDueClaims.Add(overDueEvent);
    }
    int panelID = 1;
    foreach (var events in listOverDueClaims)
    {
        returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableCol(panelID, events.OverDueEvent.EventName));
        panelID++;
    }

    returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenOutTableClosingTags());

    int panelCount = 1;
    foreach (var overDueEvents in listOverDueClaims)
    {
        returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenNextEventTable(panelCount, overDueEvents));
        panelCount++;
    }

    returnString.AppendLine(GenerateJQueryAndHTML.Instance.GenEventSubTableClosingTags());

    return returnString.ToString();

    #endregion
}

Answer 1

我发现您的 jquery 代码有两个问题。第一个是“数据”参数需要一个实际的 js 对象，而不是一个字符串化的对象。第二，我在这里可能是错的，你显然是在使用你的 web 方法和 asPx 文件。据我所知，这些应该与 asMx 文件一起使用。

$.ajax({
    type: "POST",
    url: "DiaryView.aspx/GetData",    //Not sure if an ASPX can have a web method. I always use an ASMX for these.
    //data: "{'leadID': " + sOut + "}", //data is an actual object, not a stringified json object use:this instead.
    data: {
        'leadID': sOut
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        oTable.fnOpen(nTr, msg.d, 'details');
    }
});

希望这对您有所帮助。