I have a datalist that display images from sql server. In data list control i have
<asp:DataList ID="datalist1" runat="server" RepeatDirection="Horizontal"
RepeatColumns="3" CellPadding="1" CellSpacing="25" >
<ItemTemplate>
<table style="width:178px;">
<tr>
<td ID="img1">
<div id="smalldiv">
<img id="imgitem" src="allproducts.ashx?autoid=<%# Eval("AutoId").ToString() %>" onmouseover="zoomimg();" onmouseout="zoomout();" alt="" width="180px" height="220px"/>
<asp:Label id="lblprice" runat="server" Text='<%#"("+ Eval("Price").ToString() + " )"%>'></asp:Label>
<asp:HyperLink id="Linksml" runat="server" NavigateUrl="~/Presentation/home.aspx.cs">HyperLink</asp:HyperLink>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
It zooms only the first image.
Its the script
function zoomimg() {
document.getElementById('img1').style.border = "1px solid black";
//document.getElementById('bigdiv').style.display = "block";
}
function zoomout() {
document.getElementById('img1').style.border = "none";
// document.getElementById('bigdiv').style.display = "none";
}
I am going to use ajax for my web form app without any update panels. so I have noticed that I can use jquery ajax for this purpose.so there is a form with a dropdown box within that are some IDs.
When I select The ID from drop down, I want to show my ajax loader for moments and after that I want to show the result. the result will display in some label controls.
so this is my Default.aspx page :
<div style="text-align: center; width: 500px; margin: 0 auto 0 auto;">
<asp:DropDownList ID="idDropDownBox" runat="server" >
</asp:DropDownList>
<span>Pick ID </span>
<br />
<img alt="" id="loader" src="ajax-loader.gif" />
<table>
<tr>
<td>
<asp:Label ID="lblName" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Name
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFamily" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Family
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPhone" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Phone
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Email
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAddress" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Address
</td>
</tr>
</table>
</div>
So I decided to create an another page "GetCustomer.aspx" which by a query string , fetches the ID and then , it select all info from data base and save them in sessions.
here is the code behind of GetCustomer.aspx :
protected void Page_Load(object sender, EventArgs e)
{
AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
if (Request.QueryString.Keys.Count > 0)
{
string id = Request.QueryString[0];
CustomersDBEntities db = new CustomersDBEntities();
IQueryable<tblCustomer> allInfo = (from x in db.tblCustomers
where x.ID == int.Parse(id)
select x);
Session["Name"] = allInfo.ElementAt(1).ToString();
Session["Family"] = allInfo.ElementAt(2).ToString();
Session["Phone"] = allInfo.ElementAt(3).ToString();
Session["Email"] = allInfo.ElementAt(4).ToString();
Session["Address"] = allInfo.ElementAt(5).ToString();
}
}
finally I started to write a javascript script like below , but in success function ! what should am I Do ?
$(document).ready(function(){
$('idDropDownBox').change(function(){
$.ajax({
type:"POST",
contentType:"application/json; charset=UTF-8",
data:"{CID:'"+ $('idDropDownBox').val() + "'}",
url:'Default.aspx/GetCustomer",
dataType:"json",
success:function(data){
//what should i do here
}
});
});
});
Thanks for responses...
If my understanding is correct, you want to use the output of an ASP.Net page as the source for an AJAX call.
This is not the traditional way to work with ASP.Net though, but still you can do it
This is a simple example:
Output
ASPX - Target (empty, remove all html tags)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Empty.aspx.cs" Inherits="WebApplication1.Empty" %>
ASPX - Target code behind
protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "application/json";
var id = this.Request.QueryString["id"];
// simulate your query using the id property
var q = Enumerable.Range(1, 10);
// set the following values using your real objects
var f = new
{
Name = "your name " + id,
Fam = "your family " + id,
Phone = "your phone " + id,
Email = "your email " + id,
Address = "your address" + id
};
this.Response.Write(JsonConvert.SerializeObject(f));
}
ASPX - Caller
Note, the table shown in this example, is exactly your code, I just copied
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function getData(id) {
$.ajax({
type: "GET",
url: '<%: this.ResolveClientUrl("~/Empty.aspx") %>',
dataType: "json",
data: 'id=' + id,
contentType: "application/json; charset=utf-8;",
success: function (msg) {
$("#<%: this.lblName.ClientID %>").text(msg.Name);
$("#<%: this.lblFamily.ClientID %>").text(msg.Fam);
$("#<%: this.lblPhone.ClientID %>").text(msg.Phone);
$("#<%: this.lblEmail.ClientID %>").text(msg.Email);
$("#<%: this.lblAddress.ClientID %>").text(msg.Address);
}
});
}
$(function () {
$("#<%: this.ddl.ClientID %>").change(function () {
getData($(this).val());
});
});
</script>
<asp:DropDownList runat="server" ID="ddl">
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
</asp:DropDownList>
<table>
<tr>
<td>
<asp:Label ID="lblName" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Name
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFamily" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Family
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPhone" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Phone
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Email
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAddress" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Address
</td>
</tr>
</table>
Have your GetCustomer to return html portion you need to display and in success: handler of $.ajax add code that appends that html to desired container, like $('#someContainer').append(data);
<script type="text/javascript">
$(function () {
$('#LogStatusLable').click(function () {
$('#LoginPanel').slideToggle("slow");
});
$('#LoginPanel').hide();
});
</script>
<div id="LoginPanel">
<br />
<div class="grid_6">
<br />
<a>New User Registration</a>
</div>
<table class="grid_6">
<tr>
<td>Email-ID</td>
<td>
<asp:TextBox runat="server" ID="UsernameTextBox" Width="150px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<asp:TextBox runat="server" ID="PasswordTextBox" TextMode="Password" Width="150px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2"><asp:Label runat="server" ID="LoginValidation" Text=""></asp:Label> </td>
</tr>
<tr>
<td>
<asp:Button ID="Login" runat="server" UseSubmitBehavior="true" Text="Login"
CssClass="buttoncss" onclick="Login_Click" />
<br /> <br />
</td>
</tr>
</table>
</div>
protected void Login_Click(object sender, EventArgs e)
{
if (UsernameTextBox != null && PasswordTextBox.Text != null)
{
if (_user.GetandSetUserDetails(UsernameTextBox.Text, PasswordTextBox.Text))
{
}
else
{
LoginValidation.Text = "Invalid username or password";
}
}
else
{
LoginValidation.Text = "Enter the Username and Password";
}
}
I used the jquery to slideup and slidedown the div tag. Its working correctly but the inside of the div tag i used the asp:button its not functioning well. onclick property is dosent work. Please help me to find a solution.
Thank you.
remove any duplicate form tag in page.
I am sorry if my tags were incorrect and I am having a simple problem from your end but it drives me crazy.
I am having the error mentioned in my question and just now I found many articles on the net stating to add some of the below workarounds to get this work.
But none worked out for me.
Here are some of them:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
<%= ResolveUrl("~/js/main.js") %>
Onpage load:
Page.Header.Databind()
And instead of <%= %> I used this way <%# %>
I am having masterpage,default.aspx and main.aspx page
In my main.aspx this is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("a[rel=group1]").live("click", function () {
$("a[rel^='group1']").colorbox({ opacity: 0.6, open: true });
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$("img[rel^='group1']").live("click", function () {
$("img[rel^='group1']").colorbox({ opacity: 0.6, open: true });
return false;
});
});
</script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
function showStickySuccessToast() {
$().toastmessage('showToast', {
text: 'Finished Uploading!',
sticky: false,
position: 'middle-center',
type: 'success',
closeText: '',
close: function () {
}
});
}
function showStickySuccessToast1() {
$().toastmessage('showToast', {
text: 'Finished Watermarking!',
sticky: false,
position: 'middle-center',
type: 'success',
closeText: '',
close: function () {
}
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=Nextbutton.ClientId%>").click(function (event) {
$('#tabs').tabs('select', 1);
return false;
});
$("#<%=ConfirmTextSettings.ClientId%>").click(function (event) {
$.msgBox({
title: "would you like to cotinue?",
content: "Are you sure want to watermark with these settings?",
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
success: function (result) {
if (result == "Yes") {
$('#tabs').tabs('select', 2);
}
}
});
return false;
});
$("#<%=ConfirmImageSettings.ClientId%>").click(function (event) {
$.msgBox({
title: "would you like to cotinue?",
content: "Are you sure want to watermark with these settings?",
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
success: function (result) {
if (result == "Yes") {
$('#tabs').tabs('select', 2);
}
}
});
return false;
});
});
</script>
<asp:PlaceHolder runat="server" ID="ImageScript">
<script type="text/javascript">
$(function () {
document.getElementById('<%=Nextbutton.ClientId%>').style.visibility = "hidden";
$("#<%=uploader.ClientId%>").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Watermarker.aspx',
max_file_size: '10mb',
max_file_count: 26,
chunk_size: '1mb',
unique_names: true,
rename: true,
dragdrop: true,
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
flash_swf_url: 'js/plupload.flash.swf',
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
$('form').submit(function (e) {
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
//alert('You must at least upload one file.');
return false;
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
setTimeout(function () {
up.start();
}, 100);
if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
$.msgBox({
title: "Info",
content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 25 Images.<br>Rest of the Images will be removed.",
type: "info",
showButtons: true,
opacity: 0.1,
autoClose: false
});
uploader.removeFile(up.files[i - 1]);
} else {
}
});
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
showStickySuccessToast();
document.getElementById('<%=Nextbutton.ClientId%>').style.visibility = "visible";
}
});
});
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
</script>
</asp:PlaceHolder>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=Panel2.ClientId%>').hide();
$('#<%= RbtxtWatermark.ClientID %>').click(function () { $('#<%=Panel1.ClientId%>').show(); $('#<%=Panel2.ClientId%>').hide(); });
$('#<%= RbImgWatermark.ClientID %>').click(function () { $('#<%=Panel2.ClientId%>').show(); $('#<%=Panel1.ClientId%>').hide(); });
});
</script>
<script type="text/javascript">
function StartUpload() {
$("imgDisplay").hide();
}
function UploadComplete(sender, args) {
$("#imgDisplay").show();
$("#imgDisplay").attr('src', 'ajax-loader.gif');
var img = new Image();
img.src = args.get_fileName();
img.onload = function () {
$("#imgDisplay").attr('src', img.src);
};
}
</script>
<div id="tabs" style="position:relative;margin-left:0px;margin-top:30px;margin-bottom:30px;width:946px; height:432px;">
<ul>
<li>Preview</li>
<li>Settings</li>
<li>Watermark</li>
</ul>
<div id="tabs-1">
<div id="uploader" class="container" runat="server">
<p>
You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
<div id="thumbs" class="imgContain" runat="server">
<asp:Button ID="Nextbutton" runat="server" Text="Go to Next Step" style="position:absolute;left:332px;top:345px;"/>
<script type="text/javascript">
$('#<%=Nextbutton.ClientId%>').button();
</script>
</div>
</div>
<div id="tabs-2">
<table>
<tr>
<td>
<asp:RadioButton ID="RbtxtWatermark" runat="server" Text="Text Watermark" ForeColor="White" GroupName="selection" Checked="True" />
</td>
<td> </td><td> </td><td> </td><td> </td><td> </td>
<td>
<asp:RadioButton ID="RbImgWatermark" runat="server" Text="Image Watermark" ForeColor="White" GroupName="selection"/>
</td>
</tr>
</table>
<asp:Panel ID="Panel1" runat="server">
<script type="text/javascript">
function colorChanged(sender) {
sender.get_element().style.color = "#" + sender.get_selectedColor();
}
</script>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Enter Watermark Text :"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSample" runat="server" Text="(C)Copyright" Height="20px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Font Name:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropFont" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Font Size:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropFontSize" runat="server">
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
<asp:ListItem Value="12">12</asp:ListItem>
<asp:ListItem Value="14">14</asp:ListItem>
<asp:ListItem Value="18">18</asp:ListItem>
<asp:ListItem Value="24">24</asp:ListItem>
<asp:ListItem Value="32">32</asp:ListItem>
<asp:ListItem Value="36">36</asp:ListItem>
<asp:ListItem Value="40">40</asp:ListItem>
<asp:ListItem Value="48">48</asp:ListItem>
<asp:ListItem Value="52">52</asp:ListItem>
<asp:ListItem Value="56">56</asp:ListItem>
<asp:ListItem Value="62">62</asp:ListItem>
<asp:ListItem Value="68">68</asp:ListItem>
<asp:ListItem Value="72">72</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Text Color:"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="txtColor1" AutoCompleteType="None" MaxLength="6"
Width="80" Height="20" /><br />
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/icon_colorpicker.gif"
Style="position: absolute; margin-top: -20px; left: 245px;"/>
<cc1:ColorPickerExtender ID="buttonCPE" runat="server" TargetControlID="txtColor1"
SampleControlID="ImageButton1" PopupButtonID="ImageButton1" PopupPosition="TopLeft"/>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Text Opacity:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropTransparency" runat="server">
<asp:ListItem Value="0%">0%</asp:ListItem>
<asp:ListItem Value="25%">25%</asp:ListItem>
<asp:ListItem Value="50%">50%</asp:ListItem>
<asp:ListItem Value="75%">75%</asp:ListItem>
<asp:ListItem Value="100%">100%</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" Text="Text Effects:"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBoxSolid" runat="server" Text="Solid" ForeColor="White" />
<asp:CheckBox ID="CheckBoxOutline" runat="server" Text="Outline" ForeColor="White" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="Text Decoration:"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBold" runat="server" Text="Bold" ForeColor="White" />
<asp:CheckBox ID="CheckItalic" runat="server" Text="Italic" ForeColor="White" />
<asp:CheckBox ID="CheckUnderline" runat="server" Text="Underline" ForeColor="White" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label8" runat="server" Text="Text Shadow:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropShadow" runat="server">
<asp:ListItem Value="Yes">Yes</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label9" runat="server" Text="Text Shadow Color:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtShadowColor" runat="server" Width="80px" Height="20px"></asp:TextBox>
</td>
<td>
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/icon_colorpicker.gif"
Style="position: absolute; margin-top: -10px; left: 245px;" />
<cc1:ColorPickerExtender ID="ColorPickerExtender2" runat="server" TargetControlID="txtShadowColor"
SampleControlID="ImageButton2" PopupButtonID="ImageButton2" PopupPosition="TopLeft"/>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Position of Text:"></asp:Label>
</td>
<td>
<asp:Label ID="Label11" runat="server" Text="Margin-Left:"></asp:Label>
<asp:TextBox ID="txtmarginleft" runat="server" Text="10" Width="50"></asp:TextBox>
<asp:Label ID="Label12" runat="server" Text="Margin-Top:"></asp:Label>
<asp:TextBox ID="txtmargintop" runat="server" Width="50" Text="10"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Rotation of Text:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtrotate" runat="server" Text="0" Width="50"></asp:TextBox> <asp:Label
ID="Label14" runat="server" Text="Degrees"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="ConfirmTextSettings" runat="server" Text="Go to Next Step" style="position:absolute;left:812px;top:395px;"/>
<script type="text/javascript">
$('#<%=ConfirmTextSettings.ClientId%>').button();
</script>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Label15" runat="server" Text="Add Image"></asp:Label>
</td>
<td>
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="UploadComplete"
OnClientUploadStarted="StartUpload" ThrobberID="imgLoader" Width="230px" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
Style="float: left;" ClientIDMode="AutoID"/>
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/ajax-loader.gif" Style="position: absolute;
left: 370px; top: 75px;" />
</td>
</tr>
<tr>
<td>
<img id="imgDisplay" alt="" src="" style="display: none;" height="80"/>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label16" runat="server" Text="Image Opacity in %:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownImgOpacity" runat="server">
<asp:ListItem Value="0%">0</asp:ListItem>
<asp:ListItem Value="25%">25</asp:ListItem>
<asp:ListItem Value="50%">50</asp:ListItem>
<asp:ListItem Value="75%">75</asp:ListItem>
<asp:ListItem Value="100%">100</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="ConfirmImageSettings" runat="server" Text="Go to Next Step" style="position:absolute;left:812px;top:395px;"/>
<script type="text/javascript">
$('#<%=ConfirmImageSettings.ClientId%>').button();
</script>
</td>
</tr>
</table>
</asp:Panel>
</div>
<div id="tabs-3">
Are you sure want to process your images?<br />If so click on the watermark images button below<br />
<br />
<asp:Button ID="btnWatermark" runat="server" Text="Watermark Images" style="position:absolute;left:20px;top:105px;" OnClick="btnWatermark_Click"/>
<script type="text/javascript">
$('#<%=btnWatermark.ClientId%>').button();
</script>
<%-- <asp:Button ID="btnWatermark" runat="server" Text="Watermark Your Images" OnClick="btnWatermark_Click"
Font-Size="12" Font-Bold="True" Style="position: absolute; top: 105px; left: 5px;
height: 40px;" CssClass="ui-button ui-widget ui-state-default ui-corner-all" />--%>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table style="width: 100%;">
<tr>
<td>
<asp:HyperLink ID="DownloadLink" runat="server" ForeColor="#0066FF" style="position:absolute;left:670px;top:404px;">Download Images</asp:HyperLink>
<script type="text/javascript">
$('#<%=DownloadLink.ClientId%>').button();
</script>
</td>
</tr>
<tr>
<%-- <asp:Image ID="Preview" runat="server" Height="150" Width="200" Style="position: absolute;
top: 170px; left: 100px;" BorderStyle="None" />--%>
<div id="FinalPreview" class="imgContainPreview" runat="server">
</div>
</tr>
</table>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="position: absolute; top: 140px; left: 650px;">
<img src="images/Loader.gif" alt="loading" /><br />
<span style="font-weight: bold; font-size: large; color: #000000;">Please wait...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnWatermark" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<input type="hidden" id="currentDirectory" runat="server" />
<asp:TextBox ID="CopySession" runat="server" Visible="True"></asp:TextBox>
</asp:Content>
In my page_load:
For Each str As String In Directory.GetFiles(Server.MapPath("~/WatermarkedImages/") & Session("tempDir").ToString())
Dim filename As String = Path.GetFileName(str)
Dim urls As New List(Of String)
urls.Add("~/WatermarkedImages/" & Session("tempDir").ToString & "/" & filename)
For Each imageURL As String In urls
Dim img = New System.Web.UI.WebControls.Image()
img.ImageUrl = imageURL
img.Attributes.Add("href", "WatermarkedImages/" & Session("tempDir").ToString & "/" & filename)
img.Attributes.Add("rel", "group1")
img.Width = 75
img.Height = 50
img.CssClass = "clickImage"
img.ImageAlign = HorizontalAlign.Left
Me.FinalPreview.Controls.Add(img)
Next
Next
For Each str As String In Directory.GetFiles(Server.MapPath("~/Uploads/") & Session("tempDir").ToString())
Dim filename As String = Path.GetFileName(str)
Dim urls As New List(Of String)
urls.Add("~/Uploads/" & Session("tempDir").ToString & "/" & filename)
For Each imageURL As String In urls
Dim img = New System.Web.UI.WebControls.Image()
img.ImageUrl = imageURL
img.Attributes.Add("href", "Uploads/" & Session("tempDir").ToString & "/" & filename)
img.Attributes.Add("rel", "group1")
img.Width = 75
img.Height = 50
img.CssClass = "clickImage"
img.ImageAlign = HorizontalAlign.Left
Me.thumbs.Controls.Add(img)
Next
Next
In the first for each loop it adds the images fine and for the next forloop for uploads ie..for the thumbs div I get this error.
I see that you use in too many points the <% … %> but you also use it inside the UpdatePanel.
When you include the <% … %> then this processing are made during the page render and not on code behind, on the events of the page. Now if the updatepanel for example try to update from code behind and send data, this part of the page is fails because is never renders again. Or if for any reason this part of the page done before the code behind then we also have some issue. This can be done if you call the <% … %> and inside him you make a call to a code behind functions that try to change some other control on page before this call.
All this sound complicate* ? no its not, you just need to have in your mine how the processing on the web page done and follow it with your mine, and see if you make calls that can not be affect the output because what they affect they all ready have been render.
To solve this issues you need to remove the on page render <% … %> inside the update panels Instidead of <% … %> use a Literal control, and render inside the literal control your output on code behind, so there is no issues when the updatepanel for example needs to render his part.
So change this
<%=cMyInput.CliendID%>
to
<asp:literal run="server" id="txtRenderOnMe" EnableViewState="false" />
and on code behind
protected void Page_Load(object sender, EventArgs e)
{
txtRenderOnMe.Text = cMyInput.CliendID;
}
From your code that you use a lot the <%= ...%> do not go to change all points, only the points that have this issue, probably the one on the UpdatePanel.
*(or I do not describe them good)
Hi all :
I have a user control which contain RadTreeView from Telerik inside ModalPopupExtender , the previous control loaded at runtime :
DashBoardDesignerCell tempCell = LoadControl("~/UserControls/DashBoardDesignerControls/DashboardDesignerCell.ascx") as DashBoardDesignerCell;
When SelectedNodeChanged occurs the ModalPopupExtender disappears.
This is the full code for user contrl:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="DashBoardDesignerCell.ascx.cs"
Inherits="RightBI.UserControls.DashBoardDesignerControls.DashBoardDesignerCell" %>
<%# Register Src="~/UserControls/PresentationControls/SelectPresentationControl.ascx" TagPrefix="rightbicontrols" TagName="selectpresentationcontrol" %>
<asp:UpdatePanel ID="dashboardDesignerCellUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="3" cellspacing="0" style='width: 100%; border-style: solid; border-width: thin;
border-color: Silver;'>
<thead>
<tr style='background: blue'>
<td>
<asp:ImageButton SkinID="selectControlButton" runat="server" ID="addControlButton"
OnClick="okButton_Click" />
<asp:ImageButton SkinID="deleteControlButton" runat="server" ID="removeControlButton"
OnClick="removeControlButton_Click" />
<asp:LinkButton runat="server" ID="LinkButton1" Style='display: none;'>
</asp:LinkButton>
<ajax:ModalPopupExtender runat="server" TargetControlID="addControlButton" ID="selectPresentationControlModalPopupExtender"
PopupControlID="popupSelectPresentationControl" CancelControlID="cancelButton"
BackgroundCssClass="popup_black_BG">
</ajax:ModalPopupExtender>
<asp:Panel runat="server" ID="popupSelectPresentationControl" Style='display: none;'>
<asp:UpdatePanel runat="server" ID="popupSelectUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<div class="popup_container">
<table cellpadding="0" cellspacing="0" class="popup_table">
<tr>
<td class="popup_header_left">
</td>
<td class="popup_header_middle">
</td>
<td class="popup_header_right">
</td>
</tr>
<tr>
<td class="popup_main_left">
</td>
<td class="popup_main">
<div class="popup_content">
<table cellpadding="0" cellspacing="0" style='width: 100%'>
<tr>
<td>
<span>Caption (*):</span>
</td>
<td>
<asp:TextBox runat="server" ID="captionTextBox">
</asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="captionTextBox"
ValidationGroup="SelectPresentationControl" ErrorMessage="Caption is required."
Text="*">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<rightbicontrols:selectpresentationcontrol id="selectControl" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<telerik:RadButton ID="okButton" Text="Save" SkinID="okButton" runat="server" CommandName="Save"
ValidationGroup="SelectPresentationControl" OnClick="okButton_Click">
</telerik:RadButton>
<telerik:RadButton ID="cancelButton" Text="Cancel" SkinID="cancelButton" runat="server"
CommandName="Cancel">
</telerik:RadButton>
</td>
</tr>
</table>
</div>
</td>
<td class="popup_main_right">
</td>
</tr>
<tr>
<td class="popup_footer_left">
</td>
<td class="popup_footer_middle">
</td>
<td class="popup_footer_right">
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</td>
</tr>
</thead>
<tbody>
<tr>
<td style='min-height: 150px;'>
<asp:UpdatePanel runat="server" ID="controlUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel runat="server" ID="controlPanel">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</tbody>
</table>
</ContentTemplate>
</asp:UpdatePanel>
public Guid DashboardColumnID
{
get
{
if (ViewState["DashboardColumnID"] == null)
{
return Guid.Empty;
}
return new Guid(ViewState["DashboardColumnID"].ToString());
}
set
{
ViewState["DashboardColumnID"] = value;
}
}
protected Guid DashboardZoneID
{
get
{
if (ViewState["DashboardZoneID"] == null)
{
return Guid.Empty;
}
return new Guid(ViewState["DashboardZoneID"].ToString());
}
set
{
ViewState["DashboardZoneID"] = value;
}
}
protected Guid PresentationControlID
{
get
{
if (ViewState["PresentationControlID"] == null)
{
return Guid.Empty;
}
return new Guid(ViewState["PresentationControlID"].ToString());
}
set
{
ViewState["PresentationControlID"] = value;
}
}
protected void LoadDashboardZone()
{
DashboardColumn dashboardColumn = DashboardColumn.GetDashboardColumn(DashboardColumnID);
if (dashboardColumn.DashboardZones.Count == 1)
{
DashboardZoneID = dashboardColumn.DashboardZones.FirstOrDefault().Id;
}
if (DashboardZoneID == Guid.Empty)
{
removeControlButton.Visible = false;
addControlButton.Visible = true;
}
else
{
removeControlButton.Visible = true;
addControlButton.Visible = false;
}
controlPanel.Controls.Clear();
if (DashboardZoneID != Guid.Empty)
{
DashboardDesignerZone zone = LoadControl("~/UserControls/DashBoardDesignerControls/DashboardZone.ascx") as DashboardDesignerZone;
zone.DashboardZoneID = DashboardZoneID;
controlPanel.Controls.Add(zone);
}
controlUpdatePanel.Update();
}
protected void Page_Load(Object sender, EventArgs e)
{
//
String code = "function openWindow() {var oWnd = $find('" + selectPresentationWindow .ClientID+ "');oWnd.show(); }";
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "OpenRadWindow", code , true);
LoadDashboardZone();
}
protected void okButton_Click(object sender, EventArgs e)
{
AddPresentationControl(captionTextBox.Text, selectControl.PresentationControlId);
//dashboardDesignerCellUpdatePanel.Update();
}
protected void removeControlButton_Click(Object sender, EventArgs e)
{
if (DashboardZone.RemoveDashboardZone(this.DashboardZoneID))
{
PresentationControlID = Guid.Empty;
DashboardZoneID = Guid.Empty;
LoadDashboardZone();
//dashboardDesignerCellUpdatePanel.Update();
}
}
public void AddPresentationControl(String caption, Guid presentationControlID)
{
DashboardZone tempDashboardZone = DashboardZone.AddDashboardZone(caption, DashboardColumnID, presentationControlID);
if (tempDashboardZone != null)
{
PresentationControlID = presentationControlID;
DashboardZoneID = tempDashboardZone.Id;
LoadDashboardZone();
}
}
Is There any idea???
Do you by any means do postback or ajax request when a treeview node is selected? This might be potential cause the modal popup extender is closed. Why you do not use the Telerik Ajax window instead, to compare the results? Also I assume that you load the user control dynamically on init or load of the page and clear the Controls collection of the container before adding the user control inside it.