I'm trying to implement a onclick event to select an item in a asp:ListViewControl.
<ItemTemplate>
<tr runat="server" id="MemberRow" onclick='<%#ClientScript.GetPostBackClientHyperlink(LvMembers, string.Format("Select${0}", Container.DataItemIndex)) %>'>
<td>
<asp:Literal runat="server" ID="LtlMembershipNumber" Text='<%#Eval("MembershipNo") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlName" Text='<%#Eval("FullName") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlCompany" Text='<%#Eval("Company") %>' />
</td>
<td>
<asp:Literal runat="server" ID="LtlNotes" Text='<%#Eval("Notes") %>' />
</td>
<td runat="server">
<asp:Literal runat="server" ID="LtlMobile" Text='<%#Eval("MobilePhone") %>' /><asp:LinkButton
runat="server" ID="lnl1" CommandName="Select" Text="test" />
</td>
</tr>
</ItemTemplate>
The page loads and binds as expected. It also outputs the HTML I would expect.
<tr id="ContentPlaceHolder1_LvMembers_MemberRow_1" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LvMembers','Select$1')">
<td>
10000018
</td>
<td>
Axel Rose
</td>
<td>
</td>
<td>
</td>
<td>
<a id="ContentPlaceHolder1_LvMembers_lnl1_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LvMembers$ctrl1$lnl1','')">test</a>
</td>
</tr>
However the onclick does not fire the ListView.Command or ListView.SelectedIndexChanging event? If I add a button with CommandName="Select" it works as expected? The POST data is the same!
{__EVENTTARGET=ctl00%24ContentPlaceHolder1%24LvMembers&__EVENTARGUMENT=Select%245&__VIEWSTATE=...}
Kind of answered this myself. The ListView class does not implement the IPostBackEventHandler interface.
This means that it does not have the RaisePostBackEvents method and does not accept the EventTarget.
I've overloaded it to implement this interface.
public class ListViewEvent : ListView, IPostBackEventHandler
{
public void RaisePostBackEvent(string eventArgument)
{
if (!eventArgument.Contains("$"))
return;
string[] splitEventArgument = eventArgument.Split('$');
switch (splitEventArgument[0])
{
case "Select":
{
SelectItem(Convert.ToInt32(splitEventArgument[1]));
break;
}
default:
{
break;
}
}
}
}
Related
I have 2 panels, of checkbox: In Panel1, if all checkbox are checked I need to show Panel2.
I have a HTML and a script but it's not working, I think that I'm missing somthing.
here is my code :
<body>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
</table>
And this is my script but it's not working
$(document).ready(function () {
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');
$('#Panel2').hide();
$('#Panel1').change(function () {
if (this.checked) {
$('#Panel2').show();
}
else {
$('#Panel2').hide();
}
});
});
Help please
Using jQuery you can compare the checked checkboxes vs all checkboxes inside Panel1 like this:
if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
$('#Panel2').show();
}else{
$('#Panel2').hide();
}
I have Listview control on webform.aspx page with below defination...
<asp:ListView runat="server" ID="dispalyProducts">
<LayoutTemplate>
<table runat="server" id="table1">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<%-- Data-bound content. --%>
<asp:Label runat="server" Text='<%#Eval("ProductName") %>' />
<br/>
<asp:TextBox runat="server" />
<br/>
<asp:Label runat="server" Text='<%#Eval("ProductID") %>' />
<br/>
<asp:Button runat="server" Text="Add TO cart" OnClientClick="AddToCart('<%#Eval("ProductID") %>');return false;"/>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Whent he program runs, it creates a list of product ID, name and a button.
I want to use this button as "add to cart" functionality. so when a user clicks on button, i want to call a javascript function with productID, and textbox value (as item id and quantity).
How can I pass these values to javascript function in listview.
<asp:Button ... OnClientClick='AddToCart(\"<%#Eval("ProductID") %>\", \"<%#Eval("ProductName") %>\");return false;'/>
You can pass values as parameters to your js function.
<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
I am new to Jquery. I want to know if i can select all the input fields above with id="txt_template" to compare their name using a Jquery function. As this is is under <asp:repeater> control, I'm not sure how to achieve this.
Inside the repeater, You need to use class instead of id. I'm not really sure but I thing the id you give to a server control with runat=server is not essentially the rendered id.
So use a class as follows
<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" class='aSuperInput' id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
JQuery
$('.aSuperInput').change(function(){
//----
});
or
$('.aSuperInput').select(function(){
//----.blur(), .focus(), .unblur(), ect.
});
I have an ASP.Net web page and have created a custom control that's soul purpose is to be a list "item" displayed in the main page's panel (asp:Panel), here is that list control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="cListItem.ascx.cs" Inherits="CatPro.Presentation.UserControls.CatalyticItem" %>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/lightbox-2.6.min.js"></script>
<link href="../Css/lightbox.css" rel="stylesheet" />
</style>
<table class="MainFrame" border="1" runat="server">
<tr>
<td runat="server">
<table class="MainFrame">
<tr>
<td class="CatImageColumn" rowspan="5">
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
</td>
<td class="LinkHeader" colspan="5">
<asp:LinkButton ID="hyperlinkDescription" runat="server" Font-Bold="True" Font-Size="X-Large">Item Description Link</asp:LinkButton>
</td>
<td class="LinkHeader">
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtYear" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblRasCategory" runat="server" Text="RAS Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtRASCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue89" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue89" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblMake" runat="server" Text="Make:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtMake" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblPMCategory" runat="server" Text="PowerMount Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtPMCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue100" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue100" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblModel" runat="server" Text="Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblOENumber" runat="server" Text="OE Number:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtOENumber" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel"></td>
<td class="ThirdRowText"></td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblSubModel" runat="server" Text="Sub Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtSubModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
</td>
<td class="SecondRowText">
</td>
<td class="ThirdRowLabel"> </td>
<td class="ThirdRowText"> </td>
</tr>
</table>
</td>
For every record returned from a database call, one of these controls is added to the main page's Panel control. Each item may have more than 1 image, so i store them in a asp:DataList in the code behind:
string[] images = listCImages.Select(c => c.ImagePath).ToArray();
DataList1.DataSource = images;
DataList1.DataBind();
Ideally, i would like to display the first image in the data set on the control, then when clicked have the LightBox control display the related image collection (by clicking through the set in the LightBox window).
This is the section that uses the LightBox control i'm having issues setting up
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
I can load and display a single image with no issue, but my attempts to perform the above mentioned has not been so simple. Is this the right approach? What alterations should i make to get the desired outcome?
I've temporarily solved this by doing somewhat of a hack (a sloppy method in my opinion)...
I first dynamically created my display image:
//Create a HyperLink control
HyperLink linkWrapper = new HyperLink();
linkWrapper.ID = catId.ToString();
//assign a lightbox attribute
linkWrapper.Attributes.Add("rel", string.Format("lightbox[{0}]", catId.ToString()));
linkWrapper.Attributes.Add("title", string.Format("Image(s) for {0}", catId.ToString()));
//The path to my local image
linkWrapper.NavigateUrl = imagePath;
//next, create a display image
Image mainImage = new Image();
mainImage.Height = 128;
mainImage.Width = 128;
mainImage.ID = "img_" + catId.ToString();
mainImage.ImageUrl = imagePath;
//wrap the link around the image
linkWrapper.Controls.Add(mainImage);
//dynamically add display control to td cell
CatImages.Controls.Add(linkWrapper);
Then, if there were any other associated images, i added them like:
foreach (catImage cat in listCatImages) //custom generic list iteration
{
//create a HyperLink control
HyperLink hl = new HyperLink();
hl.Attributes.Add("rel", string.Format("lightbox[{0}]", catalyticConverterId.ToString()));
hl.Attributes.Add("title", "My Cats");
hl.NavigateUrl = cat.ImagePath;
//add just the link to the td cell
CatImages.Controls.Add(hl);
}
Now, when i click on the "Display Image", LightBox picks up the image group and allows me to navigate through them (and the links are not visible).
Okay so I've got a little problem with combining my own Javascript with the ASP server controls.
The picture: I've got a couple of ASP:TextBoxes on my page who are created by a repeater. My goal is to sum all the values the user types into these textboxes. This must happen whenever the user changes something to the content of the textboxes. (On the bottom of the page I got a little price calculator, which works with server side code but I want to make it more dynamic, I'm talking about txtTeam and txtPart)
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript">
</script>
<div id='inputDiv'>
<h1>
Students per team</h1>
<table>
<tr>
<td>
Team
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
<ItemTemplate>
<tr>
<td id='td<%# Eval("team_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtTeam<%# Eval("team_id") %>'>
<asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
</td>
<td id='lblTeam<%# Eval("team_id") %>'>
<asp:Label runat="server">
<%# Eval("st_max") %>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
OnSelecting="odsTeams_Selecting">
<SelectParameters>
<asp:Parameter Name="delegation_id" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<h1>
Additional Participants</h1>
<table>
<tr>
<td>
Category
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
<ItemTemplate>
<tr>
<td id='<%# Eval("participant_category_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtPart<%# Eval("participant_category_id") %>'>
<asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
</td>
<td id='lblPart<%# Eval("participant_category_id") %>'>
<asp:Label runat="server">
<%# getMax(Eval("key").ToString())%>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
</asp:ObjectDataSource>
</table>
</div>
<h1>
Advance to be paid</h1>
<table>
<tr>
<td>
Number of participants
</td>
<td>
Days
</td>
<td>
Price
</td>
<td>
Total
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart1">
0
</td>
<td runat="server" id="tdDays1">
0
</td>
<td runat="server" id="tdPrice1">
0
</td>
<td runat="server" id="tdTotal1">
0
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart2">
0
</td>
<td>
N/A
</td>
<td runat="server" id="tdPrice2">
0
</td>
<td runat="server" id="tdTotal2">
0
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td runat="server" id="tdGrandTotal" style="font-weight: bold">
0
</td>
</tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
Style="height: 29px" />
<asp:Label runat="server" ID="lblInfo"></asp:Label>
Give your tables ids, eg <table id="students"> and <table id="additional">. Then, iterate the rows, find the input element in each row, and sum the values as you go:
function sumTable(id)
{
var count = 0;
var studentTable = document.getElementById(id);
for (var i=1; i in studentTable.rows; i++)
{
var r = studentTable.rows[i];
var input = r.getElementsByTagName("input")[0];
var n = parseFloat(input.value);
if (isFinite(n)) count += n;
}
return count;
}
var totalParticipants = sumTable("students") + sumTable("additional");
Using a library like jquery you can easily select all input boxes within a particular div (say your repeater div) or you can add a class specifically to those input boxes and grab them that way.
Attach the function call to the onblur method so that when they move away from the textboxes you can sum them up.