Make div clickable and use CommandName="Select" - asp.net

This code below works fine, when I click on the LinkButton the select will get fired.
However I have a hover style on the div so that it will change color if the mouse enters. This is confusing for users because when they click on the div nothing happens, only when they click on the LinkButton.
I want the CommandName="Select" to fire when a user clicks on the div. How can I do this?
<ItemTemplate>
<div class="Card">
<h4>
<asp:LinkButton ID="SelectButton" Text='<%# Eval("Name") %>' CommandName="Select" runat="server"/>
</h4>
<asp:Label runat="server" Text='<%# Eval("date") %>' />
<asp:Label runat="server" Text='<%# Eval("location") %>' />
<br />
</div>
</ItemTemplate>

You can use jquery to trigger click event of button on click of the div
$("#Card").click(function(){
$("[id$=SelectButton]").trigger('click');
});

I fixed my issues by placing the LinkButton outside the div. Now the whole div is clickable in the DataList.
<ItemTemplate>
<asp:LinkButton CommandName="Select" runat="server">
<div class="Card">
<h4>
<asp:Label runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</h4>
<asp:Label runat="server" Text='<%# Eval("date") %>' />
<asp:Label runat="server" Text='<%# Eval("location") %>' />
<br />
</div>
</asp:LinkButton>
</ItemTemplate>

Related

What property of a Templatefield will make an asp button visible?

I have the following code on my aspx page that has an onclick event to produce a popup control but the button is invisible. What can I use in place of ItemTemplate as a property of Templatefield to make the button visible?
<asp:TemplateField HeaderText="Performance Status (adults):">
<ItemTemplate>
<asp:button skinID="tabbutton" CssClass="Clickable" id="btnWhoStatus" runat="server" Text="?" BorderStyle="None" TabIndex="-1" />
<cc1:PopupControlExtender
ID="PopupControlExtender2" runat="server" Position="Top"
TargetControlID="btnWhoStatus" PopupControlID="pnlWhoStatus"
DynamicServicePath="" Enabled="True" ExtenderControlID="">
</cc1:PopupControlExtender>
<asp:Panel runat="server" ID="pnlWhoStatus" BackColor="#FFFFFF" style="width:640px; display:none " >
<controls:WhoStatusPopup id="WhoStatusPopup" runat="server" />
</asp:Panel>
</ItemTemplate>
<ItemTemplate>
<asp:Label skinid="tablabelblack" id="lblPerformanceStatus" runat="server" Text='<%# Eval("PerformanceStatus") %>' />
</ItemTemplate>
</asp:TemplateField>

How to get commandargument of button inside listview using javascript in asp.net

I am working on an asp.net application in which i have a ListView in which there is a linkbutton. i want to get commandargument of the button which is inside the listview. I have used following code:
<asp:ListView ID="ListView5" runat="server" OnItemDataBound="ListView5_ItemDataBound">
<ItemTemplate>
<li>
<asp:Image runat="server" Style="width: 50px; height: 50px;" ID="Image1" ImageUrl='<%#Eval("Image") %>' />
<asp:HiddenField ID="lblWallID" runat="server" Value='<%#Eval("Wall_ID") %>'></asp:HiddenField>
<p>
<asp:LinkButton ID="linkID" runat="server" CommandArgument='<%#Eval("UID") %>'>
<asp:Label ID="lbl1" runat="server" Text='<%#Eval("Full_Name") %>'></asp:Label>
</asp:LinkButton>
</p>
<p>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Wall_Content") %>'></asp:Label>
</p>
<p>
<asp:Label ID="lblTime" CssClass="time-text" runat="server" Text='<%#Eval("TimeAgo") %>'></asp:Label>
</p>
<p>
<asp:LinkButton ID="btnClick" runat="server" Text="Comment" OnClientClick="SaveCom(this);" CommandArgument='<%#Eval("Wall_ID") %>' CommandName="Comment"></asp:LinkButton>
</p>
</li>
</ItemTemplate>
</asp:ListView>
The Javascript function is:
<script type="text/javascript">
function SaveCom() {
var val = $(this).commandargument();
</script>

Using DataList control to redirect user on other page and fetch data on that page depending on the button clicked in previous page

I am using a datalist control in which i have a div and some other asp controls.
I have an edit button in it. If I click on edit button, I want to redirect user to another page on which I have some controls and I want information to be filled up in those controls depending upon the button I have clicked in previous page.
Here is the datalist code:
<asp:DataList ID="DataList1" runat="server" DataKeyField="ID" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table">
<ItemTemplate>
<div><br /><br /><br />
<div style="background-color:Silver;height: auto; display:block;" >
<div id="threadPostLeftDiv" style="width:auto; border-style:solid; border-width:2px; border-color:Black;border-right-color:White;" >
<asp:Image runat="server" ID="ImagePreview1" style="margin-right:5px; " ImageUrl='<%# Eval("imageurl") %>' Height="100px" Width="100px" BorderStyle="None" />
</div>
<div id="threadPostRightDiv" style=" border-style:solid; border-width:2px;margin-left:-15px; border-color:Black;border-left-color:White;">
<asp:Label ID="txtHeadline1" CssClass="inputprev" style=" font-size:medium; font-weight:bolder;" Text='<%# Eval("subtitle") %>' Enabled="false"
placeholder="Headline" runat="server"></asp:Label>
<br />
<asp:Textbox ID="txtDescription1" CssClass="inputprevdesc1" Text='<%# Eval("descriptions") %>'
Enabled="false" BackColor="Silver" Rows="3" TextMode="MultiLine" placeholder="Description" runat="server"></asp:Textbox><br />
<br />
<asp:Label ID="txtOfferHeadline1" Text='<%# Eval("title") %>' Enabled="false" CssClass="inputprev1"
placeholder="Offer Headline" runat="server"></asp:Label>
<br />
</div>
</div>
<div style=" float: right;margin-right:10px; ">
<button id="btnEdit" class="css3button1" onserverclick="btnEdit_Click" runat="server">Edit</button>
</div>
</div>
</asp:DataList>
Please help me in acheiving my goal,give me the code behind file and what events to triggers.
Thank you.
Well that can be easily achived by doing the following things
bind 'btnEdit' commandargument with the id
<button id="btnEdit" class="css3button1" onserverclick="btnEdit_Click" runat="server" CommandArgument='<%# Eval("ID") %>' >Edit</button>
in btnEdit_Click event do the following
Button bt = (Button)sender;
string recordid = bt.CommandArgument;
Response.Redirect("editrecordno.aspx?recordid="+recordid,true);
in editrecordno.aspx page request the querystring and do the need full.
in Button_Click event you shoul redirect to another page with QueryString paramater
Replace your edit <button> with this code line
<asp:Button ID="Button1" PostBackUrl='DataEdit.aspx?id=<%# Eval("id") %>' runat="server" Text="Edit" />
In DataEdit.aspx put your FormView with DefaultMode=Edit
Then Add new QueryString Parameter in your DataSource
I converted html button to link button and fired onRowCOmmand event and I got my solution.

ASP.NET C#, Access div element from nested Listview Code Behind

I'm trying to get the (div id="imgGallery" runat="server") element from nested Listview to modify the class name programatically.
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceHolder1" onitemdatabound="ListView1_ItemDataBound">
<ItemTemplate>
<asp:Label ID="VersionId" runat="server" Text='<%# Eval("VersionId") %>' Visible="false" />
<asp:Label ID="MenuContent" runat="server" Text='<%# Eval("ContentText") %>' />
<br />
<asp:ListView ID="ListView2" runat="server" ItemPlaceholderID="itemPlaceHolder2">
<ItemTemplate>
<div id="imgGallery" class="images" runat="server">
<asp:Image ID="Image1" ImageUrl='<%# Eval("ImageUrl") %>' runat="server" ToolTip="Text" />
</div>
</ItemTemplate>
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder2"></asp:PlaceHolder>
</LayoutTemplate>
</asp:ListView>
</ItemTemplate>
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</LayoutTemplate>
<ItemSeparatorTemplate>
<br />
<hr />
<br />
</ItemSeparatorTemplate>
on my code behind I tried the code below which doesn't work... and I tried different ways but can't find solution.
ListView listView2 = (ListView)ListView1.FindControl("ListView2");
HtmlGenericControl mydiv = (HtmlGenericControl)listView2.FindControl("imgGallery");
mydiv.Attributes.Clear();
You sholuld work with inner element of databound controls on databinding stage or iterating through row collection (called databind method before)

UpdatePanel doesnt work with script manager. There is a postback happening for the code below. How do I do Ajax behavior?

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Repeater ID="rpChat" runat="server" OnItemDataBound="rpChat_ItemDataBound" OnItemCommand="rpChat_ItemCommand">
<ItemTemplate>
<div id="divChatWindow" title='<%# Eval("username") %>' runat="server" class="clChatWindow">
<div>
<asp:Label runat="server" Text='<%# Eval("username") %>' class="divHeader"></asp:Label>
<img src="../../Menu/close.jpg" onclick="HideDiv(this)" style="float: right; width: 20px;
height: 20px;" /></div>
<div class="chatText">
<asp:Repeater ID="rpChatMessages" runat="server">
<ItemTemplate>
<asp:Image ID="imageForFriend" runat="server" CssClass="clFriendsImage" ImageUrl='<%# "HttpImageHandler.jpg?username=" + DataBinder.Eval(Container.DataItem,"fromusername").ToString() %>' />
<asp:Label ID="chatMessage" runat="server" Text='<%# Eval("Message") %>'></asp:Label>
<br>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:TextBox ID="txtChatMessage" runat="server" Width="115px"></asp:TextBox>
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("username") %>'>Send</asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I have edited the code... Now what should I do? I have the linkbutton inside contenttemplate. Still a postback is happening
Any postback coming from any control outside an UpdatePanel will trigger a full postback unless you add those events as triggers of your UpdatePanel
In your example,
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("Username2") %>'>Send</asp:LinkButton>
It's outside of the UpdatePanel and since you do not have triggers in your panel that will always cause a full postback
Solutions:
Approach 1
Place the LinkButton inside the UpdatePanel.ContentTemplate
Approach 2
Add triggers to your UpdatePanel
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSendChat" EventName="Click" />
</Triggers>

Resources