Simply I have a Dropdownlist with RequiredFieldValidatior in UpdatePanel on a page,
I have enabled autopostback for the dropdownlist.
The problem is that Dropdownlist selectedindex event is not firing.
This unexpected behavior happens when I validate the page and ant error occurs.
I searched a lot but unable to find the solution
my code is as follows:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<script type="text/javascript">
function ValidateMe() {
if (Page_ClientValidate("vgOption")) {
alert("valid");
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smMain" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="pnlMain" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td>
Option:
</td>
<td>
<asp:DropDownList runat="server" AutoPostBack="true" ID="Opt" OnSelectedIndexChanged="Opt_SelectedIndexChanged" ValidationGroup="vgOption">
<asp:ListItem Text="--Select Option--" Value="0" />
<asp:ListItem Text="Upload" />
<asp:ListItem Text="Download" />
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfv" runat="server" ControlToValidate="Opt" Display="None" InitialValue="0" ValidationGroup="vgOption" ErrorMessage="Please select an option"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Postback:
</td>
<td>
<asp:Label Text="" ID="lblMessage" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" onclick="return ValidateMe();" value="Test" title="Test" />
<asp:ValidationSummary ValidationGroup="vgOption" runat="server" ShowMessageBox="true" ShowSummary="false" DisplayMode="List" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Opt_SelectedIndexChanged(object sender, EventArgs e)
{
lblMessage.Text = "Autopostback: " + DateTime.Now.ToString();
}
}
Steps to repopulate the issue:
1. Click first option in dropdown
2. click on submit button
3. change dropdownlist value (this should fire selectedindex changed event, but it doesn't)
PS: I do not want to postback to happen when the submit button is clicked that is why I added <input> instead of asp.net button,
even if I add asp.net button it doesnt work
Added Page_BlockSubmit = false; in the JS code which was preventing the postback...
<script type="text/javascript">
function ValidateMe() {
if (Page_ClientValidate("vgOption")) {
alert("valid");
}
Page_BlockSubmit = false;
return false;
}
</script>
Reference: http://www.techques.com/question/1-2083929/Dropdownlist-doesn%27t-postback-after-Page_ClientValidate%28%29
replace
<input type="button" value="Test" title="Test" runat="server" validationgroup="vgOption"/>
with
<asp:Button ID="btn" runat="server" Title="Test" Text="Test" ValidationGroup="vgOption" OnClientClick="return ValidateMe()"/>
the issue is solved.
Add property ViewStateMode="Enabled" and EnableViewState="true"
in drop DropDownList
For more details click here
On clicking submit button, if page validation returns false and then changing the drop-down's selected-index will not work for first time. Because on submitting the form it will do Form validation.
If Validation returns false [indicates not to submit the Form], then you can can’t go to server side code.
Since you have used “SelectedstateChanged” event for the Dropdown, the code inside the event handler function will not execute after form validation is returned as false.
So to handle this problem, add onchange="Page_BlockSubmit = false;" :
<asp:DropDownList runat="server" AutoPostBack="true" ID="Opt" OnSelectedIndexChanged="Opt_SelectedIndexChanged"
CausesValidation="false" ValidationGroup="none" onchange="Page_BlockSubmit = false;">
<asp:ListItem Text="--Select Option--" Value="0" />
<asp:ListItem Text="Upload" />
<asp:ListItem Text="Download" />
</asp:DropDownList>
Reference Link http://burnignorance.com/asp-net-developer-tips/dropdownlist-validation-problem-in-asp-net/
Related
I have a very simple application. I am trying to upload the file using File upload control of ASP.net. Below is my entire .cs code and .aspx code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestFileUpload1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void uploadFile_Click(object sender, EventArgs e)
{
if (UploadImages.HasFiles)
{
foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
{
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
//listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
}
}
My .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
whenever I try to upload a file, I get "False" for UploadImages.HasFiles.
Above is full working example.
As soon as I remove one of these script tags :
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
my code starts working and I get "true" for UploadImages.HasFiles when I try to upload a file.
I am using .net framework 4.7.2
I need to keep these two script tags in my code because of the GUI and this is an old application where these tags are used in all the pages.
I also tried to wrap the control in a update panel and that didn't work either. below is the changed .aspx page. although, I want my original code to work. I don't want to use ajax, but I just tried to use it because it is suggested as one of the solution
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<%--<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>--%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
below is the image of false value that I am getting in code behind:
Any help will be highly appreciated.
All I had to do is put data-ajax ="false" in form tag and that fixed the issue.
<form id="form1" runat="server" data-ajax ="false">
Use a update panel and wrap your controls inside it. Then add the button controlID as a trigger (be sure its a PostBackTrigger) to the update panel. To test be sure to put a break point on the uploadFile_Click event so you can step through and see the values..
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnSignaureOfRequestor" />
</Triggers>
<ContentTemplate>
<table>
<tr> <td class="tdText" colspan="4">
<asp:FileUpload ID="fileUpload" runat="server" Width="50%" />
</td>
</tr>
<tr>
<td> <asp:Button ID="btnSignaureOfRequestor" runat="server" Text="Submit Request" Visible="true" OnClientClick="return confirm('Are you sure you want to continue?');" OnClick="btnSignaureOfRequestor_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Try the below, removed allow multiple and add update mode conditional (see confirm case/syntax of these changes as I'm just writing it in notepad)
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updateMode="Conditional">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
I've tried to use the DropDownList to update the content of a label.
The first one is the Asynchronous Transfer Mode. The page doesn't refresh when a new item is selected.
The second one is the Synchronous Transfer Mode. The entire page is refreshed when a new item is selected.
However, neither of these two labels refreshed as I like when I tried to selected a new item in my DropDownList.
Could anyone help me?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ex8_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<div>
Password：<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
Asynchronous Transfer Mode</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<p>
Show selected item <asp:Label ID="Label1" runat="server"></asp:Label>
</p>
<p>
Synchronous Transfer Mode</p>
<p>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</p>
<p>
Show selected item <asp:Label ID="Label2" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ex8_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedValue;
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
Label2.Text = DropDownList2.SelectedValue;
}
}
DropDownList1 is inside UpdatePanel, while Label1 is outside of it. UpdatePanel enables rendering part of a page which is inside of it. Therefore Label1 keeps the old value. If you place Label1 inside UpdatePanel, more precise inside ContentTemplate, you will see the change of the label.
UpdatePanel renders part of the page without postback. You can see that when you select an item from DropDownList1 there is no new go back arrow in your browser. The best way to check this is when you open the .aspx page and first select an item from DropDownList1. Go back arrow will still be disabled.
DropDownList2 is not inside an UpdatePanel and it uses postback to render entire page. This is the reason why Label1, if it is outside UpdatePanel, sets its value to selected item from DropDownList1 when you select an item from DropDownList2. Label1 got the selected item from DropDownList1, it just waits for the postback, which is fired by DropDownList1.
To update Label2 you need to add event handler OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" to DropDownList2.
When removed UdpatePanel control, the DropDownList after SelectedIndexChanged, Label is updated with selectedvalue.
The ScriptManager and UpdatePanel controls remove the requirement to refresh the whole page with each postback, which improves the user experience.
More Information Here!
You can have one global UpdatePanel and then use UpdatePanels as per requirements. And then controls may not be restricted to particular UpdatePanel. It still gets refreshed.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList1"
runat="server"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<p>
Show selected item <asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%# Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.
Any help would be appreciated. Thank you! Here is my code:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
<tr>
<td>
<asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
Width="400px">
<table id="MainTable">
<tr>
<td align="center" class="style3">
<asp:Label ID="GroupLabel" runat="server">
</asp:Label>
</td>
<td align="center" class="style4">
<asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
</asp:Panel>
</td>
<td width='100px'>
</td>
<td>
</td>
</tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
<table>
<tr>
<td align="center">
<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
runat="server">
</asp:ToolkitScriptManager>
<asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
<ContentTemplate>
<asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.
http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx
if you are using IE then its very simple just put the code in your
page directive.
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
MaintainScrollPositionOnPostback="true" %>
but it will not work in Firefox for that you have to add one browser
file into your website
Right click on solution explorer > Add New Item
Select Browser File and add it to App_Browsers folder.
Add MaintainScrollPositionOnPostback capability to this browser file
as written below.
<browsers>
<browser refID="Mozilla">
<capabilities>
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
</capabilities>
</browser>
</browsers>
Some times this also not work,
Then a simple solution just add a blank Update panel after the grid
and onpostback just put the focus to that update panel it will work in
any browser.
in cs postbackevent updatepanel1.Focus();
If any problem just feel free to ask or any modification reply.
Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.
You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
<script type="text/javascript">
// It is important to place this JavaScript code after ScriptManager1
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Get X and Y positions of scrollbar before the partial postback
xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
yPos = $get('<%=Panel1.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Set X and Y positions back to the scrollbar
// after partial postback
$get('<%=Panel1.ClientID%>').scrollLeft = xPos;
$get('<%=Panel1.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="300">
<%-- Some stuff which would cause a partial postback goes here --%>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
You can set focus on the control you'd like to see on the screen.
e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:
ddlCity.Focus();
I was able to resolve a similar problem with the following hack:
Add HiddenField Control to the page or control you're working in. Be sure to set the ClientIDMode to static so that it is easily accessible in JavaScript. We will use JavaScript to update this control:
<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" />
Also Add a panel control as the target to which we will insert some javascript:
<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>
Add the following JavaScript. With the window.onscroll function, we are updating our HiddenField Control. The updateScrollPosition function will be called from our C# code behind:
<script>
window.onscroll = function () {
var ctrl = document.getElementById("scrollPosition");
ctrl.value = document.body.scrollTop;
console.log(ctrl.value);
};
function updateScrollPosition(value) {
window.scrollTo(0, value);
console.log("updating scroll position");
}
</script>
Create a new C# Class and add the following method. This will allow us to insert some Javascript from the code-behind in C#:
public static class ClientScript
{
public static void InsertScript(string script, Control target)
{
HtmlGenericControl s = new HtmlGenericControl();
s.TagName = "script";
s.InnerHtml = script;
target.Controls.Add(s);
}
}
Now, in the code behind of your control or page, call the JavaScript function "updateScrollPosition(value)" with the value from our ASP.NET HiddenField Control by inserting the javascript into pnlScriptRunner with the static class we created:
protected void btnRotate_Click(object sender, EventArgs e)
{
//Do stuff with controls in your update panel here, then:
ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
UpdatePanel1.Update();
}
My btnRotate_Click event is registered as a trigger in the update panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b>Image Preview: </b><br />
<asp:Image ID="img" runat="server" CssClass="profileImage" />
<br />
<br />
<asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnRotate" />
</Triggers>
</asp:UpdatePanel>
The following references are necessary:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
Hopefully this helps!
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 RadioButtonList with AutoPostBack=true that is within a Repeater. The entire Repeater is surrounded by an Update Panel. However, the RadioButtonList is causing a full postback to occur.
I have tried other scenarios where the UpdatePanel is also within the repeater as well and still get the same issue.
The following code shows the issue.
The first Radio Button is outside of an Update Panel and should cause a full postback. This works correctly.
The second Radio Button is within its own Update Panel and should cause a partial postback. This works correctly.
The third Radio Button is within a Repeater that is within an Update Panel. This should cause a partial postback, however, it is causing a full postback.
The fourth Radio Button is within an Update Panel that is within a Repeater. This should also cause a prtial postback, however, it is causing a full postback.
<%# Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptTest1.DataSource = Enumerable.Range(1, 1);
rptTest1.DataBind();
rptTest2.DataSource = Enumerable.Range(1, 1);
rptTest2.DataBind();
}
}
</script>
<!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>
<asp:ScriptManager ID="script1" EnablePartialRendering="true" runat="server" />
Date1: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl1" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
Date2: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl2" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="upd1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptTest1" runat="server">
<ItemTemplate>
Date3: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl3" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Repeater ID="rptTest2" runat="server">
<ItemTemplate>
<asp:UpdatePanel runat="server" id="upd2" UpdateMode="Conditional">
<ContentTemplate>
Date4: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl4" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I need to find a way of having an AutoPostBack RadioButton within a repeater that does NOT cause a full postback as the page itself is large and the resulting postback causes a large flicker to the end user.