1
Answer

Open Another page In bootstrap modal popup

Aktham Mahmoud

Aktham Mahmoud
5y
6k
1
Greeting all
 
In my web application
 
I designed shopping cart in sperated aspx page.
 
when a user select a product and add to basket, a selecrted product added to basket successfully and redirect him to basket page.
 
I havent problem if redirect or not.
 
I am tring to show a baket aspx page as bootstrap modal popup.
 
am tring a video link to designe a basket
 
https://www.youtube.com/watch?v=Xb_4nWR2CMI
 
and I followed many ways to call a aspx page as modal popup but no way..
 
See Code below:
 
(1) userbasket.aspx
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="userbasket.aspx.cs" Inherits="WebApplication1.userbaasket" %>    
  2. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
  3. <div id="myModal" class="modal fade">    
  4.             <div class="modal-dialog">    
  5.                 <div class="modal-content">    
  6.                     <div class="modal-header">    
  7.                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>    
  8.                         <h4 class="modal-title">Article for C# Corner</h4>    
  9.                     </div>    
  10.                     <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">    
  11.                         <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>    
  12.        
  13. <asp:Label ID="Lb_Cbasket" runat="server" Text=""></asp:Label>         
  14.     <br />    
  15.     
  16.     <asp:GridView ID="Gvusrbasket" runat="server" AutoGenerateColumns="False" EmptyDataText="Sorry! No Items Added to your basket.">    
  17.         <Columns>    
  18.     
  19.             <asp:TemplateField HeaderText="S_No">    
  20.                 <ItemTemplate>    
  21.                     <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>'></asp:Label>    
  22.                 </ItemTemplate>    
  23.             </asp:TemplateField>    
  24.             <asp:TemplateField HeaderText="Product Code">    
  25.                 <ItemTemplate>    
  26.                     <asp:Label ID="Label2" runat="server" Text='<%#Eval("Pro_CodeId") %>'></asp:Label>    
  27.                 </ItemTemplate>    
  28.                 <ItemStyle HorizontalAlign="Center" />    
  29.             </asp:TemplateField>    
  30.             <asp:TemplateField HeaderText="Name">    
  31.                 <ItemTemplate>    
  32.                     <asp:Label ID="Label3" runat="server" Text='<%#Eval("P_Name") %>'></asp:Label>    
  33.                 </ItemTemplate>    
  34.                 <ItemStyle HorizontalAlign="Center" />    
  35.             </asp:TemplateField>    
  36.             <asp:TemplateField HeaderText="Price">    
  37.                 <ItemTemplate>    
  38.                     <asp:Label ID="Label4" runat="server" Text='<%#Eval("P_Price") %>'></asp:Label>    
  39.                 </ItemTemplate>    
  40.                 <ItemStyle HorizontalAlign="Center" />    
  41.             </asp:TemplateField>    
  42.             <asp:TemplateField>    
  43.                 <ItemTemplate>    
  44.                         <div class="col-2 col-sm-2 col-md-2 text-right">    
  45.                                 <button type="button" class="btn btn-outline-danger btn-xs">    
  46.                                     <i class="fa fa-trash" aria-hidden="true"></i>    
  47.     
  48.                                 </button>    
  49.                             </div>     
  50.                 </ItemTemplate>    
  51.             </asp:TemplateField>    
  52.         </Columns>    
  53.     </asp:GridView>    
  54.     <asp:HyperLink ID="cshc" runat="server" Text="Continoue Shopping" CssClass="btn-outline-warning"></asp:HyperLink>    
  55.                             </div>    
  56.                     <div class="modal-footer">    
  57.                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>    
  58.                             
  59.                     </div>    
  60.                 </div>    
  61.             </div>    
  62.         </div>    
  63. </asp:Content>   
(2) userbasket.aspx c# code
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.UI;    
  6. using System.Web.UI.WebControls;    
  7. using System.Data;    
  8. using System.Data.SqlClient;    
  9. using System.Web.Configuration;    
  10. using System.Web.Security;    
  11.     
  12. namespace WebApplication1    
  13. {    
  14.     public partial class userbaasket : System.Web.UI.Page    
  15.     {    
  16.         protected void Page_Load(object sender, EventArgs e)    
  17.         {    
  18.             if (!IsPostBack)    
  19.             {    
  20.                 DataTable dt = new DataTable();    
  21.                 DataRow dr;    
  22.                 dt.Columns.Add("Id");    
  23.                 dt.Columns.Add("Pro_CodeId");    
  24.                 dt.Columns.Add("P_Name");    
  25.                 dt.Columns.Add("P_Price");    
  26.                 dt.Columns.Add("cost");    
  27.                 dt.Columns.Add("totalcost");    
  28.     
  29.                 if (Request.QueryString["id"] != null)    
  30.                 {    
  31.                     if (Session["bskitems"] == null)    
  32.                     {    
  33.     
  34.                         dr = dt.NewRow();    
  35.                         //String mycon = "Data Source=HP-PC\\SQLEXPRESS;Initial Catalog=haritiShopping;Integrated Security=True";    
  36.                         string mycon = @"Data Source=(local)\SQLEXPRESS;AttachDbFilename=|DataDirectory|\DbCh.mdf;Integrated Security=True";    
  37.     
  38.                         SqlConnection scon = new SqlConnection(mycon);    
  39.                         String myquery = "select * from Products where Id=" + Request.QueryString["id"];    
  40.                         SqlCommand cmd = new SqlCommand();    
  41.                         cmd.CommandText = myquery;    
  42.                         cmd.Connection = scon;    
  43.                         SqlDataAdapter da = new SqlDataAdapter();    
  44.                         da.SelectCommand = cmd;    
  45.                         DataSet ds = new DataSet();    
  46.                         da.Fill(ds);    
  47.                         dr["Id"] = 1;    
  48.                         dr["Pro_CodeId"] = ds.Tables[0].Rows[0]["Pro_CodeId"].ToString();    
  49.                         dr["P_Name"] = ds.Tables[0].Rows[0]["P_Name"].ToString();    
  50.                         dr["P_Price"] = ds.Tables[0].Rows[0]["P_Price"].ToString();    
  51.                         dt.Rows.Add(dr);    
  52.                         Gvusrbasket.DataSource = dt;    
  53.                         Gvusrbasket.DataBind();    
  54.                         Session["bskitems"] = dt;    
  55.                     }    
  56.                     else    
  57.                     {    
  58.     
  59.                         dt = (DataTable)Session["bskitems"];    
  60.                         int sr;    
  61.                         sr = dt.Rows.Count;    
  62.     
  63.                         dr = dt.NewRow();    
  64.                         string mycon = @"Data Source=(local)\SQLEXPRESS;AttachDbFilename=|DataDirectory|\DbCh.mdf;Integrated Security=True";    
  65.                         SqlConnection scon = new SqlConnection(mycon);    
  66.                         String myquery = "select * from Products where Id=" + Request.QueryString["id"];    
  67.                         SqlCommand cmd = new SqlCommand();    
  68.                         cmd.CommandText = myquery;    
  69.                         cmd.Connection = scon;    
  70.                         SqlDataAdapter da = new SqlDataAdapter();    
  71.                         da.SelectCommand = cmd;    
  72.                         DataSet ds = new DataSet();    
  73.                         da.Fill(ds);    
  74.                         dr["Id"] = sr + 1;    
  75.                         dr["Pro_CodeId"] = ds.Tables[0].Rows[0]["Pro_CodeId"].ToString();    
  76.                         dr["P_Name"] = ds.Tables[0].Rows[0]["P_Name"].ToString();    
  77.                         dr["P_Price"] = ds.Tables[0].Rows[0]["P_Price"].ToString();    
  78.                         dt.Rows.Add(dr);    
  79.                         Gvusrbasket.DataSource = dt;    
  80.                         Gvusrbasket.DataBind();    
  81.                         Session["bskitems"] = dt;    
  82.     
  83.                     }    
  84.                 }    
  85.                 else    
  86.                 {    
  87.                     dt = (DataTable)Session["bskitems"];    
  88.                     Gvusrbasket.DataSource = dt;    
  89.                     Gvusrbasket.DataBind();    
  90.     
  91.                 }    
  92.             }    
  93.         }    
  94.     }    
  95. }  
(3) Products page
  1. <asp:ListView ID="ListView1" runat="server" DataSourceID="SDS_Pro" DataKeyNames="Id" GroupItemCount="4" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1" OnItemCommand="ListView1_ItemCommand">    
  2.      <EmptyDataTemplate>    
  3.                 <table id="Table1" runat="server" style="">    
  4.                     <tr>    
  5.                         <td><p style="color:red; font-size:medium">Sorry! No Products avialabe in selected Category to show it, Maybe under price modifying Or update Content..</p><br /><asp:HyperLink runat="server" ID="HYBback" Text="Back To Categories Page" NavigateUrl="~/categories.aspx" CssClass="btn-outline-warning"></asp:HyperLink></td>       
  6.                     
  7.                     </tr>    
  8.                 </table>    
  9.             </EmptyDataTemplate>    
  10.             <LayoutTemplate>    
  11.                 <div class="row text-center">    
  12.                     <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>    
  13.                 </div>    
  14.             </LayoutTemplate>    
  15.             <GroupTemplate>    
  16.                 <div class="row text-center screenwidth">    
  17.                     <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>    
  18.                 </div>    
  19.             </GroupTemplate>    
  20.     <ItemTemplate>    
  21.                              <div class="col-lg-3 d-flex align-items-stretch">      
  22.                         <div class="card">      
  23.                             <div class="card-header" style="font-size:x-large;color:brown">      
  24.                                 <asp:Label ID="Label3" runat="server" Text='<%#Eval("P_Name")%>'></asp:Label>      
  25.                             </div>      
  26.                             <div class="card-body">      
  27.                                 <asp:Image ID="Image1"  runat="server" ImageUrl='<%#Eval("P_photo") %>'  class="rounded-circle" Height="100%" Width="100%"/>  <br />    
  28.                                 Product Code:  <%# Eval("Pro_CodeId") %> <br />     
  29.                                 <p class="dsc"><%#Eval("Ingredients") %></p>    
  30.                                  <br />    
  31.                                 Price:    
  32.                                 <asp:Label ID="Label1" runat="server" Text='<%# Eval("P_Price") %>' /><br />    
  33.                                 Quatity:  <asp:DropDownList ID="DDR_Q" runat="server" CssClass="dropdown-menu">    
  34.                          <asp:ListItem>1</asp:ListItem>    
  35.                           <asp:ListItem>2</asp:ListItem>    
  36.                            <asp:ListItem>3</asp:ListItem>    
  37.                           <asp:ListItem>4</asp:ListItem>    
  38.                                     <asp:ListItem>5</asp:ListItem>    
  39.                           <asp:ListItem>6</asp:ListItem>    
  40.                                     <asp:ListItem>7</asp:ListItem>    
  41.                           <asp:ListItem>8</asp:ListItem>    
  42.                                     <asp:ListItem>9</asp:ListItem>    
  43.                           <asp:ListItem>10</asp:ListItem>    
  44.                                       </asp:DropDownList>    
  45.                             </div>      
  46.                             <div class="card-footer">      
  47.                     <asp:LinkButton ID="LinkButton1" runat="server" Text="Order Me :)" CommandName="addtocart" CommandArgument='<%#Eval("Id") %>' ></asp:LinkButton>           
  48.     
  49.                                  </div>      
  50.                         </div>      
  51.                     </div>  
  52.     </ItemTemplate>   
  53. </asp:ListView>  
As you can see
 
<asp:LinkButton ID="LinkButton1" runat="server" Text="Order Me :)" CommandName="addtocart" CommandArgument='<%#Eval("Id") %>' ></asp:LinkButton>
 
So how to add
 
href="#myModal" data-toggle="modal"
 
Like that sample
 
Open Another Gridview in Pop-up using Bootstrap Modal Pop-up
 
https://www.c-sharpcorner.com/UploadFile/77a82c/open-another-gridview-in-pop-up-using-bootstrap-modal-pop-up/
 
Nothing success with me,,
 
any help please
Thanks
Answers (1)
Next Recommended Forum