Develop Reference

Update Panel, confirm button and update progress don't seem to work together

At the moment I have no luck trying to get the three of them to work together and i have had only luck with the updatepanel and update progress nothing the confirm button so far.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnEnter" runat="server" Text="Update" Width="180" Style="margin-left:157px;"
OnClick="btnEnter_Click"
CssClass="button-success pure-button"/>
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="btnEnter"
ConfirmText="Do you want to see submit?"
ConfirmOnFormSubmit="false">
</asp:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="overlay"></div>
<div class="modal">
<h2>Please Wait.....</h2>
<img alt="Loading..." src="/Images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I have used the javascript function confirm before this and have taken it out
it was just a onclientclick on the button.
OnClientClick="return confirm('Are you sure you want to submit?');"
but I need to check validation of the page first before asking to submit but I am clueless about it.
here's the behind code atm for the button.
protected void btnEnter_Click(object sender, EventArgs e)
{
if(Page.IsValid )
{
}
}

You could do this even easier and more efficient using client side like this:
you just need to add onclientclick attribute in your <asp:Button ID="btnEnter" control and remove the <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" from your code.
it would be look like this then :
<asp:Button ID="btnEnter" runat="server" Text="Update"
Width="180" Style="margin-left:157px;"
OnClick="btnEnter_Click"
CssClass="button-success pure-button"
OnClientClick="return confirm('Do you want to see submit?');"/>
and that's it!
So you DO NOT need asp:ConfirmButtonExtender anymore.
UPDATE 1
If you require to check the condition first on the code behind then you could use the code below:
protected void btnEnter_Click(object sender, EventArgs e)
{
if(Page.IsValid )
{
ScriptManager.RegisterStartupScrip(UpdatePanel1, this.GetType(),
"confirm", "return confirm('Are you sure you want to submit?');", true);
}
}

try to Validate your form using jquery then throw the confirmation dialog if the valiation succeeded .
function ValidateForm(){
//validation
if(succeeded){
return confirm('are you sure?');
}else{
return false
}
}
$(document).ready(function(){
$('#' + '<%= btnEnter.ClientID %>').click(function(){
return ValidateForm();
});
});

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);}

How to replace the alert message box with RadWindow

My Code:
<telerik:RadWindow ID="UpdateFavoriteRadWindow" Width="300" Height="150" VisibleOnPageLoad="false" CssClass="radwindow" runat="server">
<ContentTemplate>
<div align="center" class="addFavoriteborder">
<br /><br />
<div>
<asp:Label ID="lblUpdateFavorite" runat="server" Text="Changes Updated"></asp:Label>
</div>
<br />
</div>
</ContentTemplate>
</telerik:RadWindow>
protected void btnUpdateReport_Click(object sender, ImageClickEventArgs e)
{
// code to update
Response.Write("<script>alert('Changes Updated')</script>"); // how to replace this message box with RadWindow
}
I want to show the RadWindow instead of alert message box. Thanks

EDIT
RAD Alert box
protected void Button1_Click(object sender, EventArgs e)
{
RadWindowManager windowManager =
FindControl(this, "WindowManager") as RadWindowManager;
windowManager.RadAlert("MessageText", 400, null, "title", null);
}
More detail : Open RadWindow on Button Click Event
For more details you check this discussion on RAD site : http://www.telerik.com/community/forums/aspnet-ajax/window/problem-with-radwindows-confirm-and-alert.aspx

Viewstate not preserved when handling exception

I'm using a detailsview for a dialog to the user, and it seems that the viewstate is not preserved when there is an error inserting the data.
I'm using a OnInserted handler on the datasource to check if there was an exception like so:
protected void areaInsertHandler(Object sender, SqlDataSourceStatusEventArgs e)
{
if (e.Exception != null)
{
// There was an error in submitting, show the error dialog
ScriptManager.RegisterClientScriptBlock(Page, GetType(), "DialogHandler", "showError('#overlayAreas');", true);
e.ExceptionHandled = true;
}
}
Which simply calls the client side JS function:
function showError(overlayName) {
$(".msgError").css('visibility', 'visible');
$(overlayName).css('visibility', 'visible');
}
My detailsview looks something like this:
<asp:UpdatePanel ID="AreaUP" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="overlayAreas" class="overlay">
<asp:DetailsView
ID="DetailsView_Areas"
runat="server"
Visible="True"
AutoGenerateInsertButton="False"
AutoGenerateRows="False"
caption="<a style='font-weight: bold;'>Bold</a> = Required field"
CaptionAlign="Bottom"
headertext="Create new area"
EnableViewState="true"
DataKeyNames="Area_Name"
DataSourceID="AreasSource"
DefaultMode="Insert">
<Fields>
...
</Fields>
</asp:DetailsView>
</div>
<br />
<asp:Button width="200" height="30" ID="Button_CreateArea" runat="server" OnClientClick="return btnToggle('#overlayAreas')" Text="Create new area" />
</ContentTemplate>
</asp:UpdatePanel>
It all works fine, but for some reason the ASP viewstate is not preserved. Meaning that if I fill out incorrect information in the form and submit I will get the appropriate error and the dialog will still be displayed. But the fields are not filled out with my old values.
If someone could give me some pointers or help me out I'd greatly appreciate it
EDIT 10-08: Still haven't been able to solve it, any ideas at all?

basically:
avoid DetailsView_Areas.DataBind()
if (DetailsView_Areas.CurrentMode != DetailsViewMode.Insert) DetailsView_Areas.DataBind();
create the ItemInserted event for your DetailsView_Areas and put
if (e.AffectedRows < 0) e.KeepInInsertMode = true;
see http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.detailsviewinsertedeventargs.affectedrows(v=vs.110).aspx

How to handle CreateUserWizard Steps in Asp.Net?

I have used asp.net creatuserwizard in my project. And my custom template looks like this
<WizardSteps>
<asp:CreateUserWizardStep ID="CreateUserWizardStep0" runat="server">
<ContentTemplate>
//my custom code is here
</ContentTemplate>
<CustomNavigationTemplate>
</CustomNavigationTemplate>
</asp:CreateUserWizardStep>
Now, in Step2 i have code like this;
<asp:WizardStep ID="CreateUserWizardStep1" runat="server" AllowReturn="False" StepType="Step">
<div class="accountInfo">
<fieldset class="register">
<p>
<asp:Label ID="CityLabel" runat="server" AssociatedControlID="City">City:</asp:Label>
<asp:TextBox ID="City" runat="server" CssClass="textEntry"></asp:TextBox>
</p>
<p>
<asp:Label ID="CountryLabel" runat="server" AssociatedControlID="Country">Country:</asp:Label>
<asp:TextBox ID="Country" runat="server" CssClass="textEntry"></asp:TextBox>
</p>
</fieldset>
</div>
</asp:WizardStep>
So, my question is, how do i insert 'City' textbox value in my user profile as i click on next in step2.

You can handle the NextButtonClick of the Create User Wizard and check for the currentstepindex:
protected void YourCreateUserWizard_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if (e.CurrentStepIndex == YourStepIndex)
{
...
}
}

You will need to add code to handle the CreatedUser event of the wizard control.
This part should be in the code behind, there you have access to the current state of the wizard:
protected void CreateUserWizard_CreatedUser(object sender, EventArgs e)
{
// Finde the value
var cityField = (TextBox)CreateUserWizard.CreateUserWizardStep1.FindControl("City");
// use the field value todo whatever you want
}