AJAX popup control extender - how do I put on a Cancel button? - asp.net

Normally with an AJAX popup control extender, you simply select the item and your selection will populate the associated control.
However if I want to populate the control either directly or by a drop down list, then I would like to have a submit button and a cancel button.
I have found how to put in a Submit button. But how do I put in a cancel button?
<asp:TextBox runat="server" ID="txtWeek1MonAMTimeIn" Width="40px" />
<cc1:PopupControlExtender
ID="PopupControlExtenderWeek1TimeIn" runat="server"
PopupControlID="pnlWeek1MonAMTimeIn"
Position="Bottom"
TargetControlID="txtWeek1MonAMTimeIn"
>
</cc1:PopupControlExtender>
<!-- Panel for editing data -->
<asp:UpdatePanel runat="server" ID="UDPWeek1MonAMTimeIn">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlWeek1MonAMTimeIn" CssClass="popupControl"
onprerender="pnlWeek1MonAMTimeIn_PreRender">
<div class="span-7" style="padding:10px;">
<div>
<div class="span-2">
Time In
</div>
<div class="span-5">
<lib:input runat="server" id="libWeek1MonAMTimeIn" DataType="Time" />
</div>
</div>
<div>
<div class="span-2">
Time Out
</div>
<div class="span-5">
<lib:input runat="server" id="libWeek1MonAMTimeOut" DataType="Time" />
</div>
</div>
<div>
<div class="span-2">
Not in
</div>
<div class="span-5">
<asp:DropDownList runat="server" ID="ddlLeaveWeek1MonAM" />
</div>
</div>
<div>
<div class="span-2">
<asp:Button runat="server" ID="btnCancelWeek1MonAMTimeIn" UseSubmitBehavior="false" Text="Cancel" onclick="btnCancelWeek1MonAMTimeIn_Click" />
</div>
<div class="span-5">
<asp:Button runat="server" ID="btnSubmitWeek1MonAMTimeIn" Text="Submit"
UseSubmitBehavior="false" onclick="btnSubmitWeek1MonAMTimeIn_Click" /></div>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
protected void btnSubmitWeek1MonAMTimeIn_Click(object sender, EventArgs e)
{
PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(string.Empty);
}

use ModalPopupExtender,
it has CancelControlId as property
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

Related

ASP.NET Update Panel - Required Field Validator fires for AutoPostBack DropDownList even though CausesValidation = false

I'm having an issue where a required field validator flashes on the screen when the dropdown list it's attached to does a partial postback on change.
Essentially the page is a form where the user selects from the 1st dropdownlist and that populates a second dropdownlist. They then select from the 2nd dropdownlist. Then when the user has selected both they hit the submit button and that validates both dropdowns.
Both dropdowns are in the validationgroup that the submit button uses. I've added CausesValidation="false" to the dropdownlist but the validator still flashes. Sample code below...
<form id="form1" runat="server">
<asp:ScriptManager ID="MyAppScriptManager" runat="server"
EnablePartialRendering="true"
EnableCdn="true" />
<div class="chat">
<asp:UpdatePanel ID="NewBookingUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div id="FreelancerDiv" class="collapse show">
<div class="card-body">
<div class="form-group">
<div class="input-group">
<asp:DropDownList ID="FreelancerDropDownList" runat="server" AutoPostBack="true"
CausesValidation="false"
class="custom-select form-control form-control-lg">
<asp:ListItem Value=" " Text="Choose the freelancer for your booking." />
<asp:ListItem Value="Good" Text="Good selection." />
</asp:DropDownList>
</div>
<asp:RequiredFieldValidator ID="FreelancerRequired" runat="server" Display="Dynamic"
ControlToValidate="FreelancerDropDownList"
ValidationGroup="RequestBookingValidationGroup"
ErrorMessage=" Required "
CssClass="alert-danger" />
</div>
</div>
</div>
<div id="ServiceDiv" class="collapse show" runat="server">
<div class="card-body">
<div class="form-group">
<div class="input-group">
<asp:DropDownList ID="ServiceDropDownList" runat="server" AutoPostBack="true"
CausesValidation="false"
class="custom-select form-control form-control-lg">
<asp:ListItem Value=" " Text="Choose the service for your booking." />
<asp:ListItem Value="Good" Text="Good selection." />
</asp:DropDownList>
</div>
<asp:RequiredFieldValidator ID="ServiceRequired" runat="server" Display="Dynamic"
ControlToValidate="ServiceDropDownList"
ValidationGroup="RequestBookingValidationGroup"
ErrorMessage=" Required "
CssClass="alert-danger" />
</div>
</div>
</div>
<button id="RequestBooking" runat="server" class="btn btn-lg btn-primary btn-block" type="button" onserverclick="RequestBooking_Click" validationgroup="RequestBookingValidationGroup">
Request Booking
</button>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
You can enable or disable (enabled=true or enabled=false) the required field validators on the postback (and/or in the markup or page load event). Believe it's defaulted to enabled which is why its firing.
#JobesK thanks for Enabled=false tip that helped :)
I disabled the validators in markup and then enabled them in javascript in the submit button...
ValidatorEnable(document.getElementById('<%=FreelancerRequired.ClientID%>'), true);
ValidatorEnable(document.getElementById('<%=ServiceRequired.ClientID%>'), true);
Page_ClientValidate("RequestBookingValidationGroup");

link in the repeater first time only working inside the update panel control

I have link buttons for showing gridview and list view and also I have paging using datalist control all these being within the updatepanel.
Paging and listview link button and gridview link button working fine in the first load but the problem is when I'm doing any action within update panel like moving to next page or change gridview to listview then the <a> tag link within the repeator control is not working.
I have order buton inside the repeator control this will give the modal pop up for quantity selection and add to cart option but <a> tag not working it does not show modal.
This <a> tag is not working:
<a class="cur-pointer order button"
data-uid="<%#Container.DataItem("unit")%>"
data-uname="<%#Container.DataItem("UnitName")%>"
data-price="<%#Container.DataItem("price")%>"
data-pro-name="<%#Container.DataItem(productName)%>"
data-iid="<%#Container.DataItem("ItemId")%>">
<strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal>
</strong>
</a>
full code here :
<div class="row" style="padding: 0px 0px 41px 0px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="sort-grid">
<div class="col-md-4 ">
<div class="sorting hiddenview">
<asp:LinkButton ID="gridlink" runat="server" CssClass="icongridlist"><i class="gridicon"></i></asp:LinkButton>
<asp:LinkButton ID="listlink" runat="server" CssClass="icongridlist"><i class="fa fa-list" style="color:#fff;"></i></asp:LinkButton>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="sorting pagingdropdownmob">
<%-- style="width: 91px;"--%>
<h6>Show</h6>
<asp:DropDownList runat="server" ID="dropdownlist" Style="width: 42px;" AutoPostBack="True" OnSelectedIndexChanged="lbtnFirst_Click">
<%--AppendDataBoundItems = "true"--%>
<asp:ListItem Selected="True" Text="10" Value="10"></asp:ListItem>
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
<asp:ListItem Text="45" Value="45"></asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
</div>
<div class="sorting paginglistmob">
<h6>Page: </h6>
<%-- <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click" ></asp:LinkButton> --%>
<asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"><i class="fa fa-caret-left hoverclr"></i></asp:LinkButton>
<span>
<asp:DataList ID="dlPaging" runat="server" RepeatDirection="Horizontal" OnItemCommand="dlPaging_ItemCommand"
OnItemDataBound="dlPaging_ItemDataBound" Style="display: inline-block;">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server" Style="color: #000;" CommandArgument='<%# Eval("PageIndex") %>'
CommandName="Paging" Text='<%# Eval("PageText") %>'></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
<asp:LinkButton ID="lbtnNext" runat="server" CausesValidation="false"
OnClick="lbtnNext_Click"><i class="fa fa-caret-right hoverclr"></i></asp:LinkButton></span>
<%-- <asp:LinkButton ID="lbtnLast" runat="server" CausesValidation="false" OnClick="lbtnLast_Click">Last</asp:LinkButton></span>--%>
</div>
</div>
<div class="clearfix"></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="single-pro">
<asp:PlaceHolder ID="phItem" runat="server" Visible="false">
<asp:Repeater ID="rptItem" runat="server">
<ItemTemplate>
<div class="col-md-3 col-sm-6 product-men">
<%-- col-md-4 col-sm-6--%>
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<a href="javascript:void(0);">
<img alt="" class="pro-image-front" src="<%#Container.DataItem("ImageSrc")%>">
<img alt="" class="pro-image-back" src="<%#Container.DataItem("ImageSrc")%>">
</a>
<div class="men-cart-pro" style="padding-bottom: 8px;">
<div class="inner-men-cart-pro">
<asp:LinkButton runat="server"><i class="glyphicon glyphicon-zoom-in"></i> View</asp:LinkButton>
</div>
</div>
</div>
<%--men thumb item--%>
<div class="item-info-product ">
<h5 style="font-size: 16px; font-weight: 900; padding-left: 0px; padding-right: 0px; height: 42px; line-height: 17px;" class="m-none h-initial"><strong><%#Container.DataItem(productName)%></strong></h5>
<%--height:33px;--%>
<div class="info-product-price">
<strong><span class="item_price"><%#Container.DataItem("price")%> </span><%=GetGlobalResourceObject("Resource", "Currency")%><span> /<%#Container.DataItem("UnitName")%></span>
</div>
<div class="snipcart-details top_brand_home_details item_add single-item link-product-add-cart ">
<a class="cur-pointer order button" data-uid="<%#Container.DataItem("unit")%>" data-uname="<%#Container.DataItem("UnitName")%>" data-price="<%#Container.DataItem("price")%>" data-pro-name="<%#Container.DataItem(productName)%>" data-iid="<%#Container.DataItem("ItemId")%>"><strong>
<asp:Literal runat="server" Text="<%$Resources:Resource,Order %>"></asp:Literal></strong> </a>
</div>
</div>
<%-- item info product--%>
</div>
<%-- menproitem--%>
</div>
<%--colmd3--%>
</ItemTemplate>
</asp:Repeater>
</asp:PlaceHolder>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="row">
Because the Repeater is in an UpdatePanel, you need to rebind the data attributes after Async PostBack. Because the PostBack updates the UI and previous bindings are lost.
<script type="text/javascript">
$(document).ready(function () {
bindDataAttributes();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
bindDataAttributes();
});
function bindDataAttributes() {
//call the jquery function that binds data-uid etc here
}
</script>
You need to populate the repeater on each postback. The best place for this is the OnInit event.

Why does my dropdown keep returning the first item in the dropdown?

I have a dropdown in a vb.net application that is also using radwindow as it's modal. I have the dropdown databinding in the if not ispostback method, yet when I select a value and run it, it still returns the first item. I tried using autopostback set to true but doing that also closes the radwindow. Any other work arounds?
<telerik:RadWindow RenderMode="Lightweight" ID="winComments" runat="server" Title="Comments" RestrictionZoneID="ContentTemplateZone" Modal="true" Width="600" Skin="Outlook"
Height="550" Animation="Fade" Left="600" Top="100" CenterIfModal="true" EnableShadow="true" EnableViewState="false">
<ContentTemplate>
<div class="col-sm-12 col-xs-12">
<br />
<div class="col-sm-4 col-xs-4">
<asp:Label ID="lblCommentVin" runat="server" Font-Bold="true" Visible="true"></asp:Label>
</div>
<div class="col-sm-5 col-xs-5">
Department:
<asp:DropDownList ID="ddlDepartments" runat="server"></asp:DropDownList>
</div>
</div>
<div class="col-xs-12">
<br />
<asp:TextBox ID="txtComment" runat="server" Text="" Height="300px" Width="550px" TextMode="MultiLine"></asp:TextBox>
</div>
<br />
<div class="col-md-offset-4">
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="images/btnCancel.png" OnClick="btnCancel_Click" CssClass="btn btn-sm pull-right" />
<asp:ImageButton ID="btnSave" runat="server" ImageUrl="images/btnSave.png" OnClick="btnSave_Click" CssClass="btn btn-sm pull-right" />
</div>
</ContentTemplate>
</telerik:RadWindow>
and the code behind:
If Not IsPostBack Then
lblCommentVin.Text = vin
commentDeptList = SQLData.getAssignedCommentDepartments(Session("user"))
_departments = New DepartmentRepository().GetAll()
Session("Departments") = _departments
For Each dept As String In commentDeptList
ddlDepartments.Items.Add(New ListItem(dept, dept))
Next
ddlDepartments.DataBind()
The code stops working where im trying to get the selecteditem
Protected Sub btnSave_Click(sender As Object, e As ImageClickEventArgs)
If txtComment.Text.Length > 1 Then
Dim DepartmentName As String = ddlDepartments.SelectedItem.ToString

server side event for the button having modal pop up extender

I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>

this._form is null error with ScriptManager and Ajax Control Toolkit

I'm using the Ajax Control Toolkit with .NET in VS2008 to put a Rating control on my page. I've got the scriptmanager on the page and the rating control works in Chrome and IE but not Firefox. In Firefox it gives me this error "this._form is null". I've got no other scripts included on the page. There are a couple included in the master page but they are closed with </script>. I've tried using ToolkitScriptManager but it hasn't changed anything.
<form id="aspnetForm" runat="server"><ajaxToolkit:ToolkitScriptManager id="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" EnablePartialRendering="true" SupportsPartialRendering="true" />
<div id="main" align='center'>
<div id="inside">
<div id="nav">
<div id="photoCount"><label id="lblPhotoCount" runat="server"></label></div>
<div id="photoNav">
<a class="nav_a" runat="server" id="previouslink" href="">Previous</a><a class="nav_a" runat="server" id="nextlink" href="">Next</a>
</div>
<div class="clear"></div>
</div>
<div id="divBrowseBox" runat="server">
<div id='divPicHeader' runat='server' style="z-index: 2998">
</div>
</div>
<div id="likeArea">
<iframe id="likeIframe" runat="server" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:80px;" allowTransparency="true"></iframe>
</div>
<div id="ratingArea">
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hdnCurrentPhotoID" runat="server" />
<asp:HiddenField ID="hdnCurrentRating" runat="server" />
<asp:HiddenField ID="hdnAvgRating" runat="server" />
<asp:HiddenField ID="hdnTotalVotes" runat="server" />
<asp:HiddenField ID="hdnAddRating" runat="server" />
<asp:Label ID="lblYourVote" runat="server" Font-Size="12px" Text="Rate This Photo!"></asp:Label>
<div id="starbox">
<div id="stars">
<ajaxToolkit:Rating ID="Rating1" runat="server"
CurrentRating="3"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="Rating1_Changed"
AutoPostBack="true"
BehaviorID="rbid"
>
</ajaxToolkit:Rating>
</div>
</div>
<div style="clear: both;"></div>
<asp:Label ID="lblTotalVotes" runat="server" Font-Size="10px" Text=""></asp:Label>
</ContentTemplate>
</asp:updatepanel>
</div>
<div style="clear: both;"></div>
</div>
</div>
</form>
Updated with code. There are only some styles above the form and that is all.
I answered my own question. I was trying to create a form within a form and it wasn't working. I didn't get any indication of that from the error messages but eventually figured it out.

Resources