DotNetNuke、Ajax 和 jQuery：隐藏表格行

Question

我为客户编写了一个 DotNetNuke 模块，允许他们从表中“删除”优惠券。当他们单击该链接时，将使用 jQuery 创建一个 Ajax POST，成功后应删除该行（或至少隐藏）并显示一条成功消息，并附加一个 CssClass。一切正常，减去删除行的部分。我在任何其他 ASP.NET Web 窗体/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 模块，所以这没有多大帮助！提前致谢！

吉姆

编辑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" + deletingCouponID).remove();

到

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

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

Answer 2

为你的头添加一个标题类并使用下面的代码

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

Answer 3

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

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

这会删除 tbody 中的所有行。

你可以在函数运行后使用firebug或其他一些动态源生成器查看页面源，看看是整个表被删除了还是只删除了所有行？

附言我写了很多 DNN 模块，似乎很难相信这会与 DNN 本身有关，而不仅仅是一些疏忽。虽然我不是说不可能。