We Keep Coding

asp.net web page, getting jQuery Accordion plugin to work with asp:Repeater control

I'm working on a asp.net project. I've been asked to create a page so site admins could add articles and everyone else could add comments under those articles.
I have 2 separate tables in my db, Articles/Comments. On page load I'm populating all the articles with their own related comments within a panel.
I've also been asked to use an accordion so all comments would display in a collapsible manner!
My problem is that only the first article shows up with collapsible comments under it, and the rest do not!
Here is my aspx page:
<%# Page Title="Ref Notes" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RefNotes.aspx.cs" Inherits="Root.RefNotes" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:Panel ID="refNotes" CssClass="col-xs-12 data-container" runat="server">
</asp:Panel>
</asp:Content>
aspx.cs code:
public partial class RefNotes : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
populateNotes();
Page.Title = "Latest Ref Notes";
}
protected void populateNotes()
{
string tag = "";
if (Request.QueryString["tag"] != null) tag = Request.QueryString["tag"];
int post = 0;
if (Request.QueryString["post"] != null) post = Int32.Parse(Request.QueryString["post"]);
MediaService.Article[] articles = Global.mediaService.GetArticles(1, 1); //gets all articles
for (int i = 0; i < articles.Length; i++)
{
if (post > 0 && articles[i].ID != post) continue;
Root.Controls.Blog.RefNotesPost p = (Root.Controls.Blog.RefNotesPost)LoadControl("~/Controls/Blog/RefNotesPost.ascx");
p.SetData(articles[i]);
refNotes.Controls.Add(p);
Root.Controls.Blog.CommentControl c = (Root.Controls.Blog.CommentControl)LoadControl("~/Controls/Blog/CommentControl.ascx");
c.SetData(articles[i].ID);
refNotes.Controls.Add(c);
}
if (articles.Length == 0)
{
Literal l = new Literal();
l.Text = "<h1>No content currently available.</h1>";
refNotes.Controls.Add(l);
}
}
}
CommentControl.ascx code:
# Control Language="C#" AutoEventWireup="true" CodeBehind="CommentControl.ascx.cs" Inherits="Root.Controls.Blog.CommentControl" %>
<div class="row">
Comments:
<asp:Panel ID="errorPanelID" runat="server" CssClass="loginbox-textbox" Visible="false" Style="margin-top: 20px;">
<div class="alert alert-danger fade in">
<button class="close" data-dismiss="alert">
×
</button>
<i class="fa-fw fa fa-times"></i>
<asp:Label ID="errorMsgID" runat="server"></asp:Label>
</div>
</asp:Panel>
</div>
<div id="dvAccordion" style="width: auto">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<h3>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("user") + " at " + Eval("dateTime") + " says:"%>'></asp:Label></h3>
<div style="background-color: #CFDEE3">
<asp:Literal ID="lit" runat="server" Text='<%#Eval("comment")%>' Mode="Transform" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div>
Add a Comment:<br />
<asp:TextBox ID="txtComment" runat="server" Rows="5" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" OnClick="saveBtn_Click" Text="Submit " />
<asp:HiddenField runat="server" ID="articleID" Value="0" />
</div>
<script type="text/javascript">
$(function () {
$("#dvAccordion").accordion();
});
</script>
CommentControl.ascx.cs code:
public partial class CommentControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void SetData(int artID)
{
Services.Comment[] comments = Global.Tools.GetComments(artID);
articleID.Value = artID.ToString();
if (comments.Length > 0)
{
Repeater1.Visible = true;
Repeater1.DataSource = comments;
Repeater1.DataBind();
}
else
{
Repeater1.Visible = false;
}
}
protected void saveBtn_Click(object src, EventArgs e)
{
AdminService.Employee emp = Global.Tools.GetEmployee(Int32.Parse(Session["eid"].ToString()));
Blog.Comment a = new Blog.Comment();
a.CommentOn = txtComment.Text;
a.CreatedBy = emp.username;
a.DatePosted = DateTime.Now;
a.isVisible = 1;
a.ArticleID = int.Parse(articleID.Value);
if (Request.QueryString["post"] != null)
{
a.ID = Int32.Parse(Request.QueryString["post"]);
}
int result = Global.Tools.CreateComment(a);
if (result <= 0)
{
errorMsgID.Text = "Failed to create comment.";
errorPanelID.Visible = true;
}
else
{
Response.Redirect("/News.aspx");
}
}
txtComment.Text = string.Empty;
}

In the CommentControl.ascx file I had set the accordion based on id (#dvAccordion). I changed it to be based on class (.dvAccordion) and that solved the issue.
So for future references: when you're on a page an "id" can only be called once but a "class" can be called multiple times!

ASP.NET Send variable in code behind

**ASPX CODE** this is the aspx code
<% for (int i = 0; i < pricePageObj.cartItemsgetset; i++)
{ %>
<div class="row">
<div class="col-md-1 ">
<% Response.Write(i + 1); %>
</div>
<div class="col-md-2 ">
<% Response.Write(svcID[i]); %>
</div>
<div class="col-md-2 ">
<% Response.Write(svcName[i]); %>
</div>
<div class="col-md-3 ">
<% Response.Write(svcDesc[i]); %>
</div>
<div class="col-md-2 ">
<% Response.Write(svcCharges[i]); %>
</div>
<div class="col-md-1 ">
<asp:Button CssClass="btn btn-danger" runat="server" Text="Remove" CommandArgument="dont know how to pass i here" OnCommand="onRemove" />
</div>
</div>
<%} %>
Let's say i=0 ; i<5; i++. so for loop will go for 5 times. so i want to send i as a parameter in the code behind to read the value of i.
C# CODE code behind
public void onRemove(object sender, CommandEventArgs e)
{
try
{
string indexx = Convert.ToString(e.CommandArgument);
System.Diagnostics.Debug.WriteLine("String index = " + indexx);
}
catch (Exception ex)
{
}
}
I want to send that 'i' index in the code behind. Any help?
When i clicked on the button, i want to read that i in the onRemove event.
any help?

Here is how we normally display a collection inside Bootstrap divs in ASP.NET Web Form. If we want to manipulate individual row, we use ItemDataBound event.
It seems a lot of code compare to your original question, but this is a recommended approach in ASP.NET Web Form.
<asp:ListView runat="server" ID="ListView1"
ItemPlaceholderID="ItemPlaceholder"
OnItemDataBound="ListView_ItemDataBound">
<LayoutTemplate>
<asp:Panel runat="server" ID="ItemPlaceholder"></asp:Panel>
<asp:DataPager runat="server" ID="DataPager" PageSize="3">
<Fields>
<asp:NumericPagerField ButtonCount="5" PreviousPageText="<" NextPageText=">" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div class="row">
<div class="col-md-1">
<%# Eval("Id") %>
</div>
<div class="col-md-2">
<%# Eval("Name") %>
</div>
<div class="col-md-1">
<asp:Button CssClass="btn btn-danger" runat="server" Text="Remove"
CommandArgument='<%# Eval("Id") %>' ID="RemoveButton"
OnCommand="RemoveButton_Command" />
</div>
</div>
</ItemTemplate>
</asp:ListView>
Code Behind
public class User
{
public int Id { get; set; }
public string Name { get; set; }
}
public partial class About : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ListView1.DataSource = new List<User>
{
new User {Id = 1, Name = "John"},
new User {Id = 2, Name = "Marry"},
new User {Id = 3, Name = "Nancy"},
new User {Id = 4, Name = "Eric"},
};
ListView1.DataBind();
}
}
protected void RemoveButton_Command(object sender, CommandEventArgs e)
{
int id = Convert.ToInt32(e.CommandArgument);
}
protected void ListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
User user = e.Item.DataItem as User;
}
}
}

<% Response.Write(i + 1); %>
By doing this, you are passing i to the Response.Write method.
You should be able to just write a method in your code behind.
Code behind sample method:
protected int Foo(int bar){
//do something with bar
return bar;
}
You should be able to do this on the .aspx page now:
<% Response.Write(Foo(1) + 1); %>
You can access all of the methods in your code behind by putting the below line at the top of your page, replacing MyCoolPage with your page name. This line should be added for you automagically, though, when you create a web form page:
<%# Page CodeBehind="MyCoolPage.aspx.cs" Inherits="MyCoolPage" Language="C#" %>
Instead of doing what you are doing with your button, just add an OnClick event instead of what you are doing now, as follows:
<asp:Button CssClass="btn btn-danger" runat="server" Text="Remove" OnClick="DoSomethingCool(i) />
DoSomethingCool:
protected void DoSomethingCool(int index){
try
{
System.Diagnostics.Debug.WriteLine("index = " +
index);
}
catch (Exception ex)
{
}
}

How can I get text of hyperlink in a FormView?

I was used a FormView to show data in my page :
<asp:FormView ID="PFull" runat="server" >
<ItemTemplate>
<div class="post_con">
<h4 class="post-headers"><asp:HyperLink ID="hprPTitle" runat="server" NavigateUrl='<%#Eval("PID","~/Paper.aspx?pid={0}")%>'><%#Eval("PTitle")%></asp:HyperLink></h4>
</div>
</ItemTemplate>
</asp:FormView>
Bind form view :
public void ShowFullPaper(int id)
{
DataTable dt = paper.ShowFullPaper(Convert.ToInt32(Request.QueryString["pid"]));
PFull.DataSource = dt;
PFull.DataBind();
}
Now, I want change title of page with text of that hyperlink with this :
protected void PFull_DataBound(object sender, EventArgs e)
{
this.Title = ((HyperLink)PFull.FindControl("hprPTitle")).Text;
}
But That is not work. help me please...
Thanks.

Modify your aspx markup as below.
<asp:FormView ID="PFull" runat="server" >
<ItemTemplate>
<div class="post_con">
<h4 class="post-headers"><asp:HyperLink ID="hprPTitle" runat="server" NavigateUrl='<%#Eval("PID","~/Paper.aspx?pid={0}")%>' Text='<%#Eval("PTitle")%>'></asp:HyperLink></h4>
</div>
</ItemTemplate>
</asp:FormView>
And then in your ItemDataBound event you could find it like below.
protected void PFull_DataBound(object sender, EventArgs e)
{
this.Title = ((HyperLink)PFull.FindControl("hprPTitle")).Text;
}

change design to--
<asp:FormView ID="PFull" runat="server" OnDataBound="PFull_DataBound" >
<ItemTemplate>
<div class="post_con">
<h4 class="post-headers"><asp:HyperLink ID="hprPTitle" runat="server" NavigateUrl='<%#Eval("Dosage","~/Paper.aspx?pid={0}")%>' Text='<%#Eval("PTitle")%>'></asp:HyperLink></h4>
</div>
</ItemTemplate>
</asp:FormView>

iFrame in UpdatePanel not updating

I'm trying to update the source of an iFrame when a button is clicked on the page. However, nothing seems to be happening...
.ASPX:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="accountInfo">
<p class="submitButton">
<asp:Button ID="ValidateButton" runat="server" Text="Validate" OnClick="SubmitSponsor" />
</p>
</div>
<iframe runat="server" id="PayPalFrame" height="150px" width="100%" frameborder="0"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
protected void SubmitSponsor(object sender, EventArgs e)
{
var driver = new Driver();
var isvalid = driver.IsAppValid(URL.Text, APILINK, Connstring);
if (isvalid)
{
PayPalFrame.Attributes.Add("src", "http://www.google.com");
URLInvalid.Visible = false;
}
}
I've also tried:
PayPalFrame.Attributes["src"] = "http://www.google.com"; and still nothing.

I have tested your code, and it works in a sample project:
ASPX:
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="accountInfo">
<p class="submitButton">
<asp:Button ID="ValidateButton" runat="server" Text="Validate" OnClick="SubmitSponsor" />
</p>
</div>
<iframe runat="server" id="PayPalFrame" height="150px" width="100%" frameborder="0">
</iframe>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Codebehind:
public partial class UpdatePanelIFrameTester : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void SubmitSponsor(object sender, EventArgs e)
{
bool isvalid = true;
if (isvalid)
{
PayPalFrame.Attributes.Add("src", "http://www.ironworks.com");
}
}
}
I would inspect your code and ensure nothing is causing your page to refresh/perform a full postback (I changed the URL as google will not allow you to view it in an iframe under standard conditions).

I believe you have to remove the src attribute and then re-add it, for this to work. Not sure why this is, but I remember doing it the last time I worked with update panels. Perhaps it's because the src attribute always already exists?
Anyway, here's some sample code: how to change the src attribute in iframe.

Updating the master page when the control is within an update panel on the content page

I have an application which has a control within a update panel but needs to update a part of the master page aswel - i m not sure if this can be done?
The
<asp:ScriptManager ID="ScriptManager" runat="server" />
is within the master page
and the part of the master page i want to update is the following:
<div id="divPanelMyCover" class="divPanelMyCover" runat="server">
<div class="sectionYourProtection">
<div class="sectionPadding">
<h4>Title</h4>
</div>
<div class="innerPanelMyCover">
<br/>
<ul class="bulletList" type="square">
<li><span class="spBold">Monthly Payment: </span><asp:Label ID="lblMonthlyPayment" runat="server" Text=""></asp:Label </div>
</div>
</div>
code behind:
lblMonthlyPayment.Text = Convert.ToString(application.Premium);
The lblMonthlyPayment needs to change depending on what the user selects on a content page but as the control is within an update panel it is not working.
Content page:
<asp:UpdatePanel ID="upUpSell" runat="server">
<ContentTemplate>
<div id ="divSlider" runat="server" visible="false">
<br />
<h3>If you want, you can change the amount ... </h3>
<hr />
<div class="sliderContainer">
<telerik:RadSlider id ="rdSlider" AutoPostBack="true" runat="server" Orientation="Horizontal" Width="450"
Height="70" MinimumValue="0" MaximumValue="50" LargeChange="10" TrackPosition="BottomRight"
ItemType="Tick" IsSelectionRangeEnabled="false" SelectionStart="10" SelectionEnd="30" Skin="Default" DragText="Select Premium" >
</telerik:RadSlider>
</div>
<asp:Label ID="lblValue" runat="server" Text="" Visible="false"></asp:Label>
</div>
c#
protected void Page_Load(object sender, EventArgs e)
{
//if (!Page.IsPostBack)
//Pre-populate the screen with data from ApplicationBO
ApplicationBO application = (ApplicationBO)Session["Application"];
if (!Page.IsPostBack)
{
if (Session["Application"] == null)
application = new ApplicationBO();
else
application = (ApplicationBO)Session["Application"];
lblclientName.Text = application.FirstName;
rdSlider.Value = Convert.ToDecimal(application.Premium);
lblMonthlyPayment.Text = Convert.ToString(application.Premium);
}
divSlider.Visible = true;
string upsellValue = Convert.ToString(application.Premium);
if (divSlider.Visible == true)
{
upsellValue = Convert.ToString(rdSlider.Value);
// Save the current page information
application.Premium = Convert.ToDecimal(upsellValue);
}
Thanks in advance...

Wrap the label with an UpdatePanel with UpdateMode="Always"