I am testing the ModalPopupExtender in a simple web application. The user should input a value in the modalpopup and then this value would be shown in the parent page after closing the modal popup.
I used this code for the design:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button runat="server" ID="BtnOpenPopup" Text="Open Popup" />
<asp:Label runat="server" ID="lbl" ></asp:Label>
<asp:Panel runat="server" ID="PnlTest">
<asp:TextBox runat="server" ID="txtInput"></asp:TextBox>
<asp:Button runat="server" ID="BtnSubmit" Text="Submit" OnClick="BtnSubmit_Click" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" TargetControlID="BtnOpenPopup" EnableViewState="true" OkControlID="BtnSubmit" PopupControlID="PnlTest" ></ajaxToolkit:ModalPopupExtender>
</div>
</form>
</body>
</html>
And this is my code behind:
protected void BtnSubmit_Click(object sender, EventArgs e)
{
lbl.Text = txtInput.Text;
}
This didn't work, I don't get any errors, but still the lbl isn't loaded with the user input.
Would appreciate if you can give me some insight on how this works.
Hello I guess that you have to add a script for the OnOkScript attribute, try this :
//......
//.......
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="BtnOpenPopup"
EnableViewState="true"
OkControlID="BtnSubmit"
PopupControlID="PnlTest"
OnOkScript="onModalOk();"> <!-- here is the tag you have to add to get it work -->
</ajaxToolkit:ModalPopupExtender>
</div>
</form>
<script>
function onModalOk()
{
document.getElementById("lbl").innerText = document.getElementById('txtInput').value;
}
</script>
Related
I am trying to play with Ajax a bit so i have created the following function.
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " + DateTime.Now.ToString();
}
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
So this above example from Microsoft. Now this works perfectly for me. what i want to do here is run the Button1_Click function on $(document ).ready()
This is not the right thing to do, the doPostBack method will cause an endless loop.
document.Ready -> doPostBack -> Document.ready -> doPostBack. Etc..
You can do this
$(document).ready(function() {
__doPostBack("Button1", null);
});
Page url: http://advancedmedia.co.il/data.aspx
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
<asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
<ItemTemplate>
<li>
<asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**">
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="**" runat="server"
DataFile="~/***/***" XPath="/Data/**/**">
</asp:XmlDataSource>
</asp:Content>
Click on the thumbs "jump" the page.
I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?
You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.
Define a surrounding div for the imain image with id "imageBox"
<img class="thumb" src="image1_thumb.jpg" />
<div id="imageBox"> </div>
then,
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox").html("<img src='image" + rel + ".jpg' />");
})
});
This is both clean and lightweight. no Microsoft ajax panel junk.
I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves.
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
Used AutoPostBack="false" in listview page can't be refresh ..or used javascript to change the image
Put ScriptManager.
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<!-- bla bla bla.. -->
Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"
Set ClientIDMode=Auto on the LinkButton.
Everything seems correct.
Here is a sample for Update panel.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 1";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 2";
}
}
}
I have following code snippet in my asp.net webpage.
<div id="descDiv" style="display:none;">
<form>
<asp:TextBox ID="inputDesc" Height="200px" Width="100%" runat="server" TextMode="MultiLine" placeholder="Enter any details you know about this city" required="required"></asp:TextBox>
<input type="button" Class="cancel" value="Cancel" OnClick="hideInput('descDiv');" /><asp:Button ID="Submit_Desc" CssClass="submit" runat="server" Text="Submit" OnClick="Submit_Desc_Click" />
</form>
</div>
When I click the submit button I receive this error:
Invalid postback or callback argument. Event validation is enabled using
<pages enableEventValidation="true"/> in configuration or
<%# Page EnableEventValidation="true" %> in a page.
For security purposes, this feature verifies that arguments to postback or
callback events originate from the server control that originally rendered them.
If the data is valid and expected, use the
ClientScriptManager.RegisterForEventValidation method in order to register the
postback or callback data for validation.
This form is enclosed in another main form which has 'runat' attribute. What should I do to correct this problem?
EDIT:
Here is the shortest code to reproduce the problem:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="descDiv">
<form>
<asp:TextBox ID="inputDesc" Height="200px" Width="100%" runat="server" TextMode="MultiLine" placeholder="Enter any details you know about this city" required="required"></asp:TextBox>
<input type="button" class="cancel" value="Cancel" onclick="hideInput('descDiv');" />
<asp:Button ID="Submit_Desc" CssClass="submit" runat="server" Text="Submit" OnClick="Submit_Desc_Click"/>
</form>
</div>
</div>
<form>
<asp:TextBox ID="TextBox1" Height="200px" Width="100%" runat="server" TextMode="MultiLine" placeholder="Enter any details you know about this city" required="required"></asp:TextBox>
<input type="button" class="cancel" value="Cancel" onclick="hideInput('descDiv');" />
<asp:Button ID="Button1" CssClass="submit" runat="server" Text="Submit" OnClick="Submit_Desc_Click"/>
</form>
</form>
</body>
</html>
You cannot have two forms on your page, remove the form tag just under your div. The one to keep has to be the form runat="server" since it's a .net page.
what you can do is use .net buttons and process whatever they do from code behind
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</form>
protected void Button1_Click(object sender, EventArgs e)
{
// do something with button 1
}
protected void Button2_Click(object sender, EventArgs e)
{
// do something with button 2
}
I have a page that is taking a couple of seconds to load due to a lot of data being displayed.
How can i make it so that it plays a .gif animation until the data is ready to be displayed in a table instead of not having anything displayed?
How to set the table/content to display only after the loading is complete?
you can use asp.net ajax control, for example ScriptManager + UpdateProgress + UpdatePanel.
Here an example
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
Why my buttons won't work in update panel, but if I press "enter" key it's working?
<asp:ScriptManager ID="Sqrpt1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel UpdateMode="Always" ChildrenAsTriggers="true" ID="updpan" runat="server"><ContentTemplate>
<fieldset>
<asp:Panel runat="server" ID="ClientSearchPa" DefaultButton="SearchClientPopup">
<asp:TextBox ID="SearchClientBox" runat="server"></asp:TextBox>
<asp:Button ID="SearchClientPopup" runat="server" Text="Search"
onclick="SearchClientPopup_Click" /></asp:Panel>
<br />
<asp:ListBox ID="Clients" runat="server" Height="341px" Width="682px"></asp:ListBox>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<asp:Button ID="ClientSelect" runat="server" OnClick="ClientSelect_Click" Text="button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Your code is perfectly alright and button are firing event on server side change your some control values in server events. Your might not be noticing very fast response of ajax call
protected void SearchClientPopup_Click(object sender, EventArgs e)
{
SearchClientBox.Text = "Hello ajax SearchClient clicked";
}
protected void ClientSelect_Click(object sender, EventArgs e)
{
SearchClientBox.Text = "Hello ajax ClientSelect cliecked ";
}
<asp:Panel runat="server" ID="ClientSearchPa" DefaultButton="SearchClientPopup">
<asp:TextBox ID="SearchClientBox" runat="server"></asp:TextBox>
<asp:Button ID="SearchClientPopup" runat="server" Text="Search" onclick=
"SearchClientPopup_Click" />
</asp:Panel>
Here DefaultButton is set to SearchClientPopup.So if the focus is on any control within the Panel,then Enter key will work and SearchClientPopup will fire the click event.
<asp:Button ID="ClientSelect" runat="server" OnClick="ClientSelect_Click" Text="button" />
This button is not inside the panel control.So you have to explicitly fire it by clicking