imagebutton image url not changed dynamic on repeater - c#

I am using repeater to bind data & on header template i am using imagebutton for sorting column.
My Client Side Code:
<asp:Repeater runat="server" ID="RptClientDetails" OnItemDataBound="RptClientDetails_ItemDataBound">
<HeaderTemplate>
<table id="example" class="dynamicTable table table-striped table-bordered table-primary">
<thead>
<tr>
<th>
Client Name
<asp:ImageButton runat="server" ID="ImgbtnNameUp" ImageUrl="~/Images/BlackUp.png"
OnCommand="lbtnSortingAccending_Click" CommandArgument="Name" Height="15px" Width="20px" />
<asp:ImageButton runat="server" ID="ImgbtnNameUpDown" ImageUrl="~/Images/BlackDown.png"
OnCommand="lbtnSorting_Click" CommandArgument="Name" Height="15px" Width="20px" />
</th>
<th>
Total Balance Due
<asp:ImageButton runat="server" ID="ImgbtnTotalBalanceDueUp" ImageUrl="~/Images/BlackUp.png"
OnCommand="lbtnSortingAccending_Click" CommandArgument="TotalBalanceDue" Height="15px"
Width="20px" />
<asp:ImageButton runat="server" ID="ImgbtnTotalBalanceDueDown" ImageUrl="~/Images/BlackDown.png"
OnCommand="lbtnSorting_Click" CommandArgument="TotalBalanceDue" Height="15px"
Width="20px" />
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
On C# Code:
protected void lbtnSorting_Click(object sender, CommandEventArgs e)
{
string sortExpression = e.CommandArgument.ToString();
List<ARDTO> SirtlingListOBj = (List<ARDTO>)Session["GetClientList"];
int Showall = (int)Session["ShowAll"];
ImageButton imgBtnobj = new ImageButton();
imgBtnobj = (ImageButton)sender;
imgBtnobj.ImageUrl = "";
imgBtnobj.ImageUrl = "/Images/greenDown.png";
}
Here i want to change ImageURl... But it's not working...
So, any body can help me here...
What's wrong here ?
or can i change it via css ?

This should do the trick without having to worry about the rendered names.
The Datalist is handled on the serverside so that the ImageUrl path is completely rendered. this should leave a nice simple OnClientClick call to the jquery at the bottom which sets the Image1 src.
Also, I didn't see the actual call to the SimpleModal plugin, so I added it to the JS as I couldn't see how you were getting any sort of popup at all based on the code snippets
<div id="basic-modal-content">
<asp:Image ID="Image1" ImageUrl="" runat="server" />
</div>
<div id='container'>
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" >
<ItemTemplate>
<asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge" runat="server" OnClientClick="ShowFullImg(this);" />
</ItemTemplate>
</asp:DataList>
</div>
<script type="text/javascript">
function ShowFullImg(e)
{
$('#basic-modal-content img').attr('src',$(e).attr('src'))
$('#basic-modal-content').modal()
}
</script>

Related

hide column in an asp.net listview?

I have below list view , how can i hide column by code behind ?
<asp:ListView ID="AuditLogListView" runat="server" OnItemCreated="AuditLogListView_ItemCreated">
<LayoutTemplate>
<table class="table table-striped table-bordered small">
<tr class="table-secondary">
<th id="BlockHeader" runat="server" style="white-space: normal;">
<asp:Literal ID="BlockHeaderLiteral" runat="server" Text="<%$ Resources:AppResources, AuditInformationBlockHeader %>" />
</th>
</tr>
<asp:PlaceHolder runat="server" ID="ItemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td id="BlockStatus" runat="server">
<%# Eval("BlockStatus")%>
</td>
</tr>
</ItemTemplate>
After binding data with list view i tried below code behind but with this header text only hide but column still can still visible
if (groupOrBlockValue == 'W')
{
AuditLogListView.FindControl("BlockHeader").Visible = false;
AuditLogListView.FindControl("BlockHeaderLiteral").Visible = false;
//AuditLogListView.FindControl("BlockStatus").Visible = false;
}
Missing part of the list view?
With this:
<asp:ListView ID="LstMarks" runat="server" DataKeyNames="ID" >
<ItemTemplate>
<tr style="">
<td><asp:Textbox ID="Course" runat="server" Text='<%# Eval("Course") %>' /></td>
<td><asp:Textbox ID="Mark" runat="server" Text='<%# Eval("Mark") %>' Width="30px"/></td>
<td>
<asp:CheckBox ID="DoneLabs" runat="server" Checked = '<%# Eval("DoneLabs") %>' Width="30px"/>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="itemPlaceholderContainer" runat="server" border="0" class="table">
<tr runat="server" style="">
<th runat="server" >Course</th>
<th runat="server">Mark</th>
<th id= "LabW" runat="server" >Completed Lab Work</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
<br />
<br />
<asp:Button ID="cmdHide" runat="server" Text="Hide Lab check box" OnClick="cmdHide_Click" />
So note in the layout, we added a "id" = LabW - that lets you hide the header.
so, a simple button that would toggle (hide/show) the lvColum, then this works:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * from StudentCourses",
new SqlConnection(Properties.Settings.Default.TEST4)))
{
cmdSQL.Connection.Open();
LstMarks.DataSource = cmdSQL.ExecuteReader();
LstMarks.DataBind();
}
}
}
protected void cmdHide_Click(object sender, EventArgs e)
{
Control ctrHeader = LstMarks.FindControl("LabW");
ctrHeader.Visible = !ctrHeader.Visible;
foreach (ListViewItem lvRow in LstMarks.Items)
{
CheckBox ckBox = (CheckBox)lvRow.FindControl("DoneLabs");
ckBox.Visible = !ckBox.Visible;
}
}
So, we get this:
And clicking on the button, we get this:
And both the values changed - they persist - even when you click again (to toggle and show the hidden columns).
Edit: =====================================================
So, say this markup:
<asp:ListView ID="AuditLogListView" runat="server"
OnItemCreated="AuditLogListView_ItemCreated">
<LayoutTemplate>
<table class="table table-striped table-bordered small">
<tr class="table-secondary">
<th id="BlockHeader" runat="server" style="white-space: normal;">
<asp:Literal ID="BlockHeaderLiteral" runat="server" Text="Hotel Name" />
</th>
</tr>
<asp:PlaceHolder runat="server" ID="ItemPlaceholder"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td id="BlockStatus" runat="server">
<%# Eval("BlockStatus")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
And code behind button to hide is this:
protected void Button1_Click(object sender, EventArgs e)
{
Control ctrHeader = AuditLogListView.FindControl("BlockHeaderLiteral");
ctrHeader.Visible = !ctrHeader.Visible;
foreach (ListViewItem lvRow in AuditLogListView.Items)
{
Control BlockStat = (Control)lvRow.FindControl("BlockStatus");
BlockStat.Visible = !BlockStat.Visible;
}
}
At which event have you written this code?
Required this code in the OnDataBound event. And in your code this event missing.
<asp:ListView ID="AuditLogListView" runat="server" OnItemCreated="AuditLogListView_ItemCreated" OnDataBound="AuditLogListView_DataBound">
<asp:Literal ID="BlockHeaderLiteral" runat="server" Text="<%$ Resources:AppResources, AuditInformationBlockHeader %>" /><asp:PlaceHolder runat="server" ID="ItemPlaceholder"></asp:PlaceHolder>
C# Code:
protected void AuditLogListView_DataBound(object sender, EventArgs e)
{AuditLogListView.FindControl("BlockHeaderLiteral").Visible = false;}

How to change image source inside LinkButton in Repeater Asp.Net C#

I am trying to get image inside LinkButton in Repeater and wanted to change image Src but it does not changing image UI side.
HTMl Code:
<asp:Repeater ID="Repeater" runat="server" OnItemCommand="Repeater_ItemCommand" >
<HeaderTemplate>
<table c>
<tr>
<th>
<asp:LinkButton ID="lbtnC1" CommandName="Col1" runat="server">Column1 <asp:Image id="imgStamp" ClientIDMode="AutoID" runat="server" style="vertical-align:middle;padding-left:3px" /></asp:LinkButton>
</thalign>
<th>
<asp:LinkButton ID="lbtnC2" runat="server"
CommandName="Col2">Column2 <asp:Image id="imgStamp" ClientIDMode="AutoID" runat="server" style="vertical-align:middle;padding-left:3px" /></asp:LinkButton></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="C1Value" runat="server" />
</td>
<td>
<asp:Literal ID="C2Value" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
C# Event
protected void Repeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
LinkButton linkButton = e.CommandSource as LinkButton;
HtmlImage image = linkButton.Controls[0] as HtmlImage;
if (e.CommandName == "Col1")
{
image.Src = Page.ResolveUrl("~/arrow-down-white.gif");
}
}
Change it to HtmlImage image = linkButton.Controls[1] as HtmlImage;
I believe (but not 100% sure) that the first control is a Literal.
By doing this i'm able to solve my issue.
protected void Repeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
Image imgStamp = Repeater.Controls[0].Controls[0].FindControl("imgStamp") as Image;
imgStamp.ImageUrl = Page.ResolveUrl("URL");
}

Access Repeater controls propeties

I need to to use Response.Redirect() to redirect to a page with a query string value, because i can't set this value.
I have a repeater that contains ImageButton and a Label, the label's text is retrieved from DB, i need to response to a page with URL"ShowCourse.aspx?coursename=value" where value is the value of the label.
Code of repeater:
<asp:Repeater ID="CoursesListRepeater" runat="server" DataSourceID="FetchCourse">
<ItemTemplate>
<table>
<tr>
<td>
<asp:ImageButton ID="CourseImage" runat="server" Height="90" Width="90" ImageUrl='<%# Eval("CourseImage")%>' CssClass="imageButtons" OnClick="CourseImage_Click" />
</td>
<td>
<asp:Label runat="server" ID="CourseNameLabel"><%#Eval("CourseName") %></asp:Label>
<br />
<asp:Label ID="CategoryLabel" runat="server" Font-Size="22px" ForeColor="Gray" Text='<%#Eval("CourseCategory") %>' />
<br />
<asp:Label ID="DescriptionLabel" Font-Size="13px" runat="server" Text='<%#Eval("CourseDescription") %>' ForeColor="DarkRed" />
</td>
</tr>
<hr style="margin-top: 30px; border-radius: 5px;" />
</table>
</ItemTemplate>
</asp:Repeater>
You can use CommandName & CommandArgument on the ImageButton like this:
Template:
<asp:Repeater ID="CoursesListRepeater" runat="server" DataSourceID="FetchCourse"
onitemcommand="CoursesListRepeater_ItemCommand"></asp:Repeater>
....
<asp:ImageButton ID="CourseImage" runat="server" Height="90" Width="90" ImageUrl='<%# Eval("CourseImage")%>' CssClass="imageButtons"
CommandName="ShowCourse" CommandArgument='AboutCourse.aspx?coursename=<%# Eval("CourseName") %>' />
Code behind:
protected void CoursesListRepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "ShowCourse")
{
Response.Redirect(e.CommandArgument.ToString());
}
}
Better to add a property named Url to your class and use the above method and set the CommandArgument='<%# Eval("Url")%>'
Keep in mind that you have to create the redirect url from our code behind and set it to Repeater's data items's Url property you newly added

How to enhance the Drill Down feature in the GridView?

I am a new ASP.NET developer and I am trying to develop a GridView with Drill-Down Feature. I am following the steps in the following post in the CodeProject but I failed and I don't know how to fix it.
In my case, I have two tables:
Course Table: CourseID, CourseName, GroupID
Group Table: GroupID GroupName
(The first attribute in each table is the primary key)
I want to show the second table in the GridView and when the user clicks on the search icon image, the information in the first table will be displayed. So HOW TO DO THAT?
My ASP.NET:
<div align="center">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
DataKeyNames="CourseID" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField HeaderText="Item Details">
<ItemTemplate>
<table>
<tr>
<td>
<img src="images/system-search-md.png" alt="click here to see details"
onclick='ToggleDisplay(<%# Eval("GroupID") %>);' style="cursor:pointer; height:15px; width:15px" />
</td>
<td<>
<p><%# Eval("CourseID") %></p>
</td>
<td>
<%# Eval("CourseName") %>
</td>
<td>
<%# Eval("CourseName") %>
</td>
</tr>
<tr>
<td colspan="4">
<div id'coldiv<%# Eval("GroupID") %>' style="display:none;">
<asp:Literal runnat="server" ID="ltrl" Text='<%# Eval("GroupName") %>'></asp:Literal>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script language="JavaScript">
function ToggleDisplay(id) {
var elem = document.getElementById('coldiv' + id);
if (elem) {
if (elem.style.display != 'block') {
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else {
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
SelectCommand="SELECT dbo.groups.*, dbo.courses.*
FROM dbo.courses INNER JOIN
dbo.groups ON dbo.courses.GroupID = dbo.groups.ID"></asp:SqlDataSource>
</div>
Your approach seems reasonable. I'd make sure your ToggleDisplay function is working correctly, and you also need to fix your markup errors:
<td<> = <td>
<div id'coldiv<%# Eval("GroupID") %>' = <div id='coldiv<%# Eval("GroupID") %>'
<asp:Literal runnat="server" = <asp:Literal runat="server"

How to hookup the LinkButton in a GridView with a ModalPopupExtender in ASP.Net C#?

I really need some help here. I am trying to hookup a linkbutton in my GridView to a ModalPopupExtender, but with no luck. Basically I have a GridView which list all the users' info from a database, and I made the username as linkbutton. When you click the username, a modalpopup should show up, and you should be able to edit the user and update the database. I also I have an Add button. when you click the button, the same modalpopup should show up and you can add a new user to the database.
Following are my aspx and code behind. So far I have two major problems.
(1) the OnClick even doesn't get fired all the time.
(2) the modalpopup doesn't show up when clicking the username linkbutton.
Really appreciated if someone could help me out here.
Here is my aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="EditUsers.aspx.cs" Inherits="SPR2_v1.EditUsers" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="pagetitle">
<h1>SPR Users</h1>
</div>
<div >
<asp:Label ID="lblErrorMsg" runat="server" ForeColor="Red"></asp:Label>
<table align="center" >
<tr>
<td align="right">
<asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px"
onclick="btnAddUser_Click" />
</td>
</tr>
<tr>
<td align="left">
<asp:GridView ID="gvUsers" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False"
DataSourceID="SqlDSUsers" EnableViewState="False">
<Columns>
<asp:TemplateField HeaderText="UserName">
<ItemTemplate>
<asp:LinkButton ID="lnkUserName" runat="server"
Text='<%# Eval("UserName")%>' OnClick="lnkUserName_Click">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="UserName"
SortExpression="UserName" Visible="false" />
<asp:BoundField DataField="Extension" HeaderText="Extension"
SortExpression="Extension" />
<asp:BoundField DataField="Email" HeaderText="E-mail"
SortExpression="Email" />
<asp:BoundField DataField="Company" HeaderText="Company"
SortExpression="Company" />
<asp:BoundField DataField="Department" HeaderText="Department"
SortExpression="Department" />
<asp:BoundField DataField="Access Level" HeaderText="Access Level"
SortExpression="Access Level" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDSUsers" runat="server"
ConnectionString="<%$ ConnectionStrings:SPRConnectionString %>"
SelectCommand="..."></asp:SqlDataSource>
</td>
</tr>
</table>
<asp:ModalPopupExtender id="mpeAddUser" runat="server"
TargetControlID="btnAddUser"
PopupControlID="panelEditUser"
CancelControlID="btnCancel"
PopupDragHandleControlID="PopupHeader"
Drag="true"
DropShadow="true"
BackgroundCssClass="ModalPopupBG" >
</asp:ModalPopupExtender>
<asp:Button ID="btnEditUser" runat="server" style="display:none" />
<asp:ModalPopupExtender id="mpeEditUser" runat="server"
TargetControlID="btnEditUser"
PopupControlID="panelEditUser"
CancelControlID="btnCancel"
PopupDragHandleControlID="PopupHeader"
Drag="true"
DropShadow="true"
BackgroundCssClass="ModalPopupBG" >
</asp:ModalPopupExtender>
<asp:panel id="panelEditUser" style="display: none" runat="server">
<div id="ModalPopup">
<div id="PopupHeader">Add a New User</div>
<table>
<tr>
<td>First Name</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Extension</td>
<td>
<asp:TextBox ID="txtExtension" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Company</td>
<td>
<asp:DropDownList ID="ddlCompany" runat="server" DataSourceID="SqlDSCompany"
DataTextField="ProductVendorName" DataValueField="ProductVendorID"
AppendDataBoundItems="True">
<asp:ListItem Value="" Text=""></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ...>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td>Department</td>
<td>
<asp:DropDownList ID="ddlDepartment" runat="server"
DataSourceID="SqlDSDepartment" DataTextField="DepartmentName"
DataValueField="DepartmentID" AppendDataBoundItems="True">
<asp:ListItem Value="" Text=""></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ...>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td>Access Level</td>
<td>
<asp:DropDownList ID="ddlAccessLevel" runat="server"
DataSourceID="SqlDSAccessLevel" DataTextField="LevelID"
DataValueField="LevelID" AppendDataBoundItems="True">
<asp:ListItem Value="" Text=""></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ...>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnEdit" runat="server" Text="Submit"
onclick="btnEdit_Click" />
<asp:Button ID="btnReset" runat="server" Text="Reset"
onclientclick="return resetUser();" />
<input id="btnCancel" type="button" value="Cancel" />
</td>
</tr>
</table>
</div></asp:panel>
</div>
</asp:Content>
Here is the code behine in C#, somehow the click event didn't get fired all the time.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
namespace SPR2_v1
{
public partial class EditUsers : System.Web.UI.Page
{
...
protected void lnkUserName_Click(object sender, System.EventArgs e)
{
LinkButton lbUserName = sender as LinkButton;
GridViewRow gvr = (GridViewRow)lbUserName.NamingContainer;
txtFirstName.Text = "";
txtLastName.Text = "";
txtExtension.Text = gvr.Cells[2].Text;
txtEmail.Text = gvr.Cells[3].Text;
ddlCompany.SelectedItem.Text = gvr.Cells[4].Text;
ddlDepartment.SelectedItem.Text = gvr.Cells[5].Text;
ddlAccessLevel.SelectedItem.Text = gvr.Cells[6].Text;
btnEdit.Text = "Update User";
mpeEditUser.Show();
}
protected void btnAddUser_Click(object sender, EventArgs e)
{
btnEdit.Text = "Add User";
}
}
}
Too much code to write, but you need to associate each LinkButton to a ModalPopupExtender during GridView.RowDataBound.
Your real problem though is getting access to the row data to edit. If that is the real goal, see the example below and then you can integrate it with the ModalPopupExtender.
GridView Examples for ASP.NET 2.0: Editing the Underlying Data in a GridView
I recommend you go with a ListView, the templates(EditItemTemplate...etc) are much easier to work with.

Categories