使用 asp.net Gridview 模板字段打开 Jquery 对话框答案

【问题标题】：Open Jquery Dialog Using asp.net Gridview Template Field使用 asp.net Gridview 模板字段打开 Jquery 对话框
【发布时间】：2010-09-25 07:02:47
【问题描述】：

如何使用放在 Gridview 模板字段中的图像按钮打开 Jquery 对话框？

  <asp:TemplateField HeaderText="افزودن">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="add" runat="server" CausesValidation="false" CommandName="adddetail"
                                            ImageUrl="~/Tadarokat/Images/add.png" Text="افزوردن" CommandArgument='<%# eval("mprid") %>' />
                                    </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                </asp:TemplateField>

我的 jquery 函数是：

   <script type="text/javascript">
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function test() {
        $('#Div2').dialog({
            autoOpen: false,
            show: 'slide',
            hide: 'clip',
            width: 'auto',
            height: 'auto'
            ,
            modal: true,
            resizable: false
        });

        $('#opener').click(function test() {
            $('#Div2').dialog('open');
            return false;
        });
    });
</script>

opener 是一个 html 按钮。我想用我的 asp.net 图像按钮代替开瓶器。我的问题清楚了吗？

【问题讨论】：

标签： asp.net jquery jquery-ui gridview jquery-ui-dialog

【解决方案1】：

已解决:)

 <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server"  OnClientClick="showDialog('editPerson');" 
                            ImageUrl="~/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png" />
                    </ItemTemplate>
                </asp:TemplateField>

jquery函数：

<script type="text/javascript">
    $(document).ready(function() {
        //setup new person dialog
        $('#newPerson').dialog({
                autoOpen: false,
                draggable: true,
                title: "Add New Person",
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });

            //setup edit person dialog
            $('#editPerson').dialog({
                autoOpen: false,
                draggable: true,
                title: "Edit Person",
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });
    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeDialog(id) {
        $('#' + id).dialog("close");
    }

</script>

【讨论】：