I have created user control with label and image
i need raise event when click on the user control
when click on the div which contain the label and image
user control code is bellow
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ImageButton.ascx.cs" Inherits="AdvancedGrid.UC.ImageButton" %>
<div id="divClickableDiv" runat="server">
<div>
<asp:Image ID="Button_Image" ImageUrl="" runat="server" />
</div>
<div>
<asp:Label ID="Button_Text" runat="server" Text="Button"></asp:Label>
</div>
</div>
why not use use ImageButton control instead of Image if that is what you need? Try something like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ImageButton.ascx.cs" Inherits="AdvancedGrid.UC.ImageButton" %>
<div id="divClickableDiv" runat="server">
<div>
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClick="Button_Image_Click" />
</div>
<div>
<asp:Label ID="Button_Text" runat="server" Text="Button"></asp:Label>
</div>
</div>
- OnClick="Button_Image_Click" takes you to code behind where you can go to any URL you want like this:
protected void Button_Image_Click(object sender, EventArgs e)
{
Response.Redirect("~/page.aspx");
}
- or instead of OnClick and without code-behind try:
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClick="window.location.href = '<%= ResolveUrl("~/page.aspx") %>'" />
or
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClientClick="window.location.href='page.aspx'; return false;" />
Related
I'm new to working with the AJAX UpdatePanel and I've tried searching for an answer to this question and haven't found a solution yet.
I have multiple controls in an UpdatePanel since I am hiding and showing panels based on different button clicks. Also inside the UpdatePanel is a FileUpload control. Everything works fine until I upload a file. After that, none of the controls, like buttons or radio button lists, or JQuery scripts, like a datepicker, fire in the UpdatePanel after the upload.
Here is the aspx code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Site.Admin" %>
<%# MasterType virtualPath="~/Site1.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="Content/jquery-ui-timepicker-addon.css">
<script type="text/javascript">
function pageLoad() {
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.picker').datetimepicker();
}
});
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
<asp:UpdatePanel ID="adminUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="True" runat="server">
<ContentTemplate>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<asp:TextBox ID="tb_EndDate" class="form-control picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<asp:RadioButtonList ID="rbl_Active" runat="server" OnSelectedIndexChanged="rbl_Active_SelectedIndexChanged" RepeatDirection="Horizontal" CellPadding="4" CellSpacing="4" AutoPostBack="True">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="form-group">
<label>Upload Photo</label>
<asp:FileUpload ID="imageFileUpload" runat="server" />
<asp:Button class="btn btn-primary" ID="btn_UploadImg" runat="server" Text="Upload Image" OnClick="btn_UploadImg_Click" CausesValidation="False" />
<asp:Button ID="btn_CancelImg" OnClick="btn_CancelImg_Click" class="btn btn-primary" runat="server" Text="Change/Remove Image" CausesValidation="False" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
And the code behind relating to the file upload:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.GetCurrent(this).RegisterPostBackControl(this.btn_UploadImg);
}
protected void btn_UploadImg_Click(object sender, EventArgs e)
{
bool isUploaded = uploadImage(imageFileUpload);
if (isUploaded)
{
btn_CancelImg.Visible = true;
}
}
I'm not sure what I'm doing wrong. It worked fine when run from Visual Studio, but when pushed to the server it all fails
Instead of setting Visible to true/false, can you please try:
<asp:Panel ID="pnlToHide" runat="server" style="display:none">
When you have to show, you can use the following:
protected void btnShow_Click(object sender, EventArgs e)
{
pnlToHide.Attributes["style"] = "display: '';";
}
Also, you can try fullpostback/render by using:
<Triggers>
<asp:PostBackTrigger ControlID="btnFileUpload"/>
</Triggers>
I am sorry I am repeating this question. Rather, I am having to repeat it. The last time I posted this, I dint get an answer. I have googled for more than 3 hrs, dint find an answer. Heres the html for the linkbutton and the modal popup. The link button is inside/on a tab panel and auto postback is set to true.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled" >
</asp:ModalPopupExtender>
I want the clickevent of the linkbutton to fire which is not happening. However clicking on the link does open the modal popup extender (which is also something I want)... How do I get into the click event. I know that a postback is being avoided here because of the modal popup probably...but I dont the solution for it....
The code on save button:
if(hdnfld.Value.ToString()!=null)
{
if(hdnfld.Value.ToString()=="Save")
{
SaveNewAddress();
}
else
{
UpdateAddress();
}
<%# Page StylesheetTheme="" Title="" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="frmMyAccountMyProfile.aspx.cs" Inherits="WebApplication1.frmMyAccountMyProfile" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function CheckType(type)
{
document.getElementById("hdnfld").value = type;
alert(document.getElementById("hdnfld").value);
return false;
}
</script>
<link href="Styles/myStyleSheet.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divwrap">
<table style="width: 100%; margin-right: 0px;">
<tr>.........
<td>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('Save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdnfld" runat="server" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
...........
<asp:Button ID="btnEdit" runat="server" CssClass="roundcorner btn" OnClick="btnEdit_Click" OnClientClick="return CheckType('Edit');" Text="Edit" />
<asp:Panel ID="pnlMyAddressBook" runat="server" BackColor="White" CssClass="roundcorner">
you can use hidden field instead of viewstate, if you really want to retain some value at code behind. You can access hidden field at client side as well as in code behind too.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdf_type" runat="server" />
Javascript code
function CheckType(type) {
document.getElementById("hdf_type").value = type;
return false;
}
Access value in code behind when clicked on save button, and perform your action save or update according to value in hidden field.
hdf_type.Value.ToString();
MORE HELP FOR YOU
HTML FILE SHOULD LOOK LIKE THIS
below i'm posting the whole code which is working fine for me.
<head runat="server">
<title></title>
<script type="text/javascript">
function CheckType(type) {
document.getElementById("hdf_type").value = type;
alert(document.getElementById("hdf_type").value);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:Button ID="btn" runat="server" OnClientClick="return CheckType('edit');" Text="Click Here To Add New Address" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
<div id="pnlMyAddressBook" style="height: 100px; width: 100px; display: none; background-color: Gray">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
</div>
<asp:HiddenField ID="hdf_type" runat="server" />
</div>
</form>
getting value at code behind:
Try this:
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="btnHidden">
</asp:ModalPopupExtender>
<asp:Button ID="btnHidden" runat="server" style="Display:none;" Text="Button"/>
In Code behind:
protected void lnkAddNewAddress_Click(object sender, EventArgs e)
{
lnkAddNewAddress_ModalPopupExtender.Show();
}
Here I try to update the Label value base on click event of Linkbutton which is inside the repeater control. Scenario is When I click on Linkbutton same time Modal popup open and the Label text also change.
Below is my code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupUpdatePanel.aspx.cs"
Inherits="ModalPopupUpdatePanel" %>
<%# 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>ModalPopups and UpdatePanels</title>
<link rel="stylesheet" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptMgr1">
</asp:ScriptManager>
<div style="width: 300px; left: 100px">
<div >
<asp:Label ID="Label2" runat="server">Update Panel that contains a ModalPopup and its associated PopupPanel inside it</asp:Label>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<br />
<asp:Repeater runat="server" ID="btnresr" DataSourceID="SqlDataSource1">
<ItemTemplate>
<asp:LinkButton runat="server" ID="text" OnClick="Button5_Click" Text=' <%# DataBinder.Eval(Container.DataItem, "AgentName")%>' BackColor="Red"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
<asp:Button runat="server" ID="button2" Text="Launch Modal Popup2" style="display:none"/>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender2" TargetControlID="button2"
PopupControlID="modalPanel2" OkControlID="okBtn2" CancelControlID="cancelBtn2"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PTBWConnectionString %>"
SelectCommand="SELECT [AgentName], [AgentID] FROM [AgentMaster]">
</asp:SqlDataSource>
<asp:Panel runat="server" ID="modalPanel2" BackColor="AliceBlue" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel4" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label runat="server" ID="label5" ></asp:Label>
<asp:Button runat="server" ID="postbackBtn" Text="Click to Cause postback" OnClick="postbackBtn_Click" /><br />
<asp:Button runat="server" ID="cancelBtn2" Text="OK" />
<asp:LinkButton runat="server" ID="okBtn2" Text="Cancel" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
and Code behind
using System;
using System.Web.UI.WebControls;
public partial class ModalPopupUpdatePanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void updateLabel_Click(object sender, EventArgs e)
{
}
protected void postbackBtn_Click(object sender, EventArgs e)
{
label5.Text = "After Postback";
}
protected void Button5_Click(object sender, EventArgs e)
{
LinkButton l = (LinkButton)sender;
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();
}
}
I am block here please help me..Is there any Jquery way then also please here me
That is because the lable5 is not avaiable like that, it is nested inside the RepeaterItem.
Can you try this.
LinkButton l = (LinkButton)sender;
RepeaterItem rpt = (RepeaterItem)l.Parent();
Label label5 = (Label)rpt.FindControl("label5");
label5.Text = "This is before postback,saroop";
modalPopupExtender2.Show();
I have got *.ascx control with Ckeditor embedded by using CKEditor's control for ASP.NET (v 3.6.4). I have also ModalPopup control from AjaxControolToolkit4.5, attached to Link Button. When clicked, it shows panels with Radio Button list filled in with the aid of some code behind logic.
How should I change my *.ascx control to have a CKEditor'a plugin button in toolbar, firing this ModalPopup?
Code (not working):
<%# Control Language="C#" AutoEventWireup="true" CodeFile="CKEditorWithModalPopup.ascx.cs" Inherits="Controls_CKEditorWithModalPopup" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script type="text/javascript">
$(function () {
var a = {
exec: function (editor) {
javascript: __doPostBack('ctl03$LinkButton1', '') // explicite id for test
}
},
b = 'modalPopup';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("modalPopup", {
label: 'Modal Popup',
icon: "~/Images/modal_popup.png",
command: b
});
}
});
});
</script>
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" Toolbar="Basic" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
Choose the phrase to insert:</p>
</div>
</asp:Panel>
<asp:RadioButtonList ID="rbList" runat="server" />
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</asp:Panel>
I found better solution for CKEditor modal popup functionality - I decided to write it as CKEditor plugin. It is much easier and maintainable approach.
Creating a CKEditor Plugin with a Custom Dialog Window
The purpose of this answer is to close the old question.
tested on: windows server 2008 with visual studio 2010 and windows vista with visual studio 2008.
following unusuall problem has appeared.
i have a usercontrol and website where control will be showed.
if im checking radio buttons of control and clicking on submit which is also in ctrol inside there happens nothing. no request to server, just silence.
everything looks fine and standard but i cant find a problem. please help, because its annoying!
usercontrol.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="EmployeeCategorizationControl.ascx.cs"
Inherits="EmployeeCategorizationControl.EmployeeCategorizationControl" %>
<div id="categorizationOfEmployee">
<div>Categorization od Employee</div><br />
<div id="firstCategory">
<div style="float: left; width: 250px;">
Is not a permanent employee</div>
<div>
<asp:RadioButtonList ID="YesNoIsNotPermanentEmployee" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div id="secondCategory">
<div style="float: left; width: 250px;">
Is a fixed-term employee</div>
<div>
<asp:RadioButtonList ID="YesNoIsFixedTermEmployee" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div id="thirdCategory">
<div style="float: left; width: 250px;">
No external recruit</div>
<div>
<asp:RadioButtonList ID="YesNoExternalRecruit" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div id="btCreate" style="margin-left: 200px; margin-top: 10px;">
<asp:Button runat="server" Text="Create Checklist" ID="btCreateChecklist" />
</div>
</div>
usercontrol.ascx.cs:
protected void Page_Load(object sender, EventArgs e)
{
btCreateChecklist.Click += new EventHandler(btCreateChecklist_Click);
}
void btCreateChecklist_Click(object sender, EventArgs e)
{
ValueOfIsNotPermanentEmployee = YesNoIsNotPermanentEmployee.Text;
ValueOfIsFixedTermEmployee = YesNoIsFixedTermEmployee.Text;
ValueOfNoExternalRecruit = YesNoExternalRecruit.Text;
UserCategoryID = ValueOfIsNotPermanentEmployee + ValueOfIsFixedTermEmployee + ValueOfNoExternalRecruit;
}
default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmployeeCategorizationControl._Default" %>
<%# Register TagPrefix="UserControl" TagName="EmployeeCategorizationControl" Src="~/EmployeeCategorizationControl.ascx" %>
<!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>
<UserControl:EmployeeCategorizationControl runat="server" />
</div>
</form>
</body>
</html>
This code appears to work perfectly as I see it. I've transplanted your code into a local application as is (changing namespaces to eliminate compile errors) and it posts back just fine. However, your event doesn't do anything except set a couple of variables (which you don't explain what they do or relate to). Are you sure it's not performing the post back? This page is small enough that a postback may not even cause the screen to flash (since there is no actual action going on). You should put some visible action into the event method such as changing the text of a label or the BackColor of the button.
If you have AutoEventWireup="true" there is no need for:
btCreateChecklist.Click += new EventHandler(btCreateChecklist_Click);
Either set it to false or remove the above statement.