DotNetNuke、Ajax 和 jQuery：隐藏表格行

Question

我为客户编写了一个 DotNetNuke 模块，允许他们从表中“删除”优惠券。当他们单击链接时，将使用 jQuery 创建 Ajax POST，成功后应删除该行（或至少隐藏），并显示一条成功消息，并附加一个 CssClass。一切工作正常，减去行被删除的部分。我在任何其他 ASP.NET Web Forms/MVC 项目中都没有遇到过这个问题，只有 DotNetNuke。最终发生的事情是我的整个表被删除并显示成功消息。这是我的代码：

<script language="javascript" type="text/javascript">

jQuery.noConflict();
var deletingCouponID = null;

function DeleteCoupon(_CouponID) {

    deletingCouponID = _CouponID;

    jQuery.post(
        "mylink.aspx",
        { CouponID: _CouponID },
        function (data) {

            if (data.Response == "Success") {
                alert("#row" + deletingCouponID);

                jQuery("#tblCoupons tbody tr.row" + deletingCouponID).remove();
                jQuery("#divAjaxMsg").html("<p>" + data.Message + "</p>");
                jQuery("#divAjaxMsg").addClass("NormalRed");
            }
            else {
                jQuery("#divAjaxMsg").html("<p>" + data.Message + "</p>");
                jQuery("#divAjaxMsg").addClass("NormalRed");
            }
        },
        "json"
    );
}

和 HTML：

<div style="padding:1px">

<asp:Label runat="server" ID="lblMessage" ></asp:Label>

<div runat="server" id="divCouponList" >

    <div style="text-align: center">
        <h1>Coupon List</h1>
    </div>

    <div id="divAjaxMsg" />

    <table cellpadding="5px" id="tblCoupons">
        <thead>
            <tr>
                <th>Coupon ID</th>
                <th>Coupon Code</th>
                <th>Author</th>
                <th>Date Created</th>
                <th>Expiration Date</th>
                <th>Amount</th>
                <th>Min Purchase Amount</th>
                <th>Num Uses</th>
                <th>Max Uses</th>
                <th>Target User</th>
                <th>Target Product</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <%
            string Sql = "SELECT * FROM MyTable WHERE Expired != 'True'";
            using (IDataReader Reader = DataProvider.Instance ().ExecuteSQL (Sql))
            {
                int Count = 0;
                while (Reader.Read ())
                {
                    ++Count;
        %>
                    <tr id="row<%= ((int)Reader["CouponID"]).ToString () %>">
                        <td nowrap="nowrap"><%= ((int)Reader["CouponID"]).ToString () %></td>
                        <td nowrap="nowrap"><%= Reader["CouponCode"] as string %></td>
                        <td nowrap="nowrap"><%= GetUserDisplayName ((int)Reader["AuthorID"]) ?? "Author Not Found" %></td>
                        <td nowrap="nowrap"><%= ((DateTime)Reader["DateCreated"]).ToShortDateString () %></td>
                        <td nowrap="nowrap"><%= Reader["ExpirationDate"] != DBNull.Value ? ((DateTime)Reader["ExpirationDate"]).ToShortDateString () : "Indefinite" %></td>
                        <td nowrap="nowrap"><%= Reader["Amount"] as string %></td>
                        <td nowrap="nowrap"><%= Reader["MinPurchase"] != DBNull.Value ? String.Format ("{0:C}", (decimal)Reader["MinPurchase"]) : "None" %></td>
                        <td nowrap="nowrap"><%= ((int)Reader["NumUses"]).ToString () %></td>
                        <td nowrap="nowrap"><%= Reader["MaxUses"] != DBNull.Value ? ((int)Reader["MaxUses"]).ToString () : "Unlimited" %></td>
                        <td nowrap="nowrap"><%= !String.IsNullOrEmpty (Reader["TargetUserEmail"] as string) ? Reader["TargetUserEmail"] as string : "None" %></td>
                        <td nowrap="nowrap"><%= Reader["TargetProductID"] != DBNull.Value ? (GetProductName ((int)Reader["TargetProductID"]) ?? "None") : "None" %></td>
                        <td nowrap="nowrap"><a href="<%= NewEditURL + "?CouponID=" + ((int)Reader["CouponID"]).ToString () %>">Edit</a></td>
                        <td nowrap="nowrap"><a href="javascript: DeleteCoupon(<%= ((int)Reader["CouponID"]).ToString () %>)">Delete</a></td>
                    </tr>
        <%
                }

                if (Count < 1)
                {
        %>
                    <tr>
                        <td colspan="10" style="text-align: center;">No coupons found</td>
                    </tr>
        <%
                }
            }
        %>
        </tbody>
    </table>
    <p>
        <a href="<%= NewEditURL %>">Create New Coupon</a>
    </p>
</div>

我确信我错过了（或搞砸了）一些愚蠢的事情，所以我认为另外几双眼睛可能会有所帮助。我不太喜欢编写 DNN 模块，所以这没有多大帮助！提前致谢！

Jim

编辑 2：感谢大家的帮助和想法！我感谢大家花费时间和精力来帮助我完成这件事。

编辑：这是 IE 的“之前和之后”标记。该行实际上并未被删除。我可以忍受该行被隐藏，这样用户就无法单击编辑/删除按钮：>

<table cellpadding="5px" id="tblCoupons">
        <thead>
            <tr>
                <th>Coupon ID</th>
                <th>Coupon Code</th>
                <th>Author</th>
                <th>Date Created</th>
                <th>Expiration Date</th>
                <th>Amount</th>
                <th>Min Purchase Amount</th>
                <th>Num Uses</th>
                <th>Max Uses</th>
                <th>Target User</th>
                <th>Target Product</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>

                    <tr id="row8">
                        <td nowrap="nowrap">8</td>
                        <td nowrap="nowrap">E82O7KX</td>
                        <td nowrap="nowrap">SomeUser</td>
                        <td nowrap="nowrap">7/5/2010</td>
                        <td nowrap="nowrap">Indefinite</td>
                        <td nowrap="nowrap">100%</td>
                        <td nowrap="nowrap">$500.00</td>
                        <td nowrap="nowrap">0</td>
                        <td nowrap="nowrap">50</td>
                        <td nowrap="nowrap">None</td>
                        <td nowrap="nowrap">None</td>
                        <td nowrap="nowrap"><a href="somepage">Edit</a></td>
                        <td nowrap="nowrap"><a href="javascript: DeleteCoupon(8)">Delete</a></td>
                    </tr>

                    <tr id="row11">
                        <td nowrap="nowrap">11</td>
                        <td nowrap="nowrap">D2GRI</td>
                        <td nowrap="nowrap">SomeUser</td>
                        <td nowrap="nowrap">7/5/2010</td>
                        <td nowrap="nowrap">Indefinite</td>
                        <td nowrap="nowrap">$300</td>
                        <td nowrap="nowrap">None</td>
                        <td nowrap="nowrap">0</td>
                        <td nowrap="nowrap">Unlimited</td>
                        <td nowrap="nowrap">None</td>
                        <td nowrap="nowrap">None</td>
                        <td nowrap="nowrap"><a href="somepage">Edit</a></td>
                        <td nowrap="nowrap"><a href="javascript: DeleteCoupon(11)">Delete</a></td>
                    </tr>

        </tbody>
    </table>

Answer 1

将

jQuery("#tblCoupons tbody tr.row" + waitingCouponID).remove();

更改为

jQuery("#row" + waitingCouponID).remove();

也返回false 从您的函数或使用 event.preventDefault() 来阻止链接跟随。

Answer 2

将标头类添加到您的 head 并使用下面的代码

$("#myTable tr:not(.header)").remove();
$("#myTable").append(table);

Answer 3

您确定优惠券 ID 设置正确吗？如果不是的话，那就有意义了，因为您的代码使用该 id 作为删除内容的标准的一部分。如果它不存在，那么它基本上会告诉表删除所有行。下面基本上是如果没有设置的话它会是什么样子。

jQuery("#tblCoupons tbody tr.row").remove();

这将删除您的 tbody 中的所有行。

您可以使用 firebug 或其他动态源生成器在函数运行后查看页面源并查看是否已删除整个表或仅删除所有行？

ps 我已经编写了很多 DNN 模块，似乎很难相信这与 DNN 本身有关，而不是只是一些疏忽。虽然我并不是说不可能。