The problem I am facing is that when there is validation on a page and I am trying to display a model pop-up, the pop-up is not getting displayed. And by using fire-bug I have noticed that an error is being thrown.
The button that is used to display the pop-up has cause validation set to false so I am stuck as to what is causing the error.
I have created a sample page to isolate the problem that I am having, any help would be greatly appreciated.
The Error
function () {Array.remove(Page_ValidationSummaries, document.getElementById("ValidationSummary1"));}(function () {var fn = function () {AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("mpeSelectClient", true);Sys.Application.remove_load(fn);};Sys.Application.add_load(fn);}) is not a function
http://localhost:1131/WebForm1.aspx
Line 136
ASP
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CLIck10.WebForm1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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">
</asp:ScriptManager>
<div>
<asp:Button ID="btnPush" runat="server" Text="Push" CausesValidation="false" onclick="btnPush_Click" />
<asp:TextBox ID="txtVal" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtVal" ErrorMessage="RequiredFieldValidator" />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">
<asp:UpdatePanel ID="upnlSelectClient" runat="server">
<ContentTemplate>
<asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<input id="popupDummy" runat="server" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server"
TargetControlID="popupDummy"
PopupControlID="pnlSelectClient"
OkControlID="popupDummy"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
DropShadow="true" />
</div>
</form>
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CLIck10
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOK_Click(object sender, EventArgs e)
{
mpeSelectClient.Hide();
}
protected void btnCancel_Click(object sender, EventArgs e)
{
mpeSelectClient.Hide();
}
protected void btnPush_Click(object sender, EventArgs e)
{
mpeSelectClient.Show();
}
}
}
This is an issue with using both ValidationSummary and ModalPopup.
see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835
The problem is that there is a missing ";" between the two injected scripts.
Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:
[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
}
}
Try setting your ValidationSummary "Enabled" property to false on this event : "btnPush_Click"
; and then setting it back to enabled = "true" on this events : "btnOK_Click" ,"btnCancel_Click".
I think this will work if you do not have the validation summary inside the Panel that you want to pop up.But it is not a solution if you need the validation summary inside the pop up panel,...witch is my case :(.
Best Regards.
I tried all the available answer online but didn't worked any. Then i tried to move my modal popup extender at very end of the HTML and it works fine for me. Me and my users are Happy :)
I am not using FROM tag I am using Content place holder just like below:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<table id="tblMessage" runat="server" width="100%" >
<tr align="center">
<td align="center">
main content and
<asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:UpdatePanel ID="upnlSelectClient" runat="server">
<ContentTemplate>
<asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
If you notice i have validation summary inside the panel because i want error message inside the pop up(i have some additional control in pop up too). and
Some more HTML tag here as i have so many other things to do in one page. right before closing tag of TABLE
<ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server"
TargetControlID="popupDummy"
PopupControlID="pnlSelectClient"
OkControlID="popupDummy"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
DropShadow="true" />
</table>
Done.it's working. Hope that works for other too.
Are you using validation groups anywhere on the page? I've had problems with control events not firing when they are not part of a validation group and other controls on the page are part of a validation group.
I'd try changing this:
<input id="popupDummy" runat="server" style="display:none" />
to something like this:
<asp:Button id="popupDummy" runat="server" CausesValidation="false" Visible="false" />
I bet the untyped input is requiring validation.
i had the same issue, adding ValidationGroup to the validation controls did the trick!
One other thing to try, if you don't need Client Script you can disable it in the markup. Doing that fixed our problem.
EnableClientScript="false"
Related
In my ASP.NET .NET 3.5 I have custom control that has UpdatePanel inside.
In that update panel I Wizard control with 7 steps.
In second step I want to upload attachments using AsyncFileUpload.
In my scenario user can add multiple files and they will show inside grid, so after upload he can add comments to them.
Everything works file if I have AsyncFileUpload in Step that is visible at beginning, UploadedComplete event is fired correctly, but when I start from different step I can't get that Upload to work.
I was thinking about using iframe, but I would like to avoid it because I need to have 5 upload components in different Steps.
Is it possible to get that AsyncFileUpload to work in Wizard?
My code is standard, nothing magical at moment:
ToolkitScriptManager
UpdatePanel
-ContentTemplate
--Wizard
---WizardSteps
----WizardStep 1
----WizardStep 2
-----AsyncFileUpload
----WizardStep 3
----WizardStep 4
-----AsyncFileUpload 1
-----AsyncFileUpload 2
----WizardStep 5
And my simple event handler
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
var fileUpload = (AjaxControlToolkit.AsyncFileUpload)sender;
if (fileUpload.HasFile)
{
string strPath = path + e.FileName;
AsyncFileUpload1.SaveAs(strPath);
}
}
As I wrote before I get that event if I start from Step 2 (ActiveStepIndex=1).
Here is my ascx code:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="PWS_Test.ascx.cs" Inherits="kontrolki_PWS_Test" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0">
<WizardSteps>
<asp:WizardStep runat="server" title="Step 1">
<asp:Label ID="Label1" runat="server" Text="Questions"></asp:Label>
<br/>
<asp:CheckBox ID="CheckBox1" runat="server" Text="One"/>
<br/>
<asp:CheckBox ID="CheckBox2" runat="server" Text="Two"/>
</asp:WizardStep>
<asp:WizardStep runat="server" title="Step 2">
<asp:Label ID="Label2" runat="server" Text="Choose Your image"></asp:Label>
<br />
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" FailedValidation="False" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>
And here is cs code:
using System;
public partial class kontrolki_PWS_Test : System.Web.UI.UserControl
{
protected const string path = #"c:\temp\";
protected void Page_Load(object sender, EventArgs e)
{
}
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
var fileUpload = (AjaxControlToolkit.AsyncFileUpload)sender;
if (fileUpload.HasFile)
{
string strPath = path + e.FileName;
AsyncFileUpload1.SaveAs(strPath);
}
}
}
This works when I start from step 2.
As a workaround I've created a hidden div in my control just before wizard:
<div style="display: none">
<asp:AsyncFileUpload ID="AsyncFileUpload2" runat="server" />
</div>
and now my upload is working, but I would like normal solution instead of that workaround.
Add the attribute: enctype="multipart/form-data" to your <form> tag.
<form id="form1" runat="server" enctype="multipart/form-data">
...
...
</form>
This is more like I would like to know why. The link buttons work in Firefox and Chrome but not in IE-8.
EDIT:
Figures it works in IE-7 but not 8
Now if you remove the
<div>
</div>
then all the links work fine. Anyone know why.
AXPX PAGE
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="testPage.aspx.cs" Inherits="MyCompany.WEB.Pages.Secured.testPage" MasterPageFile="~/Layouts/Branding.Master" Theme="Default" %>
<%# Register Assembly="DBauer.Web.UI.WebControls.DynamicControlsPlaceholder" Namespace="DBauer.Web.UI.WebControls" TagPrefix="DBWC" %>
<%# Register TagPrefix="MyCompany" TagName="Toolbar" Src="~/Controls/ToolbarViewer.ascx" %>
<asp:Content ID="conToolbar" runat="server" ContentPlaceHolderID="cphToolbar">
<MyCompany:Toolbar ID="incToolbar" runat="server" />
</asp:Content>
<asp:Content ID="conHome" runat="server" ContentPlaceHolderID="cphMain">
<asp:ListView ID="lvProducts" runat="server" OnItemDataBound="lvProducts_ItemDataBound">
<EmptyDataTemplate>There are no primary UITs</EmptyDataTemplate>
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<asp:UpdatePanel ID="pnlMainUpdate" runat="server" UpdateMode="Conditional" >
<ContentTemplate >
<asp:Repeater ID="rptLineItems" runat="server" OnItemDataBound="rptLineItems_ItemDataBound" >
<ItemTemplate>
<asp:Panel runat="server" ID="pnLineItem" CssClass="Block ClearBoth UITOrderGroup Ledger OrderBorder FloatLeft UITOrderHeight">
<asp:LinkButton ID="lnkAddRow" runat="server" CssClass="IconButton Block Add" style="width:20px;" ToolTip="Add Row" CommandName="AddItem" OnCommand="lnkRow_Command" ></asp:LinkButton>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:ListView>
<div class="floatRight">
<asp:button ID="btnSubmit" runat="server" CssClass="DefaultButton floatRight" Text="Order" ToolTip="Click here to Order" Visible="true"></asp:button>
</div>
</asp:Content>
CODE BEHIND
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyCompany.WEB.Pages.Secured
{
public partial class testPage : MyCompanyPageBase
{
protected void Page_Load(object sender, EventArgs e)
{
lvProducts.DataSource = new List<int>() {1,2,4,5,6};
lvProducts.DataBind();
}
protected void lvProducts_ItemDataBound(object sender, ListViewItemEventArgs e)
{
var dataItem = (ListViewDataItem)e.Item;
var rptLineItems = (Repeater)dataItem.FindControl("rptLineItems");
rptLineItems.DataSource = new List<int> { 1,2,3,4,5 };
rptLineItems.DataBind();
}
protected void lnkRow_Command(object sender, CommandEventArgs commandEventArgs)
{ }
protected void rptLineItems_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
}
}
}
I suspect that your styling is causing the LinkButton not to render correctly. Remove the CssClass property from the Panel and see if that makes a difference.
While debugging this issue, I would temporarily remove the UpdatePanel too. It's easier to debug these kinds of issues without AJAX.
It turns out that You have to set the Text property for the controls in the list view.
<ItemTemplate>
<asp:Panel runat="server" ID="pnLineItem" CssClass="Block ClearBoth UITOrderGroup Ledger OrderBorder FloatLeft UITOrderHeight">
<asp:LinkButton ID="lnkAddRow" runat="server" CssClass="IconButton Block Add" style="width:20px;" ToolTip="Add Row" CommandName="AddItem" OnCommand="lnkRow_Command" Text="" ></asp:LinkButton>
</asp:Panel>
</ItemTemplate>
Is it improper to nest another control within asp:Label?
When I have another control (e.g., a button) inside my asp:Label, and I try to change CssClass on the label during an event handler, the entire label seems to disappear. I'll be grateful if someone can help me find what I might be doing wrong.
Bad1.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Bad1.aspx.cs" Inherits="Bad1" %>
<!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>Badness?</title>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBox1" runat="server" Text="check and uncheck me" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" />
<br />
<br />
<asp:Label ID="Label1" runat="server" > See me now? <asp:Button runat="server" /> </asp:Label>
</form>
</body>
</html>
Bad1.aspx.cs:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Bad1 : System.Web.UI.Page
{
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
var lab = Page.FindControl("Label1") as Label;
lab.CssClass = "foo";
}
}
Symptom: Page displays correctly at first, and after first click on "check and uncheck me". But when I click on the checkbox a second time, the label ("See me now") disappears, never to come back. If I remove the button from within the label, there's no problem. So, is the nesting what's incorrect?
I would look into using a Panel instead of a Label.
<asp:Panel ID="Panel1" runat="server" CssClass="someStyle">
<asp:Button ID="Button1" runat="server" Text="Hi"></asp:Button>
</asp:Panel>
If you're looking to style the button, then you should apply your CssClass to the button directly. Use a Panel if you're trying to apply a style to that region/block.
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();
}
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;
}
}
}