MultiView + UpdatePanel = NotWorking - c#

I am implementing a multiview using a RadioButtonList to flip its view and also AJAX.
My problem is if I set my default RadioButton (NavigateRadioButtonList.Items[0].Selected = true;), that RadioButton would become dead, ie. when I focus on it, the MultiView doesn't response at all.
This only happens in AJAX. Normal asp page doesn't have that problem.
I am at my wit's end. Can some expert help??
The code is as follow
<%# Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Init(object sender, EventArgs e)
{
for (int i = 1; i < 8; i++)
{
string RadioText = "View" + i.ToString();
NavigateRadioButtonList.Items.Add(RadioText);
Literal DescriptionTag = new Literal();
DescriptionTag.Text = "Text" + i.ToString();
View NewView = new View();
NewView.Controls.Add(DescriptionTag);
MultiViewMenu.Views.Add(NewView);
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
NavigateRadioButtonList.Items[0].Selected = true;
MultiViewMenu.ActiveViewIndex = 0;
}
}
protected void ChangeView(object sender, EventArgs e)
{
MultiViewMenu.ActiveViewIndex = NavigateRadioButtonList.SelectedIndex;
}
</script>
<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"></asp:ScriptManager>
<asp:RadioButtonList ID="NavigateRadioButtonList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ChangeView"></asp:RadioButtonList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiViewMenu" runat="server">
</asp:MultiView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NavigateRadioButtonList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>

Related

Can't save innerText / innerHTML of an editable div in asp.net c#

I try to save the changed text of an editable div. I put some text on page load into the div and change it in the browser, but I can't save the changes because the innerHTML content doesn't change.
This is my aspx file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
</head>
<body>
<form id="form1" runat="server">
<div contenteditable="true" runat="server" id="txtText" ></div>
<asp:Button ID="btnSave" runat="server" Text="Speichern" OnClick="btnSave_Click" />
</form>
</body>
</html>
This is the code behind file:
public partial class editWordModule : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtText.InnerHTML = "This is the unmodified text";
}
protected void btnSave_Click(object sender, EventArgs e)
{
string test = txtText.InnerHtml;
//still shows "This is the unmodified text" while it was changed before in the div
}
}
}
So how do I save the edited innerHTML of the div?
Make a little trick with JavaScript.
When the button is clicked, get the innerHTML of DIV and put into a asp:HiddenField
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function ChangeDiv() {
var div = document.getElementById("txtText");
var hdn = document.getElementById("hdnText");
hdn.value = div.innerHTML;
}
</script>
<form id="form1" runat="server">
<div contenteditable="true" id="txtText"></div>
<asp:HiddenField ID="hdnText" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnSave" runat="server" Text="Speichern" OnClick="btnSave_Click" OnClientClick="ChangeDiv()" />
</form>
</body>
</html>
And in your code behind read the hidden field.
string hdn = hdnText.Value

Showing countdown timer on a button

I find a code for setting countdown timer but it only shows minutes not seconds when page is load and also I want that when user click on button then countdown should start and also time (e.g 10:59) should be shown on the clicked button.
Following is the code:
aspx code (ASP.net C#)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Reservation.aspx.cs" Inherits="Reservation" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManagerTimer" runat="server"></asp:ScriptManager>
<asp:Timer ID="timer1" runat="server" Interval="1000" OnTick="timer1_tick"></asp:Timer>
<asp:UpdatePanel id="updPnl"
runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnTimer" runat="server" BackColor="#05CC00" Height="35px" Text="Reserve" Width="89px" style="border-radius:8px" OnClick="btnTimer_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" EventName ="tick" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
aspx.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Reservation : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!ScriptManagerTimer.IsInAsyncPostBack)
Session["timeout"] = DateTime.Now.AddMinutes(10).ToString();
}
protected void timer1_tick(object sender, EventArgs e)
{
if (0 > DateTime.Compare(DateTime.Now,
DateTime.Parse(Session["timeout"].ToString())))
{
btnTimer.Text = ((Int32)DateTime.Parse(Session["timeout"].
ToString()).Subtract(DateTime.Now).Minutes).ToString();
}
}
}
if (0 > DateTime.Compare(DateTime.Now,
DateTime.Parse(Session["timeout"].ToString())))
{
btnTimer.Text = ((Int32)DateTime.Parse(Session["timeout"].
ToString()).Subtract(DateTime.Now).Minutes).ToString("HH:mm:ss");
}
TimeSpan.ToString() offers a variety of string formats. More info : MSDN
:)

UpdatePanel.update on timer.tick

Yesterday I wrote simle example of updating UpdatePanel on timer.tick event. I noticed that on timer.tick event code of my form class is running from the beginning. Why? How to avoid it?
WebForm1.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestApp.WebForm1" %>
<!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" ChildrenAsTriggers="False"
UpdateMode="Conditional" onload="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="5000" ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
WebForm1.aspx.cs:
namespace TestApp
{
public partial class WebForm1 : System.Web.UI.Page
{
static Random rnd = new Random();
int b = rnd.Next(100); // always 1 value
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Timer1_Tick(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
int a = rnd.Next(100); // changing value
Label1.Text = a.ToString() + " - changing value<br />" + b.ToString() + " - static value";
}
}
}
Why: Because the timer is enabled when the page loads. When the time you sit elapsed it will cause a postback to the server which will reload your page again, and this is why you see the debugger goes at the beginning of you form.
How to avoid it: Simply set Enabled property to false on page load, and then set it to true whenever you want the timer to start.
Documentation from MSDN "The Tick event is raised when the number of milliseconds specified in the Interval property has elapsed either since the Web page was rendered or since the previous Tick event."

FileUpload Null reference error

I want to use FileUpload Control to save Image to Database. The HasFiles return always false after I click on BtnSave. I tried with and without UpdatePanel but could not find the solution.
My code is:
protected void BtnSave_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile == true)
{
var ChNumber = txtNumber.Text;
string img = this.FileUpload1.PostedFile.FileName;
//Save image to database function
}
else
{
lblStatus.Text="Image not Uploaded";
}
}
Try with a simple form without UpdatePanel. Here's the markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnSave" runat="server" Text="Button" OnClick="BtnSave_Click" />
<asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>
<asp:Label ID="lblStatus" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
And here's the code:
using System;
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void BtnSave_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile == true)
{
var ChNumber = txtNumber.Text;
string img = this.FileUpload1.PostedFile.FileName;
//Save image to database function
}
else
{
lblStatus.Text = "Image not Uploaded";
}
}
}
I set a brekapoint at if (FileUpload1.HasFile == true) and see the uploaded file is there.

Cannot Unregister UpdatePanel exception with Cross Page Posting

I am getting the dreaded exception "Cannot unregister UpdatePanel with ID 'UpdatePanel' since it was not registered with the ScriptManager" when trying to combine a popup window and some Cross-Page Posting. I've been able to reproduce the problem with a small example.
I have seen other questions that handle the Unload event for the UpdatePanel, but that doesn't seem to work with the addition of the Cross Page Posting.
How do I get around this issue?
To duplicate the issue with the code below:
Start the Setup page
Press the View Popup link
Close the popup
Press the Next button to transfer to the Target page
Press the Back button to transfer to the Setup page
Press the View link and close the popup
Press the Next button, and see the failure
Here are the highlights (forgive the length, but it should be cut-and-pastable):
Setup.aspx
<head runat="server">
<title>Setup </title>
<script type="text/javascript">
function openCenteredWindow(url, height, width, name, parms) {
//Snip setting up window location stuff
var win = window.open(url, name, winParms);
return win;
}
</script>
</head>
<body>
<h1>Setup Page</h1>
<form id="aspnetForm" runat="server">
<div>
<asp:TextBox ID="txtData" runat="server" Width="80%" Text="<%# Information %>" />
<br />
<asp:LinkButton ID="lbViewData" runat="server"
OnClientClick="aspnetForm.target='ViewDataPopup';"
Text="View In Popup" /> <br />
<asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_Click" />
</div>
<div>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updatepanel ID="UpdatePanel" runat="server" OnUnload="UpdatePanel_Unload"></asp:updatepanel>
</div>
</form>
</body>
Setup.Aspx.cs
public partial class Setup : System.Web.UI.Page
{
protected override void LoadViewState(object savedState)
{
base.LoadViewState(savedState);
if (this.ViewState["Information"] != null)
_Information = this.ViewState["Information"].ToString();
}
protected override object SaveViewState()
{
this.ViewState["Information"] = _Information;
return base.SaveViewState();
}
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null && PreviousPage is TargetPage)
{
_Information = ((TargetPage)PreviousPage).SetupData;
}
else if (!Page.IsPostBack)
{
_Information = String.Format("This test started at {0}", DateTime.Now);
}
Page.DataBind();
lbViewData.PostBackUrl = "ViewData.aspx?u=0";
lbViewData.Attributes.Add("onclick", "JavaScript:openCenteredWindow(\"ViewData.aspx?u=0\", 400, 300, \"ViewDataPopup\", 'scrollbars=yes');");
}
private string _Information;
public string Information
{
get { return _Information; }
}
protected void btnNext_Click(object sender, EventArgs e)
{
HttpContext.Current.Server.Transfer("~/TargetPage.aspx");
}
}
ViewData.aspx
<%# PreviousPageType VirtualPath="~/Setup.aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title>View Data</title>
<script type="text/javascript">
function fixForm() {
opener.document.getElementById("aspnetForm").target = "";
opener.document.getElementById("aspnetForm").action = "";
}
</script>
</head>
<body onload="fixForm()">
<form id="aspnetForm" runat="server">
<div>
<h2 >View Data</h2>
</div>
<asp:Label ID="lblData" runat="server" Text="<%# SetupData %>" />
</form>
</body>
ViewData.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
Setup setup = (Setup)PreviousPage;
this.SetupData = setup.Information ?? "Data not set in Setup Page";
}
Page.DataBind();
}
private string _setupData = "Did not get updated data";
protected string SetupData
{
get { return _setupData; }
set { _setupData = value; }
}
TargetPage.aspx
<%# PreviousPageType VirtualPath="~/Setup.aspx" %>
<body style="background-color: #9999BB">
<h1>Target Page</h1>
<form id="aspnetForm" runat="server">
<div>
<asp:Label ID="lblData" runat="server" Text="<%# SetupData %>" /><br />
<asp:Button ID="btnBack" runat="server" Text="Back" OnClick="btnBack_Click" />
</div>
</form>
</body>
TargetPage.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (this.PreviousPage == null)
Response.Redirect("Setup.aspx");
this.SetupData = PreviousPage.Information;
}
Page.DataBind();
}
public string SetupData
{
get { return ViewState["SetupData"].ToString(); }
set { ViewState["SetupData"] = value; }
}
protected void btnBack_Click(object sender, EventArgs e)
{
HttpContext.Current.Server.Transfer("~/Setup.aspx");
}
As you can see, it's enough to have the UpdatePanel just sitting on the page and doing nothing for this error to occur.

Categories

Resources