Develop Reference

Button Refresh Not clearing text

I'm making a captcha for my site, nothing fancy and for personal use. My problem is that when i hit the refresh button to bring up a new image in the captcha box it should reset the captcha text box as well.
I am setting it like so
protected void btnRefresh_Click(object sender, EventArgs e)
{
//This is the call that creates a new image
FillCaptcha();
// to clear the text box
txtCaptcha.Text = String.Empty;
}
When i run the debugger it shows the values entered in the text box and after when its set to "".
Here is the button and text box layout
<asp:TableRow>
<asp:TableCell>
Enter Below Captcha Code :
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtCaptcha" runat="server" Width="200px"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
</asp:TableCell>
<asp:TableCell VerticalAlign="middle">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<table>
<tr>
<td style="height: 50px; width:120px; border:solid; border-color:blue; text-align:center;">
<asp:Image ID="imgCaptcha" runat="server" />
</td>
<td valign="middle">
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:TableCell>
</asp:TableRow> `
Ive search on Stack for some time and everyone seems to be setting it as i have it. I have the same call to the txtCaptcha.Text = String.Empty; in another function and it works fine. any help would be grateful. If I'm unclear about something let me know and ill do my best to better explain it.
Captcha layout

You should move your TextBox inside UpdatePanel. Like So:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<table>
<tr>
<td colspan="2">
<asp:TextBox ID="txtCaptcha" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="height: 50px; width:120px; border:solid; border-color:blue; text-align:center;">
<asp:Image ID="imgCaptcha" runat="server" />
</td>
<td valign="middle">
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Read about Introduction to the UpdatePanel Control

Error Creating Control - Calendarextender3 Unknown server tag 'ajax:CalendarExtender'

While I am working with ajax calender it showing error like "Error Creating Control - Calendarextender3Unknown server tag 'ajax:CalendarExtender' ". May i know why it is like this ?
<%# Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"
tagPrefix="ajax"
%>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax" %>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<font size="4"><b> EMPLOYEE RESIGNATION</font></b>
</div>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table class="ui-accordion" align="center">
<tr>
<td align="left" class="style2">
Delete Date</td>
<td >
<asp:TextBox ID="txtDate" runat="server" />
<ajax:CalendarExtender ID="Calendarextender3"
TargetControlID ="txtdate" Format="dd/MM/yyyy" runat="server">
</ajax:CalendarExtender>
</td>
</tr>
</table>
</fieldset>
</form>
</asp:Content>
Please help me...

Myself found answer for this question. Download ajax toolkit dll and add this into toolbox.
then select toolkitscriptmanager and ajax calanderextender from toolbox. sample code below
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<tr>
<td align="left" class="style2">
<asp:Label ID="lb3" runat="server" Text="Delete Date"></asp:Label>
</td>
<asp:TextBox ID="txtto1" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" TargetControlID
="txtfrom1" Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
</td>
</tr>
</form>

Maintaining page scroll position after updatepanel partial postback

I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%# Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.
Any help would be appreciated. Thank you! Here is my code:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
<tr>
<td>
<asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
Width="400px">
<table id="MainTable">
<tr>
<td align="center" class="style3">
<asp:Label ID="GroupLabel" runat="server">
</asp:Label>
</td>
<td align="center" class="style4">
<asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
</asp:Panel>
</td>
<td width='100px'>
</td>
<td>
</td>
</tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
<table>
<tr>
<td align="center">
<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
runat="server">
</asp:ToolkitScriptManager>
<asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
<ContentTemplate>
<asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>

This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.
http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx
if you are using IE then its very simple just put the code in your
page directive.
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
MaintainScrollPositionOnPostback="true" %>
but it will not work in Firefox for that you have to add one browser
file into your website
Right click on solution explorer > Add New Item
Select Browser File and add it to App_Browsers folder.
Add MaintainScrollPositionOnPostback capability to this browser file
as written below.
<browsers>
<browser refID="Mozilla">
<capabilities>
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
</capabilities>
</browser>
</browsers>
Some times this also not work,
Then a simple solution just add a blank Update panel after the grid
and onpostback just put the focus to that update panel it will work in
any browser.
in cs postbackevent updatepanel1.Focus();
If any problem just feel free to ask or any modification reply.

Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.
You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
<script type="text/javascript">
// It is important to place this JavaScript code after ScriptManager1
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Get X and Y positions of scrollbar before the partial postback
xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
yPos = $get('<%=Panel1.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Set X and Y positions back to the scrollbar
// after partial postback
$get('<%=Panel1.ClientID%>').scrollLeft = xPos;
$get('<%=Panel1.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="300">
<%-- Some stuff which would cause a partial postback goes here --%>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

You can set focus on the control you'd like to see on the screen.
e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:
ddlCity.Focus();

I was able to resolve a similar problem with the following hack:
Add HiddenField Control to the page or control you're working in. Be sure to set the ClientIDMode to static so that it is easily accessible in JavaScript. We will use JavaScript to update this control:
<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" />
Also Add a panel control as the target to which we will insert some javascript:
<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>
Add the following JavaScript. With the window.onscroll function, we are updating our HiddenField Control. The updateScrollPosition function will be called from our C# code behind:
<script>
window.onscroll = function () {
var ctrl = document.getElementById("scrollPosition");
ctrl.value = document.body.scrollTop;
console.log(ctrl.value);
};
function updateScrollPosition(value) {
window.scrollTo(0, value);
console.log("updating scroll position");
}
</script>
Create a new C# Class and add the following method. This will allow us to insert some Javascript from the code-behind in C#:
public static class ClientScript
{
public static void InsertScript(string script, Control target)
{
HtmlGenericControl s = new HtmlGenericControl();
s.TagName = "script";
s.InnerHtml = script;
target.Controls.Add(s);
}
}
Now, in the code behind of your control or page, call the JavaScript function "updateScrollPosition(value)" with the value from our ASP.NET HiddenField Control by inserting the javascript into pnlScriptRunner with the static class we created:
protected void btnRotate_Click(object sender, EventArgs e)
{
//Do stuff with controls in your update panel here, then:
ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
UpdatePanel1.Update();
}
My btnRotate_Click event is registered as a trigger in the update panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b>Image Preview: </b><br />
<asp:Image ID="img" runat="server" CssClass="profileImage" />
<br />
<br />
<asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnRotate" />
</Triggers>
</asp:UpdatePanel>
The following references are necessary:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
Hopefully this helps!

Must be Placed Inside a Form Tag With runat=server

I have been attempting this all morning with no results. I can't seem to figure out what I'm doing wrong. I have checked out the two links (among many other unhelpful links) and have yet to solve my issue. This is a WebUserControl...
Receiving the following error:
Control 'HeadContent_CareersViewPosting_txtFirstName' of type
'TextBox' must be placed inside a form tag with runat=server.
Already attempted the suggestions here, here and here and no results. Still received the exact same message. Some new suggestions would be greatly appreciated!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Careers View Posting.ascx.cs" Inherits="ascxStagingApplication.Careers.Careers_View_Posting" %>
<asp:Panel ID="pnlResume" runat="server">
<table ID="tblMain" runat="server">
<tr>
<td>
<asp:Label ID="lblFirstName" runat="server" Text="* First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLastName" runat="server" Text="* Last Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" runat="server" Text="* Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblResume" runat="server" Text="* Resume"></asp:Label>
</td>
<td>
<asp:FileUpload ID="fupResume" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
</td>
</tr>
</table>
</asp:Panel>
The user control is currently being placed onto a dummy webpage for testing. Here is the 'dummy' page code.
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Page Careers View Posting.aspx.cs" Inherits="ascxStagingApplication.Careers.Page_Careers_View_Posting" %>
<%# Register Src="~/Careers/Careers View Posting.ascx" TagPrefix="uc1" TagName="CareersViewPosting" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<uc1:CareersViewPosting runat="server" id="CareersViewPosting" />
</asp:Content>

In ASPNet webforms - everything needs to run within a form tag.
All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts:
<form runat="server">
...HTML + server controls
</form>
In your dummy page try the following to allow the server controls to run.
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Page Careers View Posting.aspx.cs" Inherits="ascxStagingApplication.Careers.Page_Careers_View_Posting" %>
<%# Register Src="~/Careers/Careers View Posting.ascx" TagPrefix="uc1" TagName="CareersViewPosting" %>
<form runat="server">
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<uc1:CareersViewPosting runat="server" id="CareersViewPosting" />
</asp:Content>
</form>
Also - check that your ~/Site.Master file contains the <form runat="server"> if not -a s it would be fairly typical for that to be the place to have your all enclosing form tag.
You could read more here: http://www.w3schools.com/aspnet/aspnet_forms.asp

If you put right of runat="server" but still error, please try this code.
public override void VerifyRenderingInServerForm(Control control)
{
/* Confirms that an HtmlForm control is rendered for the specified ASP.NET
server control at run time. */
}
cr. from Rohit Rao
sorry for my bad skill English.

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute.
All the Asp.net controls are server controls,so these should be placed within form tag with runat="server" attribute, like this
<form runat="server">
place server controls here...
</form>

>Button bt = new Button();
>bt.ID = "dd";
>bt.Text = "Click Me";
>this.Form.Controls.Add(bt);

you can add
<form runnat="server">
// add content placeholder
</form>

CSS not working when am trying to use update panel in my webpage?

i have webpages with master page which contain my css...When i add update panel in content palce holder, css on master page are working fine but same css not working in content page holder.
<%# Page Title="District Master" Language="C#" MasterPageFile="~/webpages/MasterPage_new.master"
AutoEventWireup="true" CodeFile="frmDistrict.aspx.cs" Inherits="webpages_frmDistrict" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager2" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<div id="main_div">
<asp:UpdatePanel ID="uppnl" runat="server" Mode="Conditional">
<ContentTemplate>
<table style="width: 100%; float: left;">
<tr>
<td style="height: 100px; width: 100%; float: left;">
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearchOK" runat="server" Text="Ok" Font-Names="Verdana" Font-Size="11px"
Width="6%" Font-Bold="True" OnClick="btnSearchOK_OnClick" />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" Font-Names="Verdana" Font-Size="11px"
Width="11%" Font-Bold="True" OnClick="btnRefresh_OnClick" />
<asp:Button ID="btnClose" runat="server" Text="Close" Font-Names="Verdana" Font-Size="11px"
Width="9%" Font-Bold="True" OnClick="btnClose_OnClick" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

That is because ASP.NET changes the id of all elements in the Content Panel and prepends the name of the master like id="content" would become id="body#content". To verify check the View Source in your browser.
Solution is to update your CSS according to the generated IDs.