使用asp.net GridView模板字段打开jQuery对话框

Question

如何打开jQuery对话框，并在Gridview模板字段中放置图像按钮？

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

揭幕战是一个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>