代码之家  ›  专栏  ›  技术社区  ›  ctorx

JQuery DIalog和ASP。NET中继器

  •  10
  • ctorx  · 技术社区  · 17 年前

    我有一个ASP。NET中继器,显示带有删除链接按钮的项目列表。

    我想设置删除链接按钮以显示JQuery对话框进行确认。如果单击了“确定”按钮,我想进行回发。

    建议?

    6 回复  |  直到 17 年前
        1
  •  14
  •   tanathos    17 年前

    解决方案并不那么简单。您必须能够在按下jQuery UI对话框的Ok按钮后调用原始回调函数。

    首先,你需要一个通用的js函数来显示对话框:

    function showConfirmRequest(callBackFunction, title, content) 
    {
        $("#divConfirm").html(content).dialog({
            autoOpen: true,
            modal: true, 
            title: title,
            draggable: true,
            resizable: false,
            close: function(event, ui) { $(this).dialog("destroy"); },
            buttons: { 
                'Ok': function() { callBackFunction(); },
                'Cancel': function() {
                    $(this).dialog("destroy");
                }
            },
            overlay: { 
                opacity: 0.45, 
                background: "black" 
            } 
        });
    }
    

    我猜想存在一个类似div的

    <div id="divConfirm"></div>
    

    protected void AddConfirmRequest(WebControl control, string title, string message) 
    {
        string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
        string function = String.Format("javascript:showConfirmRequest(function() {{ {0} }}, '{1}', '{2}'); return false;", 
                                         postBackReference,
                                         title,
                                         message);
        control.Attributes.Add("onclick", function);
    }
    

    通过GetPostBackEventReference方法,您可以检索asp.net分配给控件的回发函数。

    现在,在Repeater ItemDataBound上,检索执行delete的控件并将其传递给此函数:

    <asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_OnItemDataBound">
        ...
        <ItemTemplate>
            ...
            <asp:Button ID="btnDelete" runat="server" Text="Delete" />
            ...
        </ItemTemplate>
    </asp:Repeater>
    

    以及代码:

    protected void repeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            WebControl btnDelete = ((WebControl)e.Item.FindControl("btnDelete"));
            AddConfirmRequest(btnDelete, "Confirm delete", "Are you sure? Really???");
        }
    }
    

    我希望这能有所帮助。

        2
  •  2
  •   recursive    17 年前
    <asp:GridView ... CssClass="mygridview"></asp:GridView>
    

    和

    $('table.mygridview td a').whatever()
    

    这将允许您同时使用所有链接按钮。

        3
  •  1
  •   David k0ni    11 年前

    你可以这样做:

    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            ...
            <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
        </ItemTemplate>
    </asp:Repeater>
    
    <script>
        function ConfirmDelete() {
            return confirm("Delete this record?");
        }
    </script>
    

    或者我认为你也可以这样做:

    <script>
        $(function() {
            $(".button").click(function() {
                return confirm("Delete this record?");
            });
        });
    </script>
    

    在ConfirmDelete方法中,您可以定义jQuery Confirm对话框

        4
  •  0
  •   MichaC    15 年前

    tanathos肯定会回答这个问题,但我还有另一个选择,如果你愿意的话,可以避免在后面的代码中编写脚本。我只是使用display:none隐藏了asp删除按钮,并添加了一个删除按钮,该按钮调用确认对话框,如果确认删除,则单击隐藏的asp删除按钮。

    中继器中的HTML:

    <ItemTemplate>
    ...
    <td>
        <a href="#" class="dummy-delete-button">Delete</a>
        <asp:Button ID="DeletePolicyButton" runat="server" OnCommand="OnDeleteCommand" CommandArgument="Argument" Text="Delete" CssClass="delete-button" />
    </td>
    ...
    </ItemTemplate>
    

    CSS:

    .delete-button 
    {
        display: none;
    }
    

    javascript:

    // make the dummy button look like a button
    $("a.dummy-delete-button").button({
        icons: {
            primary: "ui-icon-trash"
        }
    });
    
    // create the dialog
    var deleteDialog = $('<div>Are you sure you want to remove this policy?</div>')
        .dialog({
            autoOpen: false,
            modal: true,
            title: 'Delete Policy'
        });
    
    // handle click event to dummy button
    $("a.dummy-delete-button").click(function (e) {
        // don't follow the href of the dummy button
        e.preventDefault();
        // get a reference to the real ASP delete button
        var button = $(this).closest('td').find('.dummy-delete-button');
        deleteDialog.dialog({
            buttons: {
                // handle delete. Note: have to defer actual button click until after close
                // because we can't click the button while the modal dialog is open.
                "Delete": function () { deleteDialog.bind("dialogclose", function () { button.click() }); $(this).dialog("close"); },
                // handle close
                "Cancel": function () { $(this).dialog("close"); }
            }
        });
    
        deleteDialog.dialog("open");
    });
    
        5
  •  0
  •   Zoltan Veres    15 年前

    嗨,
    首先,您应该使用Jquery Dialog或其他clienside对话框,它更酷。

    您应该在页面上有一个html元素来调用Jquery对话框弹出窗口。

    <div class="Popup"></div>
    
    <script>
        var confirm = false;
        function ConfirmDelete(doPostback) {
            $(".Popup").dialog(){ /* threat the dialog result , set confirm variable */ };
            if(confirm) {
               __doPostback(); }
            else return false;
        }
    </script>
    


    在我放句子的部分,你可以放代码来处理对话结果。 你可以从上面的链接中找到信息。


    按钮应该看起来像:

    <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
        <asp:LinkButton OnClientClick="ConirmDelete(<#%GetPostbackReference()%>)" CommandArgument = "<%# DataBinder.Eval(Container.DataItem, "Id") %>" OnClick="btnConfirm_Click" ID="btnConfirm" runat="server"></asp:LinkButton>
        </ItemTemplate>
    </asp:Repeater>
    



    CommandArgument 属性我设置绑定到中继器的项目的id。
    以这种方式在 btn确认_单击 如果您有权访问此参数

    void btnConfirm_Click(object sender, CommandEventArgs e)
    {
       e.CommandArgument -> you will find the id an you can execute the delete
    }
    

    你应该有后面的代码:

    protected string GetPostbackReference()
    {    
    return Page.ClientScript.GetPostBackEventReference(btnConfirm, null);
    }
    


    此函数在元素绑定时调用,并返回当前控件回发方法,该方法看起来像__doPostback(source,param)

    这是一个javascript方法,你可以很容易地执行它,并且你可以完全控制回传。 在客户端,您可以决定是否调用此回发事件。


    附言 如果有什么不清楚的地方,请在这里发布一个问题,我会更新答案。

        6
  •  0
  •   Alfred redcoder    14 年前
    <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
    ...
                    <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
                </ItemTemplate>
            </asp:Repeater>
    <script>
            function ConfirmDelete() {
                return confirm("Delete this record?");
            }
    </script>