ASP.NET button changes page - Ends up out of div - asp.net

The problem happens on this page. When you press Button 1 a table is displayed on the page. Pressing Button 2 does nothing at all (empty function), but for some reason the button ends up out of the div it is in.
I use twitter bootstrap CSSs (latest version - 2.2.1)
Here's the markup:
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Test.aspx.cs" Inherits="CalendarImporterWeb.WebForm1" %>
<%# Register TagPrefix="uc" TagName="Timetable" Src="~/TimetableControl.ascx" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManagerMain" runat="server" />
<script language="javascript" type="text/javascript">
<!--
function popupWindow(url) {
newwindow = window.open(url, 'name', 'height=520,width=500');
if (window.focus) { newwindow.focus() }
return false;
}
function showControl(controlID) {
var control = document.getElementById(controlID);
control.style.display = "block";
control.style.visibility = "visible";
}
function hideControl(controlID) {
var control = document.getElementById(controlID);
control.style.display = "none";
}
// -->
</script>
<table border="0" width=500>
<tr height="50">
<td colspan="2" align="left">
<asp:Button runat="server" id="btnGetCourses" text="Button 1" CssClass="btn btn-info"
OnClientClick="showControl('ImageSpinner');" onclick="btnGetCourses_Click" />
</td></tr>
</table>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGetCourses" EventName="Click" />
</Triggers>
<ContentTemplate>
<uc:Timetable id="Timetable1" runat="Server" Visible="false"></uc:Timetable>
</ContentTemplate>
</asp:UpdatePanel>
<div class="jumbotron">
<asp:button id="btnStart" class="btn btn-primary" runat="Server"
Text="Button 2" onclick="btnStart_Click" />
<br /><br />
</div>
</form>
</asp:Content>
And the cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CalendarImporterWeb
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnGetCourses_Click(object sender, EventArgs e)
{
Timetable1.LoadCourses("","","");
}
protected void btnStart_Click(object sender, EventArgs e)
{
}
}
}

It looks like you have an extraneous "-->" in your markup somewhere - I see it on the rendered page at the top right.

Found the problem:
The TimetableControl had a spare /div in its code. Since it was not visible (ASP.NET Visible property, not HTML visible property) it didn't matter until it was made visible
Thanks for the help

Related

ASP.NET Controls in UpdatePanel not working after File Upload

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>

User control as Image button

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;" />

Update value in modalpop panel inside the updatePanel

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

How to get data from controls in Repeater

I have repeater with item template:
<asp:Repeater ID="queryParametersRepeater" runat="server"
DataSourceID="queryParametersObjectDataSource">
<ItemTemplate>
<tr class="itemTemplate">
<td class="labelTd" style="width: 300px;">
<asp:HiddenField runat="server" Value='<%# Eval("ParameterType") %>' />
Define <%# Eval("ParameterName") %> (type <%# Eval("ParameterType") %>)
</td>
<td class="valueTd">
<asp:TextBox runat="server" Width="300px" Text='<%# Eval("ParameterName") %>' />
<asp:CheckBox runat="server" Width="300px" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
In jQuery I change display property of textBox and chekBox. How can I get data from those controls?
I can't use FindControls() function, because I don't know id of my controls.
You can use ID's and findcontrol to get the values. Here is a working example:
<%# Page Language="C#" %>
<%# Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//bind the data source
RepeaterExample.DataSource = new List<KeyValuePair<int, string>>{
new KeyValuePair<int, string>(1, "Test1"),
new KeyValuePair<int, string>(2, "Test2"),
new KeyValuePair<int, string>(3, "Test3")
};
RepeaterExample.DataBind();
}
}
protected void cmdSubmit_Click(object sender, EventArgs e)
{
//read the values and output them
litResults.Text = "";
foreach (RepeaterItem i in RepeaterExample.Items)
{
TextBox txtExample = (TextBox)i.FindControl("txtExample");
if (txtExample != null)
{
litResults.Text += txtExample.Text + "<br />";
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="RepeaterExample" runat="server">
<HeaderTemplate>
test</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtExample" runat="server" Text='<%#Eval("Value") %>'></asp:TextBox>
</ItemTemplate>
</asp:Repeater><br />
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" OnClick="cmdSubmit_Click" />
<br />
<asp:Literal ID="litResults" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>
Can you add a class to your controls?
If so you could try with $(".givenClass").

UpdatePanel and UpdatePanelAnimationExtender problem

I want to display a progress animation while updatepanel's work being done, but without re-rendering updatepanel's content.
If I set ChildrenAsTriggers="false", the UpdatePanelAnimationExtender's onupdated script does not triggered (function onUpdated()).
If I set ChildrenAsTriggers="true", and click show div button, after the updating is completed, the updatepanel's content is re-rendered (and the div is hidden again).
My code:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function ShowHide(){
var div = document.getElementById('div2');
if (div.style.display=="none")
div.style.display="";
else
div.style.display="none";
}
function onUpdating(){
// get the update progress div
var pnlPopup = document.getElementById("div2");
}
function onUpdated() {
// get the update progress div
var pnlPopup = $get("div2");
// make it invisible
}
</script>
</head>
<body>
<form id="form11" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<input id="Button1" onclick="ShowHide();" type="button" value="Show Div (click first)" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Click" />
<div id="div1" style="background-color:Red;width:700px;height:200px;"> </div>
<div id="div2" style="background-color:Blue;width:700px;height:500px;display:none;"></div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0" >
<ScriptAction Script="onUpdating();" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onUpdated();" />
</Parallel>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
</form>
</body>
protected void Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
Use updateProgress control instead of extending the updatePanel with UpdatePanelAnimationExtender.
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="loading.jpg" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
}
I've achieved the desired result using PageRequestManage, without UpdatePanelAnimationExtender or UpdateProgress.
with (Sys.WebForms.PageRequestManager.getInstance()) {
add_beginRequest(onUpdating);
add_endRequest(onUpdated);
}

Resources