locked
How to implement the modal? RRS feed

  • Question

  • User662762443 posted

    How to apply the modal function in my code structure to display the centralized page?

    <!DOCTYPE html>
    
    <html lang="pt-br">
    <head>
        <title>Emission of vouchers </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container form-group col-md-12">
            <div class="row">
                <div class="form-group col-md-3"></div>
    
                <div class="form-group col-md-5">
                    <div class="clearfix"></div>
                    <div class="form-group">
                        
                    </div>
                    <div class="panel panel-danger">
                        <div class="panel-heading"></div>
                        <h5 class="text-center"><strong>BNES CORPORATE</strong></h5>
                        <h5 class="text-center"><strong>Payment and Electronic Transfers</strong></h5>
                        <h5 class="text-center"><strong>PAYMENT: Deposit</strong></h5>
                        <form class="form-horizontal" action="/action_page.php">
                            <div class="form-group">
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">Holder: </label>
                               
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">
    Bar code:</label>
                            </div>
                            <div class="form-group">
    
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">
    Payday:</label>
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">Document Value:</label>
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">Protocol:</label>
                            </div>
                            <div class="form-group">
                               <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">Register:</label>
                            </div>
                            <div class="form-group">
                                <label class="control-label  col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label>
                            </div>
                        </form>
    
                    </div>
    
                    <div class="pull-right">
                        <button class="btn btn-success" id="btnImprimir" type="button"><p>PRINT <span class="glyphicon glyphicon-print"></span></p></button>
                    </div>
                </div>
    
                <div class="form-group col-md-3"></div>
            </div>
        </div>
    
    </body>
    </html>

    The idea is that when I click the print button inside a gridview it calls that page that I posted just above and display the data via the label bringing from the database, but so far I'm hooked on the modal part.

    Class of the click event of my button that calls the top page.

    protected void ImgPrint_Click (object sender, EventArgs, and)
            {
                Response.Redirect ("frmPrint.aspx");
            }

    my method BUTTON html:

    <ItemTemplate>
                                                                             <asp: LinkButton ID = "imgPrint" runat = "server" CausesValidation = "false" CommandArgument = '<% # Eval ("Flag")%>'
                                                                                     CommandName = "Print" CssClass = "iconesTable icon_print" OnClick = "ImgPrint_Click" ToolTip = "Print" />
    Thursday, October 18, 2018 3:09 AM

Answers

  • User-893317190 posted

    Hi rtaVix,

    It seems you expect that  when clicking LinkButton imgPrint, the page you gave above will show as model pop up and when you click the button in the page it will post to action.php.

    If so , you could try the code below.

    <form id="form1" runat="server"  >
              <div class="container ">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    
                <Columns>
                    <asp:TemplateField HeaderText="flag">
                        <ItemTemplate>
    <!-- if you want to get commandName and CommandArgument please OnCommand event instead of OnClick event--> <asp:LinkButton ID = "imgPrint" runat = "server" CausesValidation = "false" CommandArgument = '<%# Eval("Flag")%>' OnCommand="imgPrint_Command" CommandName = "Print" CssClass = "iconesTable icon_print" ToolTip = "Print" Text="show"/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div > <div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title " id="myModalLabel">edit </h4> </div> <div class="modal-body"> <div class="container form-group col-md-12"> <div class="row"> <div class="form-inline"> <div class="form-group col-md-3"></div> <div class="form-group col-md-5"> <div class="clearfix"></div> <div class="form-group"> </div> <div class="panel panel-danger"> <div class="panel-heading"><img src="http://internet.sefaz.es.gov.br/imagens/topo_brasao.png" class="img-responsive center-block" alt="Cinque Terre"><h4 class="text-center">BNES SA</h4></div> <h5 class="text-center"><strong>BNES CORPORATE</strong></h5> <h5 class="text-center"><strong>Payment and Electronic Transfers</strong></h5> <h5 class="text-center"><strong>PAYMENT: Deposit</strong></h5> <%-- <form class="form-horizontal" action="/action_page.php"> please don't use form label here ,because html doesn't allow nested form,you could submit to action_page.php using js --%> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Holder: </label><asp:TextBox ID="input1" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal"> Bar code:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal"> Payday:</label> <asp:TextBox ID="input2" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Document Value:</label> <asp:TextBox ID="input3" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Protocol:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Register:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label> </div> <%-- </form>--%> <div class="pull-right"> <button class="btn btn-success" id="btnImprimir" type="button"><p>PRINT <span class="glyphicon glyphicon-print"></span></p></button> </div> </div> </div> </div> <div class="form-group col-md-3"></div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script> $(function () {

    // bind click event to the button btnImprimir and when your click it , the form will post to page_action.php
    // because I change the action attribute of the form to page_action.php $("#btnImprimir").click( function () { $("#form1").attr("action", "/page_action.php"); $("#form1").submit(); } ) }) </script> </form>

    Code behind.

      protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    ArrayList list = new ArrayList();
                    list.Add(new { Flag = "myflag" });
                    GridView1.DataSource =list;
                    GridView1.DataBind();
                }
            }
    
            protected void imgPrint_Command(object sender, CommandEventArgs e)
            {
                if (e.CommandName == "Print")
                {
                    //get argument
                    string arg = e.CommandArgument.ToString();
    
                    //simulate data from database
                    input1.Text = "input1's datafromDatabase";
                    input2.Text = "input2's datafromDatabase";
                    input3.Text = "input3's datafromDatabase";
                    //show the model pop up
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "$('#myEditModal').modal('show')", true);
                }
            }
        }

    And in my page_action.php (I use an aspx instead) , I try to receive the posted page to see whether it could receive the data.I write

      Response.Write(Request["input1"]);

    About  ScriptManager.RegisterStartupScript , it is used to register script in aspx. Please refer to https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.scriptmanager.registerstartupscript?view=netframework-4.7.2

    About bootstrap's modal ,please refer to https://getbootstrap.com/docs/4.1/components/modal/

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 19, 2018 2:49 AM

All replies

  • User-893317190 posted

    Hi rtaVix,

    It seems you expect that  when clicking LinkButton imgPrint, the page you gave above will show as model pop up and when you click the button in the page it will post to action.php.

    If so , you could try the code below.

    <form id="form1" runat="server"  >
              <div class="container ">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    
                <Columns>
                    <asp:TemplateField HeaderText="flag">
                        <ItemTemplate>
    <!-- if you want to get commandName and CommandArgument please OnCommand event instead of OnClick event--> <asp:LinkButton ID = "imgPrint" runat = "server" CausesValidation = "false" CommandArgument = '<%# Eval("Flag")%>' OnCommand="imgPrint_Command" CommandName = "Print" CssClass = "iconesTable icon_print" ToolTip = "Print" Text="show"/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div > <div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header bg-primary"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title " id="myModalLabel">edit </h4> </div> <div class="modal-body"> <div class="container form-group col-md-12"> <div class="row"> <div class="form-inline"> <div class="form-group col-md-3"></div> <div class="form-group col-md-5"> <div class="clearfix"></div> <div class="form-group"> </div> <div class="panel panel-danger"> <div class="panel-heading"><img src="http://internet.sefaz.es.gov.br/imagens/topo_brasao.png" class="img-responsive center-block" alt="Cinque Terre"><h4 class="text-center">BNES SA</h4></div> <h5 class="text-center"><strong>BNES CORPORATE</strong></h5> <h5 class="text-center"><strong>Payment and Electronic Transfers</strong></h5> <h5 class="text-center"><strong>PAYMENT: Deposit</strong></h5> <%-- <form class="form-horizontal" action="/action_page.php"> please don't use form label here ,because html doesn't allow nested form,you could submit to action_page.php using js --%> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Holder: </label><asp:TextBox ID="input1" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal"> Bar code:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal"> Payday:</label> <asp:TextBox ID="input2" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Document Value:</label> <asp:TextBox ID="input3" CssClass="form-control" runat="server"></asp:TextBox> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Protocol:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Register:</label> </div> <div class="form-group"> <label class="control-label col-sm-3 text-align: left " style="font-weight: normal">Emissao:</label> </div> <%-- </form>--%> <div class="pull-right"> <button class="btn btn-success" id="btnImprimir" type="button"><p>PRINT <span class="glyphicon glyphicon-print"></span></p></button> </div> </div> </div> </div> <div class="form-group col-md-3"></div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script> $(function () {

    // bind click event to the button btnImprimir and when your click it , the form will post to page_action.php
    // because I change the action attribute of the form to page_action.php $("#btnImprimir").click( function () { $("#form1").attr("action", "/page_action.php"); $("#form1").submit(); } ) }) </script> </form>

    Code behind.

      protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    ArrayList list = new ArrayList();
                    list.Add(new { Flag = "myflag" });
                    GridView1.DataSource =list;
                    GridView1.DataBind();
                }
            }
    
            protected void imgPrint_Command(object sender, CommandEventArgs e)
            {
                if (e.CommandName == "Print")
                {
                    //get argument
                    string arg = e.CommandArgument.ToString();
    
                    //simulate data from database
                    input1.Text = "input1's datafromDatabase";
                    input2.Text = "input2's datafromDatabase";
                    input3.Text = "input3's datafromDatabase";
                    //show the model pop up
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "popup", "$('#myEditModal').modal('show')", true);
                }
            }
        }

    And in my page_action.php (I use an aspx instead) , I try to receive the posted page to see whether it could receive the data.I write

      Response.Write(Request["input1"]);

    About  ScriptManager.RegisterStartupScript , it is used to register script in aspx. Please refer to https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.scriptmanager.registerstartupscript?view=netframework-4.7.2

    About bootstrap's modal ,please refer to https://getbootstrap.com/docs/4.1/components/modal/

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 19, 2018 2:49 AM
  • User662762443 posted

    Ackerly Xu, could you kindly remove the part of the image on your test? Because it should not appear, in his image ended up showing why I unintentionally posted the coat of arms of the image rsrs.

    Thursday, October 25, 2018 6:43 PM
  • User-893317190 posted

    Hi rtaVix,

    I'm sorry , I have removed the image.

    Best regards,

    Ackerly Xu

    Tuesday, October 30, 2018 2:56 AM
  • User662762443 posted

    I accidentally put it in, but I also removed from mine, because it is a state that has its principles and we have no problems, I removed mine too. Could you help me out on this other Ackerly Xu topic?

    https://forums.asp.net/t/2148427.aspx?+Doubt+when+loading+database+information

    Thank you very much for your help, which was very important.

    Regards, RtaVix

    Tuesday, October 30, 2018 1:14 PM