I am trying to understand UpdatePanels and best practise for using them.
I am using .Net4.0 with VB.Net.
The idea is to create a conversation app for a clients website and so I have control called Convo.ascx. Code added below.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<h2>Conversation</h2>
<p><asp:Literal ID="lit1" runat="server" /></p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
Convo.ascx.vb
Partial Class Convo
Inherits System.Web.UI.UserControl
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
lit1.Text = lit1.Text & "<p>" & TextBox1.Text & "</p>"
End Sub
End Class
On a load page (Default.aspx) I have:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%# Reference Control="~/Convo.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Add Conversation" />
<asp:PlaceHolder ID="phConversation" runat="server">
</asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
With Codebehind Default.aspx.vb as
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
AddConvo()
End Sub
Private Sub AddConvo()
Dim getPh As New PlaceHolder
getPh = CType(Me.FindControl("phConversation"), PlaceHolder)
Dim ucConvo As New Convo
ucConvo = CType(LoadControl("~/Convo.ascx"), Convo)
getPh.Controls.Add(ucConvo)
End Sub
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
AddConvo()
End Sub
End Class
So the Convo I add OnLoad remains on the page after extra as been added been any convo added after load is gone once the button on Convo is hit.
So my question is, how can I have these add and remain? Eventually they will be added to database but right now I am trying to understand UpdatePanels as they will become the foundation for this app.
Is there a very good explanation of multi-use UpdatePanels anywhere?
Thanks in advance
PS, im a hobbiest so only VB responses please
The issue actually isn't with the UpdatePanel, but with ASP.NET. ASP.NET web forms uses a control hierarchy for the entire page, and you are adding the controls to the hierarchy "dynamically". Since you are doing it that way, ASP.NET requires you add the control back into the control hierarchy on every postback to the server. The UpdatePanel is a way to post back to the server, and therefore you must re-add the old user controls and new ones to that hierarchy.
Essentially the UpdatePanel was added to make AJAX easy, but you still have to work within the rules of ASP.NET.
Related
I am using Visual Studio 2010, VB.NET, target framework .NET 4.0.
I have a GridView which I am binding to some object collection, with a CommandField column that should allow edit of the selected row.
I am setting the EditIndex property correctly in the RowEditing eventhandler.
The problem is: When I click the "Edit" link that is generated, nothing apparently happens, the row gets rendered again in "view mode", not "edit mode".
But if I do some random postback, like clicking my "doNothing" button, the row gets rendered in "edit mode" in the next postback.
I have managed to reproduce the problem in the following code:
ASPX:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="MyForm.aspx.vb" Inherits="MySandBox.MyForm" %>
<%# Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %>
<!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">
<asp:GridView ID="gvInfrator" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:CommandField ShowEditButton="true" />
<asp:BoundField HeaderText="MyField" DataField="MyField" />
</Columns>
</asp:GridView>
<asp:Button ID="btnDoNothing" runat="server" Text="Just do a postback" />
</form>
</body>
</html>
Code Behind:
Public Class MyDto
Public Property MyField As String
End Class
Public Class MyForm
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.BindMyData()
End Sub
Private Sub BindMyData()
Dim myData As New MyDto
myData.MyField = "My field value"
Me.gvInfrator.DataSource = New MyDto() {myData}
Me.gvInfrator.DataBind()
End Sub
Protected Sub gvInfrator_RowEditing(sender As Object, e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gvInfrator.RowEditing
Me.BindMyData()
Me.gvInfrator.EditIndex = e.NewEditIndex
End Sub
End Class
Am I doing something wrong? Is this a bug in .NET Framework 4? Is there any workaround?
You need to bind your data after you set the EditIndex of your GridView.
Protected Sub gvInfrator_RowEditing(sender As Object, e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gvInfrator.RowEditing
Me.gvInfrator.EditIndex = e.NewEditIndex
Me.BindMyData()
End Sub
I'm working on some .NET code in visual studio web developer and I'm having an issue. When I double click on a button in design view, instead of loading a subprocedure, all it does is highlight this: <asp:Button ID="btnEnter" runat="server" Text="Enter" onclick="btnEnter_Click" />
When I try to run that just to see what happens, I get this error:
Line 8: <asp:Button ID="btnEnter" runat="server"
Compiler Error Message: BC30456: 'btnEnter_Click' is not a member of 'ASP.default_aspx'.
If I erase the onclick="btnEnter_Click" and run it, it works. Either way though, when I double click the button / element, shouldn't it create a subprocedure for me that looks something like?
Protected Sub TextBox1_TextChanged(sender As Object, e As EventArgs)
End Sub
I've tried entering that manaully but the keywords don't turn blue or any sort of color, and when I run it, it just shows up as text on the webform with my other elements. Here is all I have so far:
<%# Page Title="Home Page" Language="VB"%>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Enter a person's name below"></asp:Label>
<p>
<asp:TextBox ID="txtStudentName" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="btnEnter" runat="server"
Text="Enter" onclick="btnEnter_Click" />
</p>
<p>
<asp:Button ID="btnDisplay" runat="server" Text="Display all and exit" />
</p>
<p>
<asp:Label ID="lbl2" runat="server" Text=" "></asp:Label>
</p>
<p>
<asp:Label ID="lbl3" runat="server" Text=" "></asp:Label>
</p>
<p>
<asp:Label ID="lbl4" runat="server" Text=" "></asp:Label>
</p>
<p>
<asp:Label ID="lbl5" runat="server" Text=" "></asp:Label>
</p>
</form>
Edit:
When I enter my code inside the default.aspx.vb file, it highlights keywords and such, but it can't reference the elements I created in the design view.
Partial Class _Default
Inherits System.Web.UI.Page
End Class
Class Lab1
Protected Sub TextBox1_TextChanged(sender As Object, e As EventArgs)
End Sub
Public Const length As Integer = 3
Shared counter2 As Integer = 0
Public Shared studentList As String() = New String(2) {}
Protected Sub btnEnter_Click(sender As Object, e As EventArgs)
Label1.Text = "Enter a person's name"
Dim studentName As [String] = txtStudentName.Text
If studentList.Length <= length Then
If txtStudentName.Text <> "" Then
Dim match As [Boolean] = True
Dim i As Integer = 0
While counter2 >= i
If studentList(i) IsNot Nothing Then
If studentList(i).ToUpper() = txtStudentName.Text.ToUpper() Then
match = False
Label1.Text = "This name has already been used"
End If
End If
i += 1
End While
If match = True Then
studentList(counter2) = txtStudentName.Text
counter2 += 1
End If
End If
End If
End Sub
End Class
Your Page declaration seems to say you are using inline style:
<%# Page Title="Home Page" Language="VB"%>
Which means your code is/should be within aspx file itself in a script runat="server" tag:
<%# Page Language="VB" %>
<!DOCTYPE html>
<script runat="server">
Protected Sub Button1_Click(sender As Object, e As EventArgs)
'Do something
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>
</form>
</body>
</html>
However, your other code indicates you seem to want to use code-behind model, where you have .vb files (e.g. foo.aspx.vb)
The Page is declared like this for web sites (for web applications it will say CodeBehind="foo.aspx.vb"):
<%# Page Language="VB" AutoEventWireup="false" CodeFile="foo.aspx.vb" Inherits="foo" %>
You will find a foo.asp.vb file in your project
it's class name will be the name of your file (foo)
your code should be scoped to this class (I'm not sure what Class Lab1 in your post above is for....
foo.aspx.vb:
Partial Class foo
Inherits System.Web.UI.Page
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
'Do something
End Sub
End Class
The "fix" is for you to:
choose which model you want to write code: inline or code-behind
declare the Page appropriately
for inline, your code will be in the aspx file itself
for code-behind, your code will live, and should be encapsulated within the Class file of the page.
The Page declaration actually says so:
CodeFile="foo.aspx.vb" is the file where the code is
Inherits="foo" is the Partial Class in the file (Partial Class foo)
Try this
Private Sub btnEnter_Click(sender As Object, e As System.EventArgs) Handles btnEnter.Click
End Sub
Here, btnEnter_Click is your event name and use the Handles keyword at the end of a procedure declaration to cause it to handle events raised by an object variable
According to this post you can intercept the post by overriding this function __doPostBack but it wont work. If I view the generated source I am not able to see the function that is meant to be auto generated and causes asp.net to make the postback.
where is this function? and how do I intercept it?
I'm using asp.net 4 and vs 2012
Default.aspx
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
//breaks here as it cant find __doPostBack
var __original = __doPostBack;
__doPostBack = myFunction();
function myFunction() {
alert('intercept');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub form1_Load(sender As Object, e As EventArgs) Handles form1.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim txt As String = TextBox1.Text
End Sub
End Class
An ASP.NET Button renders an <input type="submit" /> to postback the form, and will never use this method. The __doPostBack method is only used for elements that are not input buttons that do not normally cause a POST operation to the server. This is a function that's inside one of the Microsoft's JavaScript file, and only gets rendered out on the client. Common uses for __doPostBack are LinkButton controls, controls that may have AutoPostBack="true", and others.
Also, there may be a call to WebForms_DoPostBack... something named like that that also posts back, but internally calls __doPostBack.
If you are trying to prevent postback on click of your button, attach to the submit event of the form, and cancel the postback operation that way.
I have a tab container within an update panel. I'd like to add generated tabs to that container on a button click. The tabs get added. Once, the next time the button's clicked the previous tab is lost and a new one replaces it. I want to keep the tabs if possible. These tabs will later be filled with controls based on which button is clicked.
I've found many posts suggesting that the tabs have to be re-created on PostBack but it's not working. I don't think I know how to do it either.
My current aspx file.
<!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">
<asp:ScriptManager ID="ScriptManager1" runat="server" ViewStateMode="Enabled">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Add Tab" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
ViewStateMode="Enabled">
</ajaxToolkit:TabContainer>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Here is the code-behind so far.
Imports AjaxControlToolkit
Public Class WebForm1
Inherits System.Web.UI.Page
Private Sub WebForm1_Load(sender As Object, e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim newTab As TabPanel = New TabPanel
Dim rand As New Random
Dim exampleID As String = rand.Next(1000).ToString
newTab.ID = exampleID
newTab.HeaderText = exampleID
newTab.Controls.Add(New LiteralControl(exampleID))
TabContainer1.Tabs.Add(newTab)
Label1.Text = Label1.Text + "<br />" + "Added tab " + newTab.ID.ToString 'Just here for output.
End Sub
End Class
I'm sure the current open tabs have to be stored somewhere and re-created on the update panel's postback but like I said. Where do I put that code and how is it stored?
Any help would be much appreciated! Thanks!
I recently came across the AsyncFileUpload control in the latest (3.0.40412) release of the ASP.Net Ajax Control Toolkit. There appears to be an issue when using it in a hidden control that is later revealed, such as a <div> tag with visible=false.
Example:
Page code -
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
.
.
.
<act:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel runat="server" ID="upnlFileUpload">
<ContentTemplate>
<asp:Button runat="server" ID="btnShowUpload" Text="Show Upload" />
<div runat="server" id="divUpload" visible="false">
<act:AsyncFileUpload runat="server" id="ctlFileUpload" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Server-side Code -
Protected Sub ctlFileUpload_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles ctlFileUpload.UploadedComplete
End Sub
Protected Sub btnShowUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowUpload.Click
divUpload.Visible = True
End Sub
I have a breakpoint on the UploadedComplete event but it never fires. However, if you take the AsyncFileUpload control out of the <div>, making it visible at initial page render, the control works as expected.
So, is this a bug within the AsynchUploadControl, or am I not grasping a fundamental concept (which happens regularly)?
First, make sure your tag has the following attribuytes - enctype="multipart/form-data" method="post" Secondly, you have to have the AsyncFileUpload in an invisible DIV within a visible DIV. See these two threads on it.
http://forums.asp.net/t/1489399.aspx
http://forums.asp.net/t/1479689.aspx?PageIndex=2