I'm making my first webshop. I want to load all my products from my sql database onto my page. so I use a listvieuw. but it is not responsive. I want my products next to each other on a medium screen and under each other on a small size screen like a phone
I tried to use bootstrap class's like "row" but now every new generated "template" is a row and they wil stand under each other on every screen size..if that makes sense?
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:ListView ID="ListView1" runat="server" >
<ItemTemplate>
<div class="row">
<asp:Button ID="Button1" runat="server" Text='<%#Eval("ProductNaam") %>' />
<br />
<br />
<div><%#Eval("ProductName") %></div>
<br />
<br />
<div><%#Eval("description") %></div>
<br />
<br />
<div><%#Eval("price") %></div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection objCn = new SqlConnection())
{
objCn.ConnectionString = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
using (SqlCommand objCmd = new SqlCommand())
{
objCmd.Connection = objCn;
objCmd.CommandType = System.Data.CommandType.Text;
objCmd.CommandText = "SELECT * FROM TblProducten;";
objCn.Open();
SqlDataAdapter Adapter = new SqlDataAdapter();
Adapter.SelectCommand = objCmd;
DataSet Myds = new DataSet();
Adapter.Fill(Myds);
ListView1.DataSource = Myds;
ListView1.DataBind();
}
}
}
I expected it to be responsive but it was not like I had already described
Wrap your "asp:ListView" in a div with the "row" class, then use the grid system columns to get the behavior you want.
The example below should help you to get started:
<div class="row">
<asp:ListView runat="server" ID="ListView1">
<ItemTemplate>
<div class="col-sm-4 border p-3">
<asp:Button ID="Button1" runat="server" Text='<%#Eval("ProductNaam") %>' />
<br />
<br />
<div><%#Eval("ProductName") %></div>
<br />
<br />
<div><%#Eval("description") %></div>
<br />
<br />
<div><%#Eval("price") %></div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
As #Ben already mentioned, read the bootstrap docs around this subject:
https://getbootstrap.com/docs/4.2/layout/grid/
Related
So, I have a web form in asp.net. On that web form, there is a GridView. When the user clicks the view details on gridview, I want a modal popup to show the list of stores in that category. I have been trying different stuff but the modal does not show up. Below is my code for front end:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="DetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<asp:Label ID="lblHead" runat="server" Text="List of stores:" CssClass="h4"></asp:Label>
</div>
<div class="modal-body">
<asp:Table ID="tblJobs" runat="server" CssClass="tblStoresView" GridLines="Both" CellPadding="6" CellSpacing="6" Visible="False">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="Label1" runat="server" Text="Store Name"></asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:Label ID="lblPost" runat="server" Text=""></asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="Label2" runat="server" Text="Floor"></asp:Label>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Label ID="Label5" runat="server" Text="Store number"></asp:Label>
</asp:TableCell>
<asp:TableCell runat="server">
<asp:Label ID="lblType" runat="server" Text=""></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="BtnView" CssClass="button" runat="server" Text="View" Visible="False" OnClick="BtnView_Click" />
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I am trying to view the modal on grid's selectindexchanged event. The code I am using is as follows:
protected void gridStores_SelectedIndexChanged(object sender, EventArgs e)
{
tblStores.Visible = true;
BtnView.Visible = true;
GridViewRow row = gridStores.SelectedRow;
conn = new SqlConnection();
conn.ConnectionString = connString;
sqlcmd = conn.CreateCommand();
string query = "select * from [stores] where cat = #cat";
sqlcmd = new SqlCommand(query, conn);
sqlcmd.Parameters.AddWithValue("#cat", row.Cells[1].Text);
conn.Open();
da = new SqlDataAdapter(sqlcmd);
ds = new DataSet();
da.Fill(ds, "StoresProject");
dt = ds.Tables[0];
foreach (DataRow dr in dt.Rows)
{
lblName.Text = dr["store name"].ToString();
lblFloow.Text = dr["floor"].ToString();
lblNumber.Text = dr["store number"].ToString();
}
}
Can someone please tell me why the modal popup is not showing up? What am i doing wrong? Any help will be highly appreciated. Thanks!
UPDATE: I tried to display the modal without any grid and backend C# code, by using the simple template from W3Schools. The modal still does not popup at all.
So I solved my problem. It occurred to me that if I enter $(#DetailsModal).modal() in the console window of chrome, the modal appears. So I should try calling it the same way in my site.
So, I wrote a javascript function at the end of my page:
<script>
function openModal(){
$('#DetailsModal').modal();
}
</script>
And in the code-behind I called by using:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openModal();", true);
And then after that when I tried opening the modal, it appeared correctly with the correct data.
Thanks to everyone who took time out of their schedule to give suggestions.
I have a ListView & a DataTable (with Columns and Rows) that I have set as the Listview's DataSource & binded it, but my ListView will not display the data. ANy help? Thanks very much in advance
In thing.aspx :
<asp:ListView ID="lvInstructors" runat="server"
AutoGenerateColumns="False"
ShowRegularGridWhenEmpty="False"
EmptyDataText="No Sessions to Display."
OnRowDataBound="lvDataBound"
OnRowCommand="lvCommand"
Visible="true">
<LayoutTemplate>
<div class="container" id="mainContent">
<asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="row instructorItem">
<div class="col-2 sessionStartTimeDiv">
<p class="sessionStartTime"><%=SessionStartTime %></p>
</div>
<div class="col-2 instructorHeadshotDiv">
<asp:Image class="instructorHeadshot" runat="server" src="" />
</div>
<div class="col-5 sessionInfoDiv">
<h3 class="instructorName"><%=InstructorName%></h3>
<p class="sessionInfo"><%=SessionInfo%></p>
</div>
<div class="col-3 checkInBtnDiv">
<asp:Button class="checkInBtn" OnClick="CheckInBtn_Click"
ID="checkInBtn" runat="server" Text="CHECK-IN" />
</div>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<br /><br />No Sessions to Display
</EmptyDataTemplate>
</asp:ListView>
In thing.aspx.cs :
//Make Data table to hold ListViewItem Data
DataTable dt = new DataTable();
dt.Columns.Add("SessionStartTime");
dt.Columns.Add("InstructorHeadshot");
dt.Columns.Add("InstructorName");
dt.Columns.Add("SessionInfo");
DataRow dr = dt.NewRow();
dr["SessionStartTime"] = "1:00:";
//dr["InstructorImage"] = "Bob";
dr["InstructorName"] = "Bob";
dr["SessionInfo"] = "Computer Room 2";
dt.Rows.Add(dr);
//Bind datatable to lv
lvInstructors.DataSource = dt;
lvInstructors.DataBind();
SideQuestion: (Not sure I need one here, but) When should I use a ListViewItem ?
You want to bind - # - and Eval.
<%# Eval("SessionStartTime") %>
Use this format for the other values/columns.
I am trying to insert a comment using repeater Control
my code in html
<asp:Repeater ID="repConcerns" runat="server" OnItemCommand="post" >
<ItemTemplate >
<div class="row col-md-12">
<div class="col-sm-2" style="background-color:#808080">
<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("Pathh") %>' width="90px" Height="90px" CssClass="img-circle" title='<%#Eval("Name") %>'/> <br/><asp:LinkButton ID="LinkButton1" runat="server" Text='<%#Eval("Name") %>' CssClass="btn btn-info btn-sm" CommandName="btnMessage" CommandArgument='<%#Eval("Username") %>'></asp:LinkButton><br/>
</div>
<div class="col-sm-10" style="background-color:#808080" >
<asp:Label ID="Label1" width="100%" style="padding:7px;" runat="server" Enabled="false" Text='<%#Eval("Title") %>'> </asp:Label>
<asp:TextBox ID="txtMessage" placeholder="Empty Post" width="100%" style="padding:7px;" runat="server" Text='<%#Eval("Detail") %>' TextMode="MultiLine" Enabled="false" Height="100px"> </asp:TextBox>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Eval("Sno") %>' />
<div class="bar"></div>
<asp:TextBox ID="txtcomment" runat="server" CssClass="form-control form-control-sm" placeholder="Comment / Write Openion Suggestion" TextMode="MultiLine" Height="40px"></asp:TextBox>
<asp:LinkButton ID="btn" runat="server" CssClass="btn btn-primary" CommandName="comment" CommandArgument='<%#Eval("Sno") %>' >Post</asp:LinkButton>
</div>
</div>
<div style="padding-bottom:10px;"></div>
<%--<br /> --%>
</ItemTemplate>
</asp:Repeater>
and C# code
protected void post(object source, RepeaterCommandEventArgs e)
{
if(e.CommandName== "comment")
{
a = e.CommandArgument.ToString();
SqlConnection con = new SqlConnection(strconn);
SqlCommand com = new SqlCommand();
com.CommandText = "insert into Comments(Sno,Comment,Username)values('" +a+ "','" + txtcomment.Text + "','" + username + "')";
con.Open();
}
}
I do not know how to insert into table "Comment".
I have made a "Page" in which their are wall posts. I have included an option for Comment. The comment button appears as it should with every post. But i do not know how to insert comment in table "Comment". i am trying to insert comment with corresponding "Sno" of Posts saved in HiddenField. But when i try to write Text Box id there "txtcomment.text" it gives me error. How do i insert.
I've made some amendments to you original code - note the comments:
protected void post(object source, RepeaterCommandEventArgs e)
{
if(e.CommandName== "comment")
{
//Find TextBox Control
TextBox txt = (TextBox)e.Item.FindControl("txtcomment");
var sno = e.CommandArgument.ToString();
SqlConnection con = new SqlConnection(strconn);
SqlCommand com = new SqlCommand();
com.CommandText = "INSERT INTO Comments(Sno,Comment,Username) VALUES (#SNO, #COMMENT, #USERNAME)";
com.Connection = con;
//Add Command Parameters
com.Parameters.AddWithValue("#SNO", sno);
com.Parameters.AddWithValue("#COMMENT", txt.Text);
com.Parameters.AddWithValue("#USERNAME", username);
con.Open();
//Execute Command
com.ExecuteNonQuery();
}
}
I have a textbox which is kept inside Datalist. I need to find it via ID, so that i can insert text written to that textbox to the database.Here is my aspx page containing textbox.
<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="wholeC">
<div id="ctop">
<div id="lft_l">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
<br/>
</div>
<div id="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
<div id="lft_r">
<b>Details:</b>
<asp:Label ID="Label2" Text='<%#DataBinder.Eval(Container.DataItem,"description") %>' runat="server" />
</div>
</div>
<div id="cmt">
<asp:TextBox ID="tb_cmt" runat="server" Height="35px" Width="620" placeholder="comment.." />
<asp:Button ID="Button1" runat="server" Text="Comment" backcolor="black" BorderStyle="None" Font-Names="Consolas" Font-Overline="False"
ForeColor="White" Height="34px" Width="108px" OnClick="cmt_Click" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
The Textbox with ID="tb_cmt" is the text box i want to access in my code behind as:
protected void cmt_Click(object sender, EventArgs e)
{
// how to get the TextBox?
sq.connection();
SqlCommand cmd = new SqlCommand("insert into comment(ecomment,sid) values(#myecomment,#mysid)", sq.con);
cmd.Parameters.AddWithValue("#myecomment",tb_cmt.text)//but here tb_cmt is not recognized.
}
You can use the NamingContainer property of the button that was clicked to get the DataListItem. Then you just have to use FindControl to get the reference to your TextBox:
protected void cmt_Click(object sender, EventArgs e)
{
Button btn = (Button) sender;
DataListItem item = (DataListItem) btn.NamingContainer;
TextBox txt = (TextBox) item.FindControl("tb_cmt");
//... save
}
Here is my problem:
I want to make my code short, and a friend of mine told me that I can use DAL.
But I don't know how to use DAL. I also tried to search internet. But It doesn't
give me some simple solution. I'm a newbie using DAL
Note: I know that my select command is very short but imagine that as an
extensive data.
ASPX code
<div>
<div>
<asp:Label ID="lbl1" Text="FirstName" runat="server" />
</div>
<div>
<asp:TextBox ID="txtFName" runat="server" />
</div>
<div>
<div>
<asp:Label ID="lbl2" Text="MiddleName" runat="server" />
</div>
<div>
<asp:TextBox ID="txtMName" runat="server" />
</div>
</div>
<div>
<div>
<asp:Label ID="lbl3" Text="LastName" runat="server" />
</div>
<div>
<asp:TextBox ID="txtLName" runat="server" />
</div>
</div>
<div>
<div>
<asp:Label ID="lbl4" Text="Birthday" runat="server" />
</div>
<div>
<asp:TextBox ID="txtBday" runat="server" />
</div>
</div>
<div>
<div>
<asp:Label ID="lbl5" Text="Address" runat="server" />
</div>
<div>
<asp:TextBox ID="txtAdd" runat="server" />
</div>
</div>
</div>
ASPX.cs code
protected void Page_Load(object sender, EventArgs e)
{
SelectCommand();
}
private void SelectCommand()
{
SqlCommand sqlSelect = new SqlCommand();
sqlSelect.Connection = conn;
sqlSelect.CommandText = "select FirstName = #FirstName,MiddleName = #MiddleName,LastName = #LastName,BirthDate = #BirthDate, Address = #Address from User";
sqlSelect.CommandType = CommandType.Text;
sqlSelect.Parameters.AddWithValue("#FirstName", txtFName.Text);
sqlSelect.Parameters.AddWithValue("#MiddleName", txtFName.Text);
sqlSelect.Parameters.AddWithValue("#LastName", txtFName.Text);
sqlSelect.Parameters.AddWithValue("#BirthDate", txtBday.Text);
sqlSelect.Parameters.AddWithValue("#Address", txtAdd.Text);
conn.Open();
sqlSelect.ExecuteNonQuery();
conn.Close();
}
Try separating your purposes into separate projects.
Try reading through http://en.wikipedia.org/wiki/SOLID_(object-oriented_design). I know wikipedia is very bland but may help give you some fundamental principles on OO design.
You can always use linq to sql or entity framework and remove a lot of redundant code however it will almost likely be slower than just writing it yourself.