Controls and Events in ASP.NET Web Forms


Exemplo com aplicação de Bootstrap Modal Plugin


<%@ Register Src="~/Controls/ModalPopupContent.ascx" TagPrefix="uc1" TagName="ModalPopupContent" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Bootstrap Modal Using Control and Events</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</head>
<body>
    
    <form id="form1" runat="server">

        <div class="container">
            <h5>Bootstrap Modal Popup Using Control and Events</h5>

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

            <uc1:ModalPopupContent runat="server" ID="ModalPopupContent" OnReadPopUpArgs="ReadPopUpArgs" />
        </div>
        <br />
        <asp:Label ID="lblShowContent" runat="server" Visible="false"></asp:Label>
    </form>
</body>

</html>

Code-behind
protected void Page_Load(object sender, EventArgs e)
        {
            lblShowContent.Text = "Popup Content: ";
        }

        protected void ReadPopUpArgs(object sender, PopupEventArgs e)
        {

            lblShowContent.Visible = !e.PopUpArgs.Count.Equals(0);

            foreach (var item in e.PopUpArgs)
            {
                lblShowContent.Text += item.ToString();
            }

        }

User Control

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p id="pContentText" runat="server">This is a small modal.</p>
            </div>
            <div class="modal-footer">
                <asp:Button ID="Button1" runat="server" Text="Close" CssClass="btn btn-default" OnClick="btnClose_Click" />
            </div>
        </div>
    </div>
</div>

Code-behind
//public event ReadPopUpArgsEventHandler ReadPopUpArgs;
        public event EventHandler<popupeventargs> ReadPopUpArgs;
        
        protected void btnClose_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "HideMyModal", "$('#myModal').modal('hide');", true);

            if (ReadPopUpArgs != null)
            {
                
                ReadPopUpArgs(this, new PopupEventArgs { PopUpArgs = new List { pContentText.InnerText } });
            }
        }

Events

public class PopupEventArgs : EventArgs
    {
        public ICollection<string> PopUpArgs { get; set; }
    }

    public delegate void ReadPopUpArgsEventHandler(object sender, PopupEventArgs popUpArgs);


Refêrencia: How To Create a Modal BoxBootstrap Modal Plugin
Licença CC BY-SA 4.0 Silvia Pinhão Lopes, 28.12.17
Print Friendly and PDF

Sem comentários:

Com tecnologia do Blogger.