We Keep Coding

How could I use Content.ItemIndex in Code behind ASP.NET?

I have this code on ASPX
<div class="col-md-8 col-sm-12 text-poster-box">
<p tabindex="1">
<asp:Label ID="LabelResultName" CssClass="h3" runat="server">Name: <%# Eval("Name") %> </asp:Label>
</p>
<p tabindex="2">
<asp:Label ID="LabelResultPrice" CssClass="h3" runat="server">Price: <%# Eval("Price") %>$ </asp:Label>
</p>
<p tabindex="3">
<asp:Label ID="LabelResultSalePrice" runat="server" CssClass="h3" Visible='<%#Eval("SalePrice").ToString() != "" ? true : false %>'>New Price: <%#Eval("SalePrice")%>$</asp:Label>
</p>
<p tabindex="4">
<asp:Label ID="LabelSize" CssClass="h3" runat="server">Size: <%# Eval("Size") %></asp:Label>
</p>
<p tabindex="5">
<asp:Button ID="ButtonRemove" runat="server" CssClass="btn btn-primary-c wishlist" Text="Remove" OnClick="ButtonRemove_Click" />
</p>
<p tabindex="6">
<asp:Label ID="lblListNumber" Text='<%# Container.ItemIndex%>' runat="server" Visible="true" /></td>
</p>
</div>
and i would like to use the number given by Content.ItemIndex in Code Behind so I could remove from List<T> of objects like this:
MyList.RemoveAt("value received from Content.ItemIndex")
I have no clue if this is even possible?

I would use onitemcommand for the repeater.
For example:
<asp:Repeater id="rptYourPages" runat="server" onitemcommand="rpt_ItemCommand">
Then add CommandArgument with an Eval for the ID of the record to the button.
CommandArgument='<%# Eval("ProductID") %>'
Your Button code would look like this:
<asp:Button ID="ButtonRemove" runat="server" CssClass="btn btn-primary-c wishlist" Text="Remove" CommandArgument='<%# Eval("ProductID") %>' />
You don't need the OnClick.
In the code behind file:
protected void rpt_ItemCommand(object source, RepeaterCommandEventArgs e)
{
string sProductID = e.CommandArgument.ToString();
// Write your logic here...
}
Hope this helps.

Why Button is not working in my datalist control?

I'm using a datalist control to show product details before adding to cart. But here add to cart button is not working. How can I resolve this problem?
Here is the code of datalist control
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="DataList1_ItemCommand">
<ItemTemplate>
<div class="container" style="z-index:-1;">
<div class="wrapper" style="margin-left:400px;" >
<div class="databox effect1">
<div id="imagedata" style="padding:10px">
<asp:Image ID="product_imageLabel" runat="server" Height="300px" Width="300px"
ImageUrl='<%# "data:Image/png;base64,"
+ Convert.ToBase64String((byte[])Eval("product_image")) %>'/>
</div>
<div style="margin-top:-300px;margin-left:310px;padding:10px">
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' Font-Size="XX-Large" Font-Bold="True" />
<br/>
<asp:Label ID="product_compositionLabel" runat="server" Text='<%# Eval("product_composition") %>' Font-Size="Larger"/>
<br/>
<asp:Label ID="brand_nameLabel" runat="server" Text='<%# "Brand Name : "+Eval("brand_name") %>' Font-Size="Larger" />
<br/>
<asp:Label ID="product_stock_unitLabel" runat="server" Text='<%# Eval("product_stock_unit")+" of "+Eval("product_quantity")+" "+Eval("product_quantity_unit") %>' Font-Size="Larger"/>
<br/>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# "MRP ₹ "+Eval("product_price") %>' ForeColor="#0E8CE4" Font-Size="Larger" />
<br/>
<br/>
<asp:Label ID="Label_product_code" runat="server" Text='<%# "Product Code : "+Eval("product_code") %>' Font-Size="Larger"/>
<br/>
<asp:Button ID="Button_addtocart" runat="server" Text="Add to cart" CssClass="btn third" CommandName="addtocart" CommandArgument='<%# Eval("product_code")%>' />
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
Here is the code of c# against OnItemCommand handler
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "addtocart")
{
ClientScript.RegisterStartupScript(this.GetType(), "randomtext", "not_login()", true);
}
}

Add
onclick = "DataList1_ItemCommand"
in your HTML button code
because onclick Event Main Tips. The "onclick" event occurs when the user clicks on an element. It runs a specified line of code when you click an HTML object that has the “onclick” attribute. The event can be triggered by "object.onclick" or "object.addEventListener".

Prevent refresh page on list view button click in asp .net

I'm working on product cart page. Below is the code I'm working with. In the list view I'm getting all the products images as buttons. I want to update the carousel when any of the image in the list view clicked.
But When I click the image the page refreshes, I tried using update panel but since the button are dynamic can't able to find a proper way to handle it.
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<div style="align-content: center">
<strong>CLICK THE IMAGE TO SELECT </strong>
</div>
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="14"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>
<asp:LinkButton ID="GridBtn" runat="server" CssClass="myButton"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" /></asp:LinkButton>
</div>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="col-md-4 single_left pull-left left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<div class="flexslider">
<ul class="slides">
<li id="image3" data-thumb="">
<%--<img id="image3" src="assets/products/1_ZP244.jpg" />--%>
<img id="image" src="assets/products/1_ZP244.jpg" />
<%-- <asp:Image ID="image" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
<li id="image4" data-thumb="">
<%--<img id="image4" src="assets/products/1_ZP244.jpg" />--%>
<img id="image1" src="assets/products/1_ZP244.jpg" />
<%--<asp:Image ID="image1" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
<li id="image5" data-thumb="">
<%--<img id="image5" src="assets/products/1_ZP244.jpg" />--%>
<img id="image2" src="assets/products/1_ZP244.jpg" />
<%--<asp:Image ID="image2" src="assets/products/1_ZP244.jpg" runat="server" />--%>
</li>
</ul>
</div>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
</div>
<script>
$(".data").mouseover(function () {
var image = $(this).attr('data-image');
var image1 = $(this).attr('data-image1');
var image2 = $(this).attr('data-image2');
var name = $(this).attr('data-name');
var price = $(this).attr('data-price');
var btnID = $(this).attr('ID');
$(".left").find('#image').attr('src', image);
$(".left").find('#image1').attr('src', image1);
$(".left").find('#image2').attr('src', image2);
$(".left").find('#image3').attr('data-thumb', image);
$(".left").find('#image4').attr('data-thumb', image1);
$(".left").find('#image5').attr('data-thumb', image2);
$(".left").find('#name').text(name);
$(".left").find('#price').text(price);
$(".left").find('#price').text(price);
})
</script>

You can register button for async postback inside an updatepanel by add a new OnPreRender event on the button:
protected void btnReloadQty_PreRender(object sender, EventArgs e)
{
ScriptManager scriptMan = ScriptManager.GetCurrent(this.Page);
scriptMan.RegisterAsyncPostBackControl((LinkButton)sender);
}

How to get image from GridView using GridView_RowCommand event in c# ASP.NET

i am doing edit operation inside GridView using c# ASP.NET.i need when user will click on edit button all data will retrive from that row and display in text box but here i am unable to display the image.I am explaining my code below.
faq.aspx:
<div class="row">
<div class="col-md-6">
<label for="question" accesskey="T"><span class="required">*</span> Question</label>
<asp:TextBox ID="TextBox1" runat="server" size="30" value="" name="question" ></asp:TextBox>
<div id="noty" style="display:none;" runat="server"></div>
<label for="answer" accesskey="A"><span class="required">*</span> Answer</label>
<asp:TextBox ID="TextBox2" runat="server" size="30" value="" name="answer" ></asp:TextBox>
<div id="Div1" style="display:none;" runat="server"></div>
</div>
<div class="col-md-6 bannerimagefile">
<label for="insertimage" accesskey="B"><span class="required">*</span> Insert Image</label>
<asp:FileUpload runat="server" class="filestyle" data-size="lg" name="insertimage" id="FileUpload1" onchange="previewFile()" />
<label for="bannerimage" accesskey="V"><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<asp:Image ID="Image3" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" />
</div>
<div class="clear"></div>
<asp:Button ID="Button1" runat="server" Text="Submit" class="submit"
onclick="Button1_Click" />
</div>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="100%" CssClass="table table-striped table-bordered margin-top-zero" OnRowCommand="GridView1_RowCommand" >
<Columns>
<asp:TemplateField HeaderText="Sl No">
<ItemTemplate>
<asp:Label ID="faqid" runat="server" Text='<%#Eval("FAQ_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Question" >
<ItemTemplate>
<asp:Label ID="question" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Answer" >
<ItemTemplate>
<asp:Label ID="answer" runat="server" Text='<%#Eval("Answer") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image" >
<ItemTemplate>
<asp:Image ID="Image1" runat="server" border="0" name="bannerimage" style="width:70px; height:70px;" ImageUrl='<%# "/Upload/" + Convert.ToString(Eval("Image")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" >
<ItemTemplate>
<!--</i>
<i class="fa fa-times"></i> -->
<asp:HyperLink ID="HyperLink1" runat="server" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="Edit" CommandName="DoEdit" CommandArgument='<%# Eval("FAQ_ID") %>' ><i class="fa fa-edit"></i></asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete" CommandName="DoDelete" CommandArgument='<%# Eval("FAQ_ID") %>' ><i class="fa fa-times"></i></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
faq.aspx.cs:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
int faqID = int.Parse(e.CommandArgument.ToString());
switch (e.CommandName)
{
case "doEdit":
{
int index = Convert.ToInt32(e.CommandArgument);
TextBox1.Text = GridView1.Rows[index].Cells[1].Text;
TextBox2.Text = GridView1.Rows[index].Cells[2].Text;
HiddenField1.Value = GridView1.Rows[index].Cells[0].Text;
Image3.ImageUrl=
Button1.Text = "Update";
}
}
}
Here i need the image will retrive and set to image3 id.Please help me to solve this issue.

WHere is image3; it's not in your snippet. Please include that, but if it's in the grid, then you do:
var img3 = (Image)GridView1.Rows[index].Cells[X].FindControl("Image3");
img3.ImageUrl = "XYZ";
Direct references only work when on the page outside of a container. If inside a container, you have to use FindControl (such as detailsview.findcontrol) or if a repeatable list, you have to use FindControl from the row (or in the case of the grid, the cell).

Get row index like this:
GridViewRow gvr = (GridViewRow)(((HyperLink)e.CommandSource).NamingContainer);
int index= gvr.RowIndex;
// to get image url
string url = ((Image)gvr.FindControl("Image3")).ImageUrl;
Image3.ImageUrl= url;

Random sequence of html div tags position

There is four Div tags in this GridView with ID="NUMBER1" ID="NUMBER2" ID="NUMBER3" ID="NUMBER4" values and i want to change the sequence of their position in page randomly in every row of the gridview.
what is the best and most simple SERVER SIDE method to do this.
I'm new to asp.net using C# language.
<body>
<asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="QuesID" DataSourceID="SelectedPollSqlDataSource">
<Columns>
<asp:TemplateField HeaderText="Questions">
<ItemTemplate>
<div runat="server" id="MainDiv" class="text-right col-md-12">
<div class="row ">
<div dir="rtl" class="col-md-12 text-right">
<p runat="server" id="BodyPTag"><%#Eval("Body") %></p>
<asp:Label Visible="false" ID="QuesIDLabel" runat="server" Text='<%#Eval("QuesID") %>'></asp:Label>
</div>
</div>
<div id="NUMBER1" runat="server" class="row ">
<div class="col-md-12">
<div dir="rtl" runat="server" id="Div2" class="text-right col-md-11">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("O1") %>'></asp:Label>
</div>
<div runat="server" id="Div3" class="text-right col-md-1">
<asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" CssClass='<%#Eval("O1Css") %>' ID="O1Button" runat="server" Text="Option 1" />
</div>
</div>
</div>
<div id="NUMBER2" runat="server" class="row ">
<div class="col-md-12">
<div dir="rtl" runat="server" id="Div4" class="text-right col-md-11">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("O2") %>'></asp:Label>
</div>
<div runat="server" id="Div5" class="text-right col-md-1">
<asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" CssClass='<%#Eval("O2Css") %>' ID="O2Button" runat="server" Text="Option 2" />
</div>
</div>
</div>
<div id="NUMBER3" runat="server" class="row ">
<div class="col-md-12">
<div dir="rtl" runat="server" id="Div6" class="text-right col-md-11">
<asp:Label ID="Label3" runat="server" Text='<%#Eval("O3") %>'></asp:Label>
</div>
<div runat="server" id="Div7" class="text-right col-md-1">
<asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" CssClass='<%#Eval("O3Css") %>' ID="O3Button" runat="server" Text="Option 3" />
</div>
</div>
</div>
<div id="NUMBER4" runat="server" class="row ">
<div class="col-md-12">
<div dir="rtl" runat="server" id="Div8" class="text-right col-md-11">
<asp:Label ID="Label4" runat="server" Text='<%#Eval("O4") %>'></asp:Label>
</div>
<div runat="server" id="Div9" class="text-right col-md-1">
<asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" CssClass='<%#Eval("O4Css") %>' ID="O4Button" runat="server" Text="Option 4" />
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SelectedPollSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:GUOTSConnectionString %>" SelectCommand="SELECT DISTINCT QuesID, Body, O1, O2, O4, O3, O1Css, O2Css, O4Css, O3Css, Time, BookRange, UserID, CourseID, Code FROM Question WHERE (UserID = #userid) AND (Code = #code)">
<SelectParameters>
<asp:QueryStringParameter Name="code" QueryStringField="code" />
<asp:SessionParameter Name="userid" SessionField="userid" />
</SelectParameters>
</asp:SqlDataSource>
</body>

the following will do what you want.
Working FIDDLE here
first, change your current divs to give each row a class name we can pick out in our script, like "randomDiv". We could have used "row" but i was afraid you were using that in more places than just these divs.
<div id="NUMBER1" runat="server" class="row randomDiv">
then on document ready run the following javascript:
<script>
$(document).ready(function() {
var divs= $(".randomDiv");
for(var i = 0; i < divs.length; i++){
var target = Math.floor(Math.random() * divs.length -1) + 1;
var target2 = Math.floor(Math.random() * divs.length -1) +1;
divs.eq(target).before(divs.eq(target2));
}
});
</script>