Question

如何在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图像按钮而不是开启者。我的问题清楚吗？

Answer 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>

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

1 个答案: