2014-02-20 20 views
2

我有以下的标记:如何在执行SqlDataSource的DeleteCommand时显示引导模式?

 <asp:GridView ID="Users" runat="server" 
      CssClass="table table-hover table-striped" GridLines="None" 
      AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataKeyNames="Id" DataSourceID="UsersSqlDataSource"> 
      <Columns> 
       <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" Visible="false" /> 
       <asp:BoundField DataField="UserName" HeaderText="UserName" SortExpression="UserName" /> 
       <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> 
       <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> 
       <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" /> 
       <asp:CommandField ShowEditButton="True" ControlStyle-CssClass="btn btn-info" /> 
       <asp:CommandField ShowDeleteButton="True" ControlStyle-CssClass="btn btn-info" /> 
      </Columns> 
     </asp:GridView> 

     <asp:SqlDataSource ID="UsersSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" 
      SelectCommand="SELECT [UserName], [Id], [FirstName], [LastName], [Email] FROM [AspNetUsers]" 
      DeleteCommand="DELETE FROM AspNetUsers WHERE [Id]= @Id" 
      UpdateCommand="UPDATE AspNetUsers SET FirstName = @FirstName, LastName = @LastName, Email = @Email WHERE (Id = @Id)"></asp:SqlDataSource> 
    </div> 

我没有任何RowCommand,RowDeleting为GridView事件。一切都由sql数据源处理。如何在GridView的删除按钮被点击时显示引导模式确认?

我能够通过使用RowDataBound事件获得定期的确认对话框,但不知道如何使用引导模式而不是常规确认?

我添加了一个RowCommand事件对电网和我做了以下内容:

protected void Users_RowCommand(object sender, GridViewCommandEventArgs e) 
    { 
     if (e.CommandName == "Delete") 
     { 
      var sb = new System.Text.StringBuilder(); 

      sb.Append(@"<script type='text/javascript'>"); 

      sb.Append("$('#deleteModal').modal('show');"); 

      sb.Append(@"</script>"); 

      ScriptManager.RegisterStartupScript(this, this.GetType(), "DeleteModalScript", sb.ToString(), false); 
     } 
    } 

我有一个SITEMASTER最初曾在底部的脚本,但我无法得到模态时弹出点击删除,所以我把脚本放在顶部(Jquery和Bootstrap)。如果可能的话,我宁愿他们在底部。

所以,现在我得到的模式弹出,但它仍然删除记录,即使我按取消。

CommandFields'sCommand Name "Delete" and "Edit"的问题。我是否应该以另一种方式处理删除和编辑记录,如asp:ButtonField

切换到一个asp:ButtonField的作品,但我现在的问题是JavaScript的底部而不是顶部?

+0

试试这个http://mvcdiary.com/2012/03/11/create-a-jquery-plugin-for-twitter-bootstrap-confirm -modal-popup /或使用https://gist.github.com/trey/1765619 – Amitesh

回答

1

我用一个用户控件来封装我的技术(抱歉VB)。基本上,我将对话框href中的确认按钮设置为gridview命令的原始href。

标记:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ConfirmModal.ascx.vb" Inherits="controls_ConfirmModal" %> 

    <script type="text/javascript"> 

     function <%=Me.ID%>(sender,n) { 

      $(document).ready(function() 
      { 
       $('#<%=Me.ID %>Confirm').attr('href',sender.href); 
       $("#<%=Me.ID %>Body").html(function() { 
        return $(this).html().replace("{0}", n); 
       }); 
       $('#<%=Me.ID %>').modal('show'); 

      }); 
      return false; 
     } 

    </script> 

    <div class="modal fade" id="<%=Me.ID%>"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title"><%=Me.Title %></h4> 
      </div> 
      <div id="<%=Me.ID %>Body" class="modal-body"> 
      <asp:PlaceHolder runat="server" ID="pBody"> 
      </asp:PlaceHolder> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <a id="<%=Me.ID %>Confirm" type="button" class="<%=Me.ButtonClass %>"><%=Me.ConfirmButtonText %></a> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

代码隐藏:

Partial Class controls_ConfirmModal 
    Inherits System.Web.UI.UserControl 

    Private m_BodyTemplate As ITemplate = Nothing 

    Private m_ButtonClass As String = "btn btn-primary" 
    Public Property ButtonClass() As String 
     Get 
      Return m_ButtonClass 
     End Get 
     Set(ByVal value As String) 
      m_ButtonClass = value 
     End Set 
    End Property 

    Private m_Body As String = "" 
    Public Property Body() As String 
     Get 
      Return m_Body 
     End Get 
     Set(ByVal value As String) 
      m_Body = value 
     End Set 
    End Property 

    Private m_ConfirmButtonText As String = "Confirm" 
    Public Property ConfirmButtonText() As String 
     Get 
      Return m_ConfirmButtonText 
     End Get 
     Set(ByVal value As String) 
      m_ConfirmButtonText = value 
     End Set 
    End Property 

    Private m_Title As String = "Modal Title" 
    Public Property Title() As String 
     Get 
      Return m_Title 
     End Get 
     Set(ByVal value As String) 
      m_Title = value 
     End Set 
    End Property 

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init 

     If Not (Me.BodyTemplate Is Nothing) Then 
      Dim container As New BodyContainer("") 
      Me.BodyTemplate.InstantiateIn(container) 
      pBody.Controls.Add(container) 
     Else 
      Dim display As New LiteralControl 
      display.Text = "<p>" & Me.Body & "</p>" 
      pBody.Controls.Add(display) 
     End If 

    End Sub 

    <TemplateContainer(GetType(BodyContainer))> <PersistenceMode(PersistenceMode.InnerProperty)> Public Property BodyTemplate() As ITemplate 
     Get 
      Return m_BodyTemplate 
     End Get 
     Set(ByVal value As ITemplate) 
      m_BodyTemplate = value 
     End Set 
    End Property 

    Public Class BodyContainer 
     Inherits Control 
     Implements INamingContainer 

     Private m_Body As String 
     Friend Sub New(ByVal Body As String) 
      Me.Body = Body 
     End Sub 

     Public Property Body() As String 
      Get 
       Return m_Body 
      End Get 
      Set(ByVal value As String) 
       m_Body = value 
      End Set 
     End Property 

    End Class 

End Class 

用法1(简单)

在页某处:

<ics:ConfirmModal runat="server" ID="ArchiveConfirmModal" Title="Archive Campaign?" ConfirmButtonText="Archive" Body="Are you sure you wish to archive the campaign: {0}" ></ics:ConfirmModal> 

在gridview的:

<asp:LinkButton runat="server" Text="Archive" CommandName="Update" OnClientClick="return ArchiveConfirmModal(this)"></asp:LinkButton> 

用法2(高级)

在某处页:

<ics:ConfirmModal runat="server" ID="DeleteConfirmModal" Title="Delete Campaign?" ConfirmButtonText="Delete" ButtonClass="btn btn-danger" > 
    <BodyTemplate> 
     <p>Are you sure you wish to delete <strong>{0}</strong>? This cannot be undone!</p> 
     <p class="text-muted">This will also remove any associated autoresponders and any scheduled sends will fail.</p> 
    </BodyTemplate> 
</ics:ConfirmModal> 

在GridView控件:

<asp:LinkButton runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" OnClientClick=<%# Eval("CampaignName", "return DeleteConfirmModal(this,""{0}"");") %> CssClass="glyphicon glyphicon-remove" ></asp:LinkButton>