2014-02-20 45 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>