I have to develop the functionality for the que and rply for that i have create the user contol as per my requirment as fallow and i have add the div with the text box for rely and submit button on user control and keep the div disply style to none and i call the javascript on reply link which shows the that div.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SuppReview.ascx.cs" Inherits="LaaFoodWebApp.SuppReview" %>
<div>
<table style="width:100%;">
<tr>
<td rowspan="2" style="width: 15%; vertical-align: top;">
<asp:Label ID="lblMsgType" runat="server"></asp:Label>
<br />
<asp:Label ID="lblMsgId" runat="server"></asp:Label>
</td>
<td style="width: 70%; vertical-align: top;">
<asp:Label ID="lblMsgtBody" runat="server"></asp:Label>
</td>
<td style="width: 15%">
<asp:Label ID="lblVDate" runat="server"></asp:Label>
<br />
By
<asp:Label ID="lblname" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<a id="toggleReply" style="color: #15ADFF" href="#">Reply</a>
</td>
<td>
<asp:Label ID="lblEmail" runat="server"></asp:Label>
<br />
<asp:Label ID="lblPhone" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
<td>
<panel id="pnlreply" >
<div id="DivReply" style="display:none">
<table style="width:100%;">
<tr>
<td style="width: 15%">
Replys</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine"
Width="100%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: right">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</td>
</tr>
</table></div></panel>
</td>
<td>
</td>
</tr>
</table>
</div>
But when i add those user control multiple time as per the count of replyes.
for (int i = 0; i< dt.Rows.Count; i++)
{
SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx");
SR.settxt(dt.Rows[i]);
reviews.Controls.Add(SR);
}
on the page
<%# Page Title="" Language="C#" MasterPageFile="~/SupplierMasterNew.Master" AutoEventWireup="true" CodeBehind="Supp_Views.aspx.cs" Inherits="LaaFoodWebApp.Supp_Views" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(function () {
$('#toggleReply').click(function () {
$('#DivReply').toggle('slow');
return false;
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHcontent" runat="server">
<div style="width: 100%; height: 24px; background-color: #D2EEF2; padding-top: 10px;
font-size: large; color: #000000; text-align: left;">
View</div>
<asp:Panel ID="reviews" runat="server">
</asp:Panel>
</asp:Content>
On clicking on reply link int hide show the div (Contain text box for rely and submit button) multiple time and it not work for the other entry
You have multiple duplicate IDs on your page if you are adding this control multiple times!
Consider changing the IDs to classes.
also give your outer div in your control a class! e.g. <div class="wrapper">
Declare a function:
function toggleReply(sender) {
$(sender).parent('.wrapper').children('.DivReply').toggle('slow');
}
your link:
<a class="toggleReply" style="color: #15ADFF" href="javascript:void(0);" onclick="toggleReply(this);">Reply</a>
Related
I created a form with validations to take member's details and register it. I want to create another form when user click on add another member by using it. Is it possible to have 2 form tag in one page in ASP.NET, and how to do it?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="webAss1.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 59%;
}
.auto-style2 {
width: 112px;
}
.auto-style3 {
width: 112px;
height: 29px;
}
.auto-style4 {
height: 29px;
}
</style>
</head>
<body>
<h2>MEMBER REGISTRATION FORM</h2>
<p>
Enter the details:</p>
<form id="form1" runat="server">
<table class="auto-style1">
<tr>
<td class="auto-style2">Name:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">Email:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">Contact no:</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style3">Address:</td>
<td class="auto-style4">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
<td class="auto-style4"></td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" />
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" />
</td>
<td> </td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
Please help
If you test another server side form in you page you will get this error:
A page can have only one server-side Form tag.
But you can add another form without runat="server. That is a client side form. But I think it is useless. Maybe do some help for validations.(Of course client side validations with $("#form_id").valid();)
What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.
In the .aspx
<style>
#PreviewSection {display:none;}
</style>
in the script, (edited to point to btPreview, but still not working... )
<script type="text/javascript">
var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})
</script>
the html:
<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>
</asp:Content>
Probably this is what you want:
Edited to add your modification after my first post.
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
PreviewSection.style.display = "block";
})
var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
PreviewSection.style.display = "none";
InputSection.style.display = "none";
})
var btPreview_Click = function() {
console.log('Do something else for Preview.');
};
var btSubmit_Click = function() {
console.log('Do something else for Submit.');
};
#PreviewSection {
display: none;
}
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
This will be the solution for ASP:
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>
Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:
#previewSection{
opacity:0;
}
Heres the right js:
<script type="text/javascript">
var previewsectionID = document.getElementById('PreviewSection');
previewsectionID.addEventListener('click',function(){
previewsectionID.style.opacity = 1; });
</script>
On my login page I want to display a simple table row that says loading. I put a simple script tag with a jquery function in the aspx page to show the table row when the login button is clicked. Everything works fine the first time the user clicks the login button. The login button and table row to display are inside an UpdatePanel container.
When the user clicks login again , with good or bad credentials, the table row does not display.
Here is my code on the page:
<%# Page Language="c#" AutoEventWireup="false" StylesheetTheme="Theme1" Codebehind="Default.aspx.cs" Inherits="....Default" %>
<%# MasterType VirtualPath="~/..." %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css" media="screen">
* {margin:0;padding:0}
html,body{height:100%}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<div style="height: 100%; width: 100%; display: table; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td valign="middle" align="center">
<form id="frmLogin" runat="server" autocomplete="off">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="Panel1" runat="server" Width="371px" BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="upLogin" runat="server" RenderMode="block" UpdateMode="always">
<ContentTemplate>
<table cellpadding="0" width="100%" style="background-color: white" cellspacing="0" border="0">
<tr>
<td colspan="2" align="right" class="reportHeader" style="height: 30px; padding-right: 10px">
<%= this.VersionName %>
</td>
</tr>
<tr>
<td valign="middle" style="height: 140px" class="Yellow">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td colspan="3"><b>Please Log In:</b></td>
</tr>
<tr>
<td>Username:</td>
<td><b><asp:TextBox Width="150" ID="txtUserName" runat="server" AutoCompleteType="Disabled" /></b></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox Width="150" TextMode="password" ID="txtPassword" runat="server" AutoCompleteType="Disabled" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="left" style="height: 30px; background-color: #f2dcac;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="bottom" style="padding-left: 5px">
<a class="menuLink" href="email.aspx">I forgot my password</a></td>
<td align="right" valign="bottom">
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" /></td>
</tr>
</table>
</td>
</tr>
<tr id="trInvalidLoginMessage" visible="false" runat="server">
<td align="center" colspan="2" style="background-color: #f2dcac;">
<font class="pageError">Invalid login. Please try again.</font>
</td>
</tr>
<tr id="trLoading" visible="False" style="display: none; text-align: center">
<td align="center" colspan="2" style="background-color: #f2dcac">
<font class="pageBodyBold"><h3>Loading...</h3></font>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
Sys.Application.add_load(page_load);
function page_load() {
var txt = $get('<%= this.txtUserName.ClientID %>');
txt.focus();
}
$(function () {
if (<%= Page.IsPostBack.ToString().ToLower() %> == false) {
$("#trLoading").css("display", "none");
$("#loading-div").css("display", "none");
}
$("#btnLogin").click(function () {
if ($("#trLoading").css("display") == 'none') {
$("#trLoading").css("display", "inline");
}
else {
$("#trLoading").css("display", "none");
}
});
});
</script>
</body>
</html>
Is it possible to get a jquery click event handler to work on the login button?
After some more searching, I found a solution posted in this answer.
Link to question
The solution was to use the OnClientClick attribute for the button and also disable submit behavior.
Code for button:
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Logging in...';" UseSubmitBehavior="False"/>
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).
I would like to show to two different repeaters in same div but once at a time.
<div id="tab1" class="tab_content">
<div class="comment1">
<div class="comments_header">Our Previous Comments</div>
<div class="prev_comments">
<asp:Panel ID="Panel2" runat="server">
<asp:Repeater ID="rptcomment" runat="server" >
<HeaderTemplate>
<table style="background-color:antiquewhite; width:600px; cellpadding="0" >
<tr >
<td colspan="2"></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="../images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="457px" Width="607px">
<asp:Repeater ID="RepterDetails" runat="server" >
<HeaderTemplate>
<table style="background-color:darkturquoise; width:600px; cellpadding="0">
<tr >
<td colspan="2">
<center> <b>Our Previous Comments</b></center>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="http://localhost:1411/images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<center>
<asp:Label ID="Label1" runat="server" Font-Bold="True" />
<asp:HyperLink ID="linkPrev" runat="server">Previous Page</asp:HyperLink>
<asp:HyperLink ID="linkNext" runat="server">Next Page</asp:HyperLink>
</center>
<div class="clear"></div>
</div>
</div>
</div>
In the above code when first page loads I would like to show repeater which are in panel2 and when user clicks on link previous comment I would like to show repeater of panel1 only but in the same div and same page.How to solve this problem?
Since you have each repeater inside an asp:Panel, this will be as easy as set the Visible attribute of the pertinent panel to false.
You can also archive this by using CSS styles with display: none; or visibility: hidden.