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.
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.
// 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
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.
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?
Member
16 Points
94 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" />Participant
1670 Points
640 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
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
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
16 Points
94 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.
Participant
1670 Points
640 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
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
16 Points
94 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