I have a Datalist with binddata from code behind and I'm trying to add an ajax modalpopupextender to each item. This modalpopup needs to open the right panel with the problem that the target control id it's always the same button in the end of the page.
I am getting the radiobutton selected but i can't open the modalpopup that is equivalent to it. It always opens the first panel.
Can anyone help me? Is this even possible?
C#
protected void btnValidateGift_Click(object sender, EventArgs e)
{
if (Request.Form["gift"] != null)
{
}
}
aspx
<asp:DataList ID="datalistReward" runat="server" RepeatDirection="Vertical" RepeatColumns="3" CssClass="datalistGift">
<ItemTemplate>
<div class="giftDiv">
<div class="giftTitle">
<%# DataBinder.Eval(Container.DataItem, "name") %>
</div>
<div>
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
</div>
<div id="divRadioBtnGift" runat="server" style="width: 10%; margin: auto;">
<input type='radio' id='radioBtnGift_<%# DataBinder.Eval(Container.DataItem, "value") %>'
name='gift' value='<%# DataBinder.Eval(Container.DataItem, "id") %>' />
</div>
</div>
<asp:ModalPopupExtender ID="ModalPopUpReward" BehaviorID="modalBehaviorPopupReward" runat="server" PopupControlID="panelSelectReward"
CancelControlID="btnCloseReward" BackgroundCssClass="modalBackground" TargetControlID="btnValidateGift" />
<asp:Panel ID="panelSelectReward" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div style="background-color: aqua; border: 1px solid red;">
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
<asp:ImageButton ID="btnCloseReward" runat="server" Text="Close" OnClientClick="CloseModalPopUp()" />
</div>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
<asp:Button ID="btnValidateGift" Text="Validar >" runat="server" CssClass="divButton" OnClick="btnValidateGift_Click" />
Edit1: I've tried to add the a custom string to the panel id like this <%# DataBinder.Eval(Container.DataItem, "id") %> . But this doesn't even compile. Any chance of making this work?
You use server-side OnClick event to show the popup. It just shows the first (or last) data evaluated during page render.
To change ModalPopup's content you need to use OnClientClick event + asynchronous call to fill the popup with the data you need.
Here is the example of using client events with ModalPopup.
Related
I am still new in asp.net c# and want to display a listview with 2 items in a row. However, the listview is not displayed with 2 items in a row even though I use GroupItemCount. Can anyone tell me how to solve it?
Thank you in advance.
<asp:ListView ID="lvClientFacility" runat="server" DataSourceID="SqlDataSource1" DataKeyName="facility_id" GroupItemCount="2" GroupPlaceholderID="groupPlaceholder1" ItemPlaceholderID="itemPlaceholder1">
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="groupPlaceholder1" runat="server" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:PlaceHolder ID="itemPlaceholder1" runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<a class="facility" href="clientReservation.aspx?Id=<%# Eval("facility_id")%>">
<asp:Image ID="Image1" runat="server" Height="200px" Width="250px" ImageUrl='<%#"data:img/jpg;base64," + Convert.ToBase64String((byte[])Eval("facility_image"))%>' />
<div class="facilityName"><%# Eval("facility_name")%></div>
<asp:LinkButton ID="LinkButton1" PostBackUrl= '<%# "clientReservation.aspx?facility_id=" + Eval("facility_id") %>' runat="server" Text="Book Now"/>
<div class="ClientFacilityDescription"><%# Eval("facility_description")%></div>
</a>
</ItemTemplate>
</asp:ListView>
In asp.net C# webform Have a list view with one button after binding it convert to many buttons dynamically want to highlight selected button
<asp:ListView ID="ListViewCompanyServicesList" runat="server" ItemPlaceholderID="itemPlaceHolder" OnItemCommand="ListViewCompanyServicesList_ItemCommand">
<LayoutTemplate>
<div id="itemPlaceHolder" runat="server" style="margin-bottom: 0px;">
</div>
</LayoutTemplate>
<ItemTemplate>
<asp:LinkButton ID="btnTags" runat="server" Text='<%# Eval("Service") %>' CommandName="SelectService" CommandArgument='<%# Eval("ServiceId") %>' CssClass="label label-default" Style="display: inline-block" OnClick="btnTags_Click" />
</ItemTemplate>
<EmptyDataTemplate>
<div class="promote_contentBox2">
<p class="well" style="font-size: 80%;">No record Found</p>
</div>
</EmptyDataTemplate>
</asp:ListView>
You can change the css of the button that has been clicked.
btnTags.CssClass="your custom class";
Maybe I am not understanding how this works completely but what I have is a gridview custom template with an imagebutton and a modalpopup. Below my page I have my popup panel which is hidden. When I click my image button the panel displays then I click the "btnModalCancelAll" and it starts to step through my method which sets a page variable from 0 to 1 but then the problem comes in it does not continue to the original gridview image click event not sure why. Below is my template field and the popup panel.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ImageButtonCancelResv" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>
<asp:Panel ID="pnlModalPanel" CssClass="modalBackground" runat="server" Style="display:none">
<asp:UpdatePanel runat="server" ID="updatePanelPopUp">
<ContentTemplate>
<div id="modalWrap">
<asp:Label ID="lblAreyousure" runat="server" Text="Are you sure you want to do that?"></asp:Label>
<div id="divhr1" class="horizontalRule" runat="server"></div>
<div id="divCancelSummaryAll">
<asp:Label ID="lblEntireFamily" runat="server" Text="Cancel all family reservations from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteAll" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteAll" runat="server" CssClass="modalButton" Text="Cancel all Family" OnClick="btnModalDeleteAll_Click" />
</div>
<div id="divCancelSummaryOne">
<asp:Label ID="Label2" runat="server" Text="Cancel selected child reservation from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteOne" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteOne" runat="server" CssClass="modalButton" Text="Cancel this Child" OnClick="btnModalDeleteOne_Click" />
</div>
<br />
<asp:Button ID="btnModalCancel" runat="server" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
I suggest you create another button and use it as the TargetControlID for the modal popup.
you can hide this button by setting its display to 'none'. This will only be a dummy button so that your code compiles.
Now when you click the button "ImageButtonCancelResv" it will run your code which is in the method OnClick="ImageButtonCancelResv_Click"
and at the end of this method you can add a command to show the popup:
mpe.Show();
Example Code:
protected void ImageButtonCancelResv_Click(object sender, EventArgs e)
{
//Do something here when button is clicked
mpe.Show();
}
And then
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<div style="display: none">
<asp:Button ID="btnModalStatusHidden" runat="server" />
</div>
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnModalStatusHidden" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>
I have a asp.net web form Page which uses master page also.
This is a simple page which displays some text and has a form, this page also allows user to upload resume in .doc, .docx & pdf format.
Problem with this code is that i am not able to trigger
for some reason <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click"/>
<%# Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="career.aspx.cs" Inherits="career" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- Content Page-->
<!-- page content wrapper -->
<div id="page-content-area" class="page-content-area">
<div id="pg-left-bar" class="pg-left-bar">
<div class="page-title">
<h5><asp:Label ID="lblPageTitle" CssClass="page-title-lbl" runat="server" Text="Introduction"></asp:Label></h5>
</div>
<div class="page-text">
<asp:Label ID="lblPageContents" runat="server" Text=""></asp:Label>
</div>
<div class="career-form-wrapper">
<!-- UpdatePanel -->
<asp:UpdatePanel ID="updPnlArticles" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCareerForm" runat="server">
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFamilyName" runat="server" CssClass="row-label" Text="Family Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFamilyName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfLN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFamilyName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="Email:"></asp:Label>
</div>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Careers"></asp:RegularExpressionValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblPhone" runat="server" CssClass="row-label" Text="Phone Number:"></asp:Label>
</div>
<asp:TextBox ID="txtPhone" runat="server" CssClass="row-phone" Text=""></asp:TextBox>
<asp:RegularExpressionValidator ID="revPhone" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtPhone" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})([\s.-]?[0-9]{1,4}?)$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567, 050 1234567 or 04-1234567, 050-1234657)<br />and international format (eg. +971 41234567, +971-41234567 ).<br />Also accepts an optional extention of up to four digits (eg. 04 1234567 289 or +974 41234567 289)">
<asp:Image ID="imgtooltip" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblFax" runat="server" CssClass="row-label" Text="Fax Number:"></asp:Label>
</div>
<asp:TextBox ID="txtFax" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RegularExpressionValidator ID="revFax" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtFax" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567 or 040-1234567)<br />and international format (eg. +974 41234567 or +974-41234567)">
<asp:Image ID="Image1" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblAddress" runat="server" CssClass="row-label" Text="Address:"></asp:Label>
</div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="row-input-multiline" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblCountry" runat="server" CssClass="row-label" Text="Country:"></asp:Label>
</div>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCountry" runat="server" Category="Country" TargetControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Countries...]" ServiceMethod="FetchCountries" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
<asp:RequiredFieldValidator ID="rfCountry" ValidationGroup="Careers" ControlToValidate="ddCountry" CssClass="row-validate" InitialValue="0" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblCity" runat="server" CssClass="row-label" Text="City:"></asp:Label>
</div>
<asp:DropDownList ID="ddCity" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCity" runat="server" Category="City" TargetControlID="ddCity" ParentControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Cities...]" ServiceMethod="FetchCities" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
</div>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
<div id="dFileUpload1" class="btnUploadHack">Browse</div>
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" />
<asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
<asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
</div>
<div class="contactus-row">
<asp:Button ID="btnSave" runat="server" CssClass="btnContactUsSave" Text="Send Message" onclick="btnSave_Click" ValidationGroup="Careers" />
</div>
</asp:Panel>
<asp:Panel ID="pnlCareerMSG" runat="server"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UpdatePanel -->
</div>
</div>
<div class="pg-right-bar">
<asp:Image ID="imgSideBanner" runat="server" />
</div>
</div>
<!-- page content wrapper -->
<!-- Content Page-->
</asp:Content>
Code Behind
protected void btnUploadCV_Click(object sender, EventArgs e)
{
// code is here
}
So far i am not able to figure out what i s blocking the any button inside from firing. Yes i did even put a simple button to test even that didn't fire.
I am not sure if it is Validation or Update Panel which is creating problem.
I tried using Trigger that didnt work
I tried setting
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" />
protected void btnUploadCV_Click(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid == true)
{
// your code here
}
}
My problem is it deosn't even enter code block of button for some reason.
Just to add further i am using cascading dropdown for country and cities i am not sure if that is causing any problem I am also using two panels one has the form control and after successful submission i hide this panel & show the other panel with success message all this code with UpdatePanel.
Only way out of this i see is to upload all files main form button Send Message rather than having individual button for all file upload control
UPDATE: I also tried this approach even this doesn't work
Please understand the concept
Update Panel is used for partial post back which is today we call AJAX
However AJAX cannot be used to upload file to the server
AJAX uses xmlHttpRequest which do not support file upload.
So, don't think that its a bug from Microsoft. Even today also, we don't have any javascript library which will support FileUpload using AJAX. All AJAX fileuploaders that you find on internet are using Flash :)
This is the limitation of protocol. Use any other jquery plugin to upload file. Update panel will not work for this.
FileUpload control doesn't work with asynchronous postbacks.To make this work in your application, follow below steps
1.) Place a <asp:ScriptManager /> on the page.
if you are using master page in your application and your web page uses the master page, place script manager in master page. If you don't want master page to have script manager,you can also place script manager on specific web pages anyways.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
2.) After this, Add <Triggers> for the button btnUploadCV in your Update panel.
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadCV" />
</Triggers>
And rest of your upload button OnClick handler looks like:
protected void btnUploadCV_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
fileName = FileUpload1.FileName;
FileUpload1.SaveAs("~/UploadedData/" + fileName);
...
}
}
I have a button nested inside an update panel which has a CommandArgument tied to it. This calls a method which updates some label and text in an area not contained in the UpdatePanel. If I comment out the update panel the button works correctly so I know it is coming from the update panel. Anyone know how I can pass this through?
protected void Button_Command(object sender,
System.Web.UI.WebControls.CommandEventArgs e)
{
//update textboxes and labels here
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:DataList ID="dListItems" runat="server" DataKeyField="PRODUCT_ID" RepeatColumns="4"
RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False" CellPadding="4">
<HeaderTemplate>
No Record Found....!
</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="Button" runat="server" Text="Add to Cart"
CommandArgument='<%# Eval("Id") %>' CausesValidation="False"
CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
OnCommand="Button_Command"
/></span></span></p>
</ItemTemplate>
</asp:DataList>
</div>
</td>
</tr>
</table>
</div>
</ContentTemplate>
which updates some label and text in an area not contained in the
UpdatePanel
That's the problem. UpdatePanel will only update what is within and not what is outside. Try to put those control also the UpdatePanel and see them worked