How to implement the modal? [Answered]RSS

4 replies

Last post Oct 30, 2018 01:14 PM by rtaVix

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

rtaVix

Member

39 Points

120 Posts

How to implement the modal?

Oct 18, 2018 03:09 AM|rtaVix|LINK

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

Ackerly Xu

Contributor

3450 Points

1300 Posts

Re: How to implement the modal?

Oct 19, 2018 02:49 AM|Ackerly Xu|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
rtaVix
Member

39 Points

120 Posts

Re: How to implement the modal?

Oct 25, 2018 06:43 PM|rtaVix|LINK

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.
- Reply
Ackerly Xu
Contributor

3450 Points

1300 Posts

Re: How to implement the modal?

Oct 30, 2018 02:56 AM|Ackerly Xu|LINK

Hi rtaVix,

I'm sorry , I have removed the image.

Best regards,

Ackerly Xu

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
rtaVix
Member

39 Points

120 Posts

Re: How to implement the modal?

Oct 30, 2018 01:14 PM|rtaVix|LINK

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

‹ Previous Thread|Next Thread ›