Develop Reference

Creating Comment box With Reply Option using Asp.Net

I am tring to Create a Comment box having reply option for my Website
Below Is My aspx page
<div>
<asp:Repeater runat="server" ID="repAnswer">
<ItemTemplate>
<h6>Answer</h6>
<p><%# Eval("Answer") %></p>
<asp:Label runat="server" ID="lblAnsId" Text='<%# Eval("AnsId")%>' Visible="false"></asp:Label>
<a class="link" id='lnkReplyParent<%#Eval("AnsId") %>' href="javascript:void(0)" onclick="showReply(<%#Eval("AnsId") %>);return false;">Reply</a>
<a class="link" id="lnkCancle" href="javascript:void(0)" onclick="closeReply(<%#Eval("AnsId") %>);return false;">Cancle</a>
<div id='divReply<%#Eval("AnsId") %>' style="display:none;">
<asp:TextBox ID="textCommentReplyParent" CssClass="input-group" runat="server" Width="300px" TextMode="MultiLine" ></asp:TextBox>
<br />
<asp:Button ID="btnReplyParent" runat="server" Text="Reply" OnClick="btnReply_Click" /></div>
</ItemTemplate>
</asp:Repeater>
</div>
<div style="margin-top:100px">
<h5>Your Answer</h5>
<hr />
<CKEditor:CKEditorControl ID="txtAddAnswer" BasePath="Admin/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
<asp:Button runat="server" ID="btnAnswer" Text="Submit Answer" OnClick="btnAnswer_Click"/>
</div>
i have used Repeater to bind my answer or comment. Inside the repeater i have given two link pne is of reply other is of cancel.when someone click on the reply a new textbox and button open which is used to give the reply
Below is my cs page
protected void btnReply_Click(object sender, EventArgs e)
{
foreach (RepeaterItem row in repAnswer.Items)
{
Label lblNewAnsIdholder = (Label)row.FindControl("lblNewAnsIdholder");
TextBox txtReplyToAnswer = (TextBox)row.FindControl("txtReplyToAnswer");
OnlineSubjects onlinesub = new OnlineSubjects()
{
reply = txtReplyToAnswer.Text.Trim(),
AnsId = Convert.ToInt32(lblNewAnsIdholder.Text.ToString())
};
onlinesub.addAnswer();
}
}
i dont know how to use textbox in repeater but after searching it through google i get something like this which i am not sure thats right or wrong.
And the line where i have created my object for my class i am getting error from there
I am tring to pass the value of textbox as a paramter
Plz help me to do this.
Thank You

You Should try,
TextBox txtReplyToAnswer = ((TextBox)row.FindControl("txtReplyToAnswer")).Text;
Hope this will work.

Textchange event not working

I am doing a preview of what I am currently typing in a web page using ASP.NET. What I am trying to achieve is that whenever I type or change text in the textbox, the <h3> or label element will also change and always copy what the textbox value is without refreshing the browser. Unfortunately I cannot make it work. Here is what I tried.
.ASPX
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
.CS
protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
}
I Tried Adding Autopostback = true... but it only works and refreshes the page and i need to press tab or enter or leave the textbox :(
UPDATE: I Tried This - enter link description here But Still Doesnt Work :(

Just add this script function in your code and in body write onload and call that function.
Javascript:
<script type="text/javascript">
function startProgram() {
setTimeout('errorcheck()', 2000);
}
function errorcheck() {
setTimeout('errorcheck()', 2000);
document.getElementById("NewsTitlePreview").innerText = document.getElementById("Titletxt").value
document.getElementById("NewsContentPreview").innerText = document.getElementById("Contenttxt").value
}
</script>
<body onload="startProgram();">
<form id="form1" runat="server">
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" ></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</form>
</body>

You are right in your analysis of the behavior of the control (it only fires the event when you leave the control), even when you have AutoPostBack="True".
MSDN says it all:
The TextBox Web server control does not raise an event each time the user enters a keystroke, only when the user leaves the control. You can have the TextBox control raise client-side events that you handle in client script, which can be useful for responding to individual keystrokes.
So you either have to be satisfied with the current behavior, or set up some client side event handling to do some validation, etc. client side.

Download and include JQuery library. And also modify title and content textbox so they don't change their Id's
Title
<asp:TextBox ID="Titletxt" ClientIDMode="Static" runat="server"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" ClientIDMode="Static" runat="server"></asp:TextBox>
Then add this script and it will work.
<script>
$(document).ready(function () {
$('#Titletxt').on('input', function () {
$("#NewsTitlePreview").text($(this).val());
});
$("#Contenttxt").on('input',function () {
$("#NewsContentPreview").text($(this).val());
});
});
</script>

One of the best idea...
Just change your code to this. it works
ASPX
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ViewStateMode="Enabled">
<ContentTemplate>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
<div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>
<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
.CS
protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
UpdatePanel1.Update();
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
UpdatePanel1.Update();
}

Try this it will work this how change event call using jquery dont forget to add google apis
<script>
$('#txtbox').change(function() {
alert("change Event");
});
</script>

Is there a simple way to call a method used to change display from a parent control?

I am trying to create a page using Ajax Tabs and user controls. The .aspx page contains a reference to a default control
<%# Register src="~/Controls/DefaultControl.ascx" tagname="DefaultControl" tagprefix="uc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<uc1:DefaultControl ID="DefaultControl1" runat="server" />
<%--<uc2:CorrespondenceControl ID="CorrespondenceControl" runat="server" />--%>
</asp:Content>
And the DefaultControl.ascx is using Ajax Tabs, one of which contains a child control within an Update Panel
asp:TabPanel ID="tbpnl2" runat="server" HeaderText="Tab With GridView with select buttons" Visible="True">
<ContentTemplate>
<asp:UpdatePanel ID="updpnl2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc2:Control1 ID="Control1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
The DefaultControl holds a method in the code behind page which is successfully called directly from other tabs (with the markup contained directly in DefaultControl.ascx) on the DefaultControl.ascx page to change the display when Select is clicked on a gridview -
public void ShowPage()
{
gv1.DataBind();
fv1.DataBind();
tbpnl1.Visible = true; //show details tab
tbpnl2.Visible = true;
tab1.ActiveTabIndex = 1; //set details tab as current tab
txt.Text = String.Empty;
updPnl1.Update();
}
I am trying to call this method from the child Control1 when Select on a gridview is selected there, but obviously none of the elements referenced are in Control1.
I have been searching for a way to be able to use the existing method and have seen a number of suggestions including Interfaces, references like ((DefaultControl)this.DefaultControl).ShowPage(); on the code behind Control1
But as I am just starting to program I have no idea how to implement any of these solutions or what the syntax should be to get them to work.
Is there a simple, even if dirty, way to use the method from a parent control in a child control contained in an Ajax tab?

Not sure if this is what you are looking for... Below example shows calling of direct UserControl and nested UserControl method's from Web page
Default.aspx
<%# Register TagPrefix="uc" TagName="WebUserControl" Src="WebUserControl.ascx" %>
<%# Register TagPrefix="uc2" TagName="WebUserControl2" Src="WebUserControl2.ascx" %>
<form runat="server" id="form1">
<uc:WebUserControl ID="control1" runat="server" />
<hr />
<h4>
At Default.aspx</h4>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Call the function" />
</form>
Default.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
control1.CallMe();
var control2 = (WebUserControl2)control1.FindControl("control2");
control2.CallMe2();
}
WebUserControl.ascx
<%# Register TagPrefix="uc2" TagName="WebUserControl2" Src="WebUserControl2.ascx" %>
<div runat="server">
<h3>
WebUserControl</h3>
<asp:Label ID="lbl1" Text="I am ready at WebUserControl" runat="server"></asp:Label>
<div runat="server" id="toAdd" style="color: Red;">
</div>
</div>
<hr />
<uc2:WebUserControl2 ID="control2" runat="server" />
WebUserControl.ascx.cs
public void CallMe()
{
Label lbl = new Label();
lbl.Text = "I am at WebUserControl";
toAdd.Controls.Add(lbl);
}
WebUserControl2.ascx
<div runat="server">
<h3>
WebUserControl2</h3>
<asp:Label ID="lbl1" Text="I am ready at WebUserControl2" runat="server"></asp:Label>
<div runat="server" id="toAdd" style="color: Red;">
</div>
</div>
WebUserControl2.ascx.cs
public void CallMe2()
{
Label lbl = new Label();
lbl.Text = "I am at WebUserControl2";
toAdd.Controls.Add(lbl);
}
Hope it helps someone...!!

Want to be able to close a Modal Popup when clicked outside of it

I have a modal popup extender and a panel inside of an update panel. I do have a Close button which I bind with the CancelControlId. I however, would like to be able to click outside of my modal/panel to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any help or advice is much appreciated. Thanks.
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
<asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
<asp:UpdatePanel ID="pnlMap" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div class="popup_large">
<asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
<br />
<asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Here is a link to an example that adds to the background onclick to close the modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />

C#
<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />
JavaScript (using jQuery)
jQuery('.jsMpeBackground').click(function () {
var id = jQuery(this).attr('id').replace('_backgroundElement', '');
$find(id).hide();
});

I had to do it this way so that I was able to click the actual popup without it closing, as I have functional user controls such as tab sections and textboxes on the popup.
<script type="text/javascript">
//Hide's Doc Center when clicking outside
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
$addHandler($find("MPE")._backgroundElement, "click", closePopup);
}
}
function closePopup(e) {
$find("MPE").hide();
}
//End
</script>
Now just make sure your BehaviorID in your actual ModelPopupExtender matches up with the tag above. Like so:
<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />
Basically I think this just handles the 'click' event of the _backgroundElement attr of the modal popup, and on that event runs the closePopup() function.

write a dynamically created script that is added, in my example, when the modal popup extender is loaded. Note: In order to bind this event handler to the ModalPopupExtender.OnLoad event, you need to add a reference (in client-side code, you can add 'OnLoad="mpeExample_Load"' to your ModalPopupExtender tag).
protected void mpeExample_Load(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"hideModalPopupViaClient", String.Format(#"function hideModalPopupViaClient() {
{
var modalPopupBehavior = $find('{0}');
if (modalPopupBehavior) modalPopupBehavior.hide();}}",
mpeExample.ClientID), true);
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(#"function pageLoad() {
{
var backgroundElement = $get('{0}_backgroundElement');
if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);
}}",
mpeExample.ClientID), true);}

Switch Ajax Tabs in TabContainer by Tab ID

I have an ajax control toolkit TabContainer. The active tab is controlled using c# in the following manner below. I have many tabs on my tabcontainer.
Is it possible to switch tabs by referencing the tab ID in C# as opposed to the number of the tab?
c#
TabContainerMain.ActiveTabIndex = 5;
HTML
<asp:TabContainer ID="TabContainerMain" runat="server" ActiveTabIndex="4" Width="100%"
Height="100%" CssClass="" ViewStateMode="Enabled">
<asp:TabPanel runat="server" HeaderText="Tab_Monitor" ID="Tab_Monitor">
</asp:TabPanel>
<asp:TabPanel ID="Tab_Remove_Item" runat="server" HeaderText="Tab_Remove_Item">
<ContentTemplate>
<div class="TabControls">
<p>
Howdy, I'm in Section Tab_Remove_Item .</p>
</div>
<div class="TabsAction">
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Tab_2nd_Sign_System" runat="server" HeaderText="Tab_2nd_Sign_System">
<ContentTemplate>
<div class="TabControls">
<p>
Howdy, I'm in Section Tab_2nd_Sign_System .</p>
</div>
<div class="TabsAction">
</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="Tab_Configure_Device" runat="server" HeaderText="Tab_Configure_Device">
<ContentTemplate>
<div class="TabControls">
<p>
Howdy, I'm in Section Tab_Configure_Device .</p>
</div>
<div class="TabsAction">
</div>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>

Yes, you can use the ActiveTab property. For example:
get
if(TabContainerMain.ActiveTab == this.Tab_Remove_Item)
{
// ...
}
set
TabContainerMain.ActiveTab = this.Tab_2nd_Sign_System;
If you only have the ID as string, you can use LINQ (or a loop) to get the reference:
String tabPanelID = "Tab_Remove_Item";
TabContainerMain.ActiveTab = TabContainerMain.Tabs
.Cast<AjaxControlToolkit.TabPanel>()
.First(t => t.ID == tabPanelID);