how to change the inner html of a div - asp.net

i have a div and an html editor and trying to:
add the div inner html to the
editor. (thats done)
then any changes done in the editor
is saved back in the div.
here is the backcode :
protected void Page_Load(object sender, EventArgs e)
{
Editor.Content = cvDiv.InnerHtml;
}
protected void preview(object sender, EventArgs e) //this is an onclick event
{
cvDiv.InnerHtml = Editor.Content;
}
and the code for the editor:
<asp:ScriptManager runat="server" />
<cc1:Editor ID="Editor" runat="server" OnContentChanged="preview" />
<asp:Button runat="server" ID="eButton" CssClass="eButton" Text="Edit" OnClick="Edit" />// this is the button that is supposed to save
but it doesnt work.
so what i am trying to do is save whatever changes made in the editor to the div
using asp.net 3.5, and the ajax toolkit editor.
thanks in advance.

This is an example i've made to show you a working code.
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<asp:TextBox id="editor" runat="server" AutoPostBack="true"></asp:TextBox>
<asp:Button ID="Save" runat="server" OnClick="SaveChange" Text="Save" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div id="preview" runat="server"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="editor" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
ASPX.CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack) editor.Text = preview.InnerHtml;
else preview.InnerHtml = editor.Text;
}
protected void SaveChange(object sender, EventArgs e)
{
string thingsToSave = preview.InnerHtml;
//Save to db/file/xml
}
}

Can you try using Literal control rather than a server side <div /> ?

Related

UpdatePanel dynamically loaded Web UserControl will disappear after clicking any button inside the UserControl

I've a ASP.Net page (Default.aspx) which will load UserControl (ucontrol.ascx) dynamically into an UpdatePanel. By using UpdatePanel, we believe we're able to prevent the entire page to be posted-back.
My problem is, within the UserControl, we have some form controls, such as inputs and buttons; after the UserControl is loaded, clicking on any button inside the UserControl will cause the UpdatePanel to be blanked. During the investigation, I found that, breakpoints within the Button1_Click() in the code-behind for the UserControl is never reached. Please reference to the code below, this references to [REFERENCE]1. It's an urgent task, please kindly help.
Thanks!
William
Default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span>This is hosting page</span><br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Add UserControl" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="PartHolder" runat="server">
</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.aspx.cs:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
loadparts();
}
private void loadparts(){
Control formpart = LoadControl("ucontrol.ascx");
formpart.ID = "formpart";
PartHolder.Controls.Add(formpart);
}
}
ucontrol.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ucontrol.ascx.cs" Inherits="ucontrol" %>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
This is Web User Control in UpdatePanel<br />
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
ucontrol.ascx.cs:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class ucontrol : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
TextBox1.Text = "";
TextBox1.Focus();
}
}
Here's what's happening:
First page load. No user control on page.
Person clicks Button1 on the page.
Page posts back (update panels do a full postback behind the scenes) and your Button1_Click handler on the page is run, which loads the user control into the page.
User now sees the user control and clicks ITS Button1.
Page posts back, but this time the Button1_Click handler on the page is not run (different button was clicked, even though you named them the same). Which means that loadparts() is not called and the user control is NOT loaded into the control tree.
Your Button1_Click handler in the user control is not run because the user control is not around to see that the button was clicked.
What you need to do is ensure that the user control is loaded into the page's control tree, even when you click the user control's button. That's why Andrew suggested you put the loadparts() into the Page_Load event. I can see that doesn't fit with the flow of your page, so you'll have to find another way to load it at the correct times.
try putting loadparts() method inside
protected void Page_Load(object sender, EventArgs e)
{
if(!isPostBack)
{
loadparts();
}
}
This worked for me:
protected void Page_Load(object sender, EventArgs e)
{
if(isPostBack)
{
loadparts();
}
}

Custom validator dynamic ServerValidate using Reflection

I have a UserControl which contains a TextBox and a CustomValidator.
I would like to set the CustomValidator.ServerValidate to a method in the page that contains the UserControl
I found this code which will allow me to dynamically set the custom validators validation function:
cusvCustom.ServerValidate += new System.Web.UI.WebControls.ServerValidateEventHandler(MethodName);
The problem is that a string value won't work there. It needs to be a reference to the method. Is it possible to use reflection (or some other method) to get a valid reference to the parent controls method using only the string name of it? The reason I want to use the string value of the method name is so I can place the control on the page thusly:
<uc1:TextBoxField ID="tbUserName" runat="server" CustomValidationMethod="ValidateUserName" />
I did some research and I found Type.GetMethod and MethodInfo but I can't get them to work. Primarily because I don't know the type of the parent control and can't figure out how to get it.
EDIT: My code for matt-dot-net
WebUserControl.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl.ascx.cs" Inherits="WebApplication1.WebUserControl" %>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Custom Validation Failed" OnServerValidate="CustomValidator1_ServerValidate" />
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Submit" CausesValidation="true" />
WebUsecControl.ascx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebUserControl : System.Web.UI.UserControl
{
public ServerValidateEventHandler Validating;
protected void CustomValidator1_ServerValidate(object sender, ServerValidateEventArgs e)
{
if (Validating != null)
Validating(sender, e);
}
}
}
TestPage.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="WebApplication1.TestPage" %>
<%# Register Src="~/WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" OnValidating="WebUserControl1_Validating" />
</div>
</form>
</body>
</html>
TestPage.aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class TestPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//WebUserControl1.Validating += WebUserControl1_Validating;
}
protected void WebUserControl1_Validating(Object sender, ServerValidateEventArgs e)
{
e.IsValid = false;
}
}
}
As you can see it's almost an exact duplicate of your code. For whatever reason it does not work for me as I have it here. When I click on the button the page reloads and is the same. When I un-comment the one line though and click the button then I see the error message.
I think this is what you want to do:
WebUserControl.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Custom Validation Failed"
ControlToValidate="TextBox1" OnServerValidate="CustomValidator1_ServerValidate" />
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Submit" CausesValidation="true" />
And in your code behind:
public partial class WebUserControl : System.Web.UI.UserControl
{
public event ServerValidateEventHandler Validating;
protected void CustomValidator1_ServerValidate(object sender, ServerValidateEventArgs e)
{
if (Validating != null)
Validating(sender, e);
}
}
This will allow you to use the control on a page the way you want to:
<uc1:WebUserControl ID="WebUserControl1" runat="server" OnValidating="WebUserControl1_Validating" />
Then in your .aspx.cs code behind:
protected void WebUserControl1_Validating(Object sender, ServerValidateEventArgs e)
{
//do validation here
}

ASP.NET AJAX Doesnt Work

I have a very simple AJAX example that doesn't work.
It is from the Microsoft tutorials on AJAX.
When I click on button "Button1" AJAX should execute but the whole page submits.
Here is the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="1111.aspx.cs" Inherits="_1111" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<p>
DropDownList AutoPostBack SelectedIndexChanged EventArgs Sort ... Since you will
be using AJAX to process your SelectedIndexChanged event, set the AutoPostBack property
of the DropDownList to false. ...</p>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:Label ID="label2" runat="server"></asp:Label><br />
<asp:Label ID="label3" runat="server"></asp:Label><br />
<center>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button 1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</center>
</div>
</form>
</body>
</html>
Code-behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _1111 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
label1.Text = System.DateTime.Now.ToString();
label2.Text = System.DateTime.Now.ToString();
label3.Text = System.DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
label1.Text = System.DateTime.Now.ToString();
}
}
The code works for me.
The reason is possibly you are not configuring your web.config file properly. See what is inside your file.
It needs some components to support MS AJAX Extensions.
Go to
http://www.asp.net/ajax/videos/how-do-i-add-aspnet-ajax-features-to-an-existing-web-application.
Have a look at the tutorial to see if that helps.
I think your misunderstanding is in the Page_Load event, which will always fire, even for partial post-backs. You can handle that by making any initialization code conditional, as in:
if (!IsPostBack) {
label1.Text = System.DateTime.Now.ToString();
label2.Text = System.DateTime.Now.ToString();
label3.Text = System.DateTime.Now.ToString();
}

Cant seem to hide TableRow on AJAX postback

I wolud like to hide/unhide a TableRow through ASP.NET AJAX when a checkbox is clicked.
I have this code for the checkbox:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages" AutoPostBack="true"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
</Triggers>
</asp:UpdatePanel>
and this for the TableRow
<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell VerticalAlign="Middle">Test Row</asp:TableCell>
</asp:TableRow>
This method is called when the checkbox is clicked:
protected void OnViewPages(object sender, EventArgs e)
{
if(cbViewPages.Checked)
{
PagesRow.Visible = true;
}
else
{
PagesRow.Visible = false;
}
}
OnViewPages is definitely called, I can see that through the debugger.
And if I remove the AJAX code, OnViewPages is hidden/unhidden as required.
Why doesn't this hide/unhide functionality work with the AJAX code?
Doh!
I have a partial answer, the TableRow is not in the Update panel.
But you cant put an UpdatePanel around a TableRow.
So that's my new question, how do you put an UpdatePanel around a TableRow?
A couple of options. You could put the update panel around the entire table (this is what Petras is suggesting). You could also use JavaScript to do this. In the event that fires when your checkbox is checked/unchecked, just call
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setRowVisibility", "setRowVisibility(" & IIf(cbViewPages.Checked, "true", "false") & ");", True)
This will call a JavaScript function you can define on your page like this:
function setRowVisiblity(visible) {
var row = document.getElementById('<%=PagesRow.ClientID %>');
if (visible) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
This is MUCH more efficient than using and Update Panel, but it's a little more work. I prefer efficiency, but that's just me. :)
Here's the solution:
ASPX page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptMgr" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages" AutoPostBack="true"/>
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>123</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell>Row To Hide</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Code behind page:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;
public partial class index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void OnViewPages(object sender, EventArgs e)
{
if(cbViewPages.Checked)
{
PagesRow.Visible = true;
}
else
{
PagesRow.Visible = false;
}
}
}

LinkButton's server-Side event not firing when disabled=true, and inside an UpdatePanel, in IE8

It is hitting the Page_Load event, but not the LinkButton's click :
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<asp:LinkButton ID="btnRenewAll" runat="server" onclick="LinkButton1_Click" OnClientClick="javascript:return ClientMe()">LinkButton</asp:LinkButton>
<br />
<asp:Label ID="lblMe" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
<script>
function ClientMe() {
var btnRenewall = document.getElementById('<%= btnRenewAll.ClientID %>');
btnRenewall.disabled = true;
alert("Hello");
return true;
}
</script>
</html>
CodeBehind :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
lblMe.Text = "Checked";
UpdatePanel1.Update();
}
}
If you replace your JS with:
function ClientMe() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(startRequest);
return true;
}
function startRequest(sender, e) {
var btnRenewall = document.getElementById('<%= btnRenewAll.ClientID %>');
btnRenewall.disabled = true;
alert("Hello");
}
it should work. citing:
link text
Change this line:
btnRenewall.disabled = 'disabled';
Here is a list of the minimized attributes in HTML and how they should be written in XHTML :
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"

Resources