We Keep Coding

Unable to trigger the code-behind (aspx.cs) method from aspx page using update panel

I got a autocomplete textbox which displays Citynames. Whenever user clicks on a cityname the selected cityname is displayed in a textbox. This textbox value should be sent over to code behind method (aspx.cs) for fetching more details of the selected city name so that the resultant details are displayed in a gridview.
Now for passing the selected value I have added a textbox which copies the selected cityname value and enclosed it in a update panel. When ever the text box selection changes the idea is to trigger the code-behind method:
This is the code in aspx page:
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').html(this.value);
}).change();
$('#txtName').on('autocompleteselect', function (e, ui) {
$('#selectedItem').val(ui.item.value);
});
});
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<label>Alternate Names: </label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Label ID="countLabel" runat="server"></asp:Label>
<br />
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server" OnTextChanged="selectedItem_TextChanged"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="selectedItem" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
This is the code in aspx.cs page:
protected void selectedItem_TextChanged(object sender, EventArgs e)
{
MessageBox.Show(selectedItem.Text);
}
But this method ain't getting triggered. Could somebody please help me with identifying the mistake i'm doing.

First, MessageBox.Show is not WEBforms code but WINforms. You should not mix those together. If you want to show results on a webpage, use javascript alert or a Modal.
Next item is this: $('#selectedItem').html(this.value);. It should be used with val()
$('#selectedItem').val(this.value);
Third if yo want to trigger a PostBack on a TextChange, use AutoPostBack=true
<asp:TextBox ID="selectedItem" ClientIDMode="Static" runat="server"
OnTextChanged="selectedItem_TextChanged" AutoPostBack="true"></asp:TextBox>
However a PostBack will not be triggered by changing the text from txtName in selectedItem also. the textbox needs to lose focus/blur itself to trigger the PostBack. So either just put txtName in the UpdatePanel and place the TextChanged event on that, or remove the TextChanged from selectedItem, place a Button in the UpdatePanel and click that with jQuery.
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="showResults" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').val(this.value);
$('#Button1').click();
});
});
</script>
And then in code behind
protected void Button1_Click(object sender, EventArgs e)
{
showResults.Text = selectedItem.Text;
}

UpdatePanel with AsyncPostback tryes to update control outside UpdatePanel

I need to have UpdatePanel with asyncpostback, but in my case it seems that no partial postback happens, but fullpostback. I am new to web forms, please, check the code:
<%# Register TagPrefix="Cust" TagName="CompanyInformationView" Src="~/CustomControls/CompanyInformationView.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick= "Button1_Click" Text="test" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<Cust:CompanyInformationView ID="CompanyInformationView" runat="server" />
</asp:Content>
So I have Test Button. OnClick it should do "nothing" for test. Also there is custom control on web form. Here is server side code for this form:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// fill in custom control
CompanyInfo c = GetInfo();
CompanyInformationView.Company = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
var i = 1;
}
CompanyInformationView is custom control with property "Company". There is no ViewState added for this property (so it cannot be loaded properly if postback is done). When I click on Test Button, the page fails, because "CompanyInformationView.Company" is not set (it is not set, because it cannot be loaded from ViewState, I guess).
Instead, I think that it should not work like this. AsynPostback should deal only with UpdatePanel.
Why it wants to reload custom control? Doesn't it mean that Full postback happen or maybe I do not understand Asyncpostback?

PageLoad and all other events are raised on every get\postback, no matter if it's async or full,
In asyncpostback, the response which the server renders includes only the content inside the updatepanel.

Try to Put <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Before
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">

Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response. so in this case, async post back will still give you exception unless you populate the custom control no matter get/post.
you need to also put the custom control inside another update panel or in the same update panel as the button in order see partial update to happen.

ImageButton PostBack Issue

I have created a custom UserControl in Asp.Net. This user control contains an asp:ImageButton wrapped in an UpdatePanel with a ScriptManagerProxy in the UserControl and a parent ScriptManger on the main page that contains the asp:Panel these custom UserControls are added to (renders as a list like object with items). I want to suppress the click from the ImageButton (contained in the UpdatePanel) to NOT fire PostBacks that is causing the page to be refreshed. Here is a snippet of the UpdatePanel wrapped ImageControl within the custom UserControl:
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CatImage" EventName="Click" />
</Triggers>
<ContentTemplate>
<fieldset>
<asp:ImageButton ID="CatImage" runat="server" Height="128px" Width="128px" ImageUrl="../Handlers/ImageResizer.ashx?imgpath=../PhotographicImages/noImageFound.png&w=180&h=180" OnClick="CatImage_Click"/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
On the top of the main page that dynamically loads these UserControls to its asp:Panel is:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
This works ONLY for every click AFTER the first click... Meaning the first click causes a PostBack on the main page, but any subsequent click is suppressed.
When this ImageButton is clicked, i fire an event in the CodeBehind to display a "LightBox" object with a larger version of the image.
What is wrong with this code? How can i suppress this first click from causing a PostBack to my parent page?

Not using asp listbox well

All I wish to do is simply click a button and the text in a textbox is automatically added as an item in the listbox. Shouldn't this be straight forward? Whilst debugging, the item is added and I can see the text by watching ListBox1.Items[0], but nothing is displayed in the web page. I had the same problem which i did not solve, in a console application! Can some one please guide me to what I am doing wrong?
protected void Button1_Click(object sender, EventArgs e)
{
ListBox1.Items.Add(new ListItem(TextBox1.Text));
}
Many thanks
Edit:
In a past project, I used the DataSource property, which worked perfectly. I have never yet managed to use the add Items! May be there is some sort of refresh or update?
Page code:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="295px"></asp:ListBox>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>

Looks like your listbox is outside of the update panel. Pop it inside the update panel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="AddItem" />
</ContentTemplate>
</asp:UpdatePanel>

You have to move the ListBox into the UpdatePanel, otherwise it will not be updated.
The reason for that is, that ASP.NET is sending the whole HTML of the UpdatePanel back to the client. Since the ListBox is not part of the UpdatePanel, it won't be updated.

Trying to set view inside UpdatePanel in PageLoad

I'm having trouble with a combination of an UpdatePanel and MultiView.
I have an UpdatePanel at my top level, inside I have a bunch of imagebuttons - their click events set the view on the Multiview, and each View has an UpdatePanel inside of it with my binding.
Everything works great - but I am trying to set the View via the Querystring, so I can send a user to a particular view.
When I try and set the View from PageLoad - it says 'object does not exist'. So I figured I'd try it in Page_LoadComplete, which works great - but then my imagebuttons don't work to switch the view like they originally did.
What am I missing! Thanks!
void Page_LoadComplete()
{
tabSelect= Request.QueryString["tab"];
if (tabSelect.Contains("Community"))
{
MultiView1.SetActiveView(Community);
btnCommunity.ImageUrl = "images/tabCommunity_on.png";
}
}
<asp:ScriptManager id="ScriptManager1" runat="server"/>
<asp:UpdatePanel id="UpdatePanel1" childrenastriggers="true" updatemode="Always" runat="server">
<ContentTemplate>
<asp:ImageButton id="btnCommunity" onclick="" runat="server">
<asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server">
<asp:View ID="Community" runat="server">
<asp:UpdatePanel id="UpdatePanel1" childrenastriggers="true" updatemode="Always" runat="server">
//data controls in here
</asp:UpdatePanel>
</asp:View>
<asp:View id="tabFriends" runat="server">
<asp:UpdatePanel id="UpdatePanel2" childrenastriggers="true" updatemode="Always" runat="server">
//data controls in here
</asp:UpdatePanel>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>

UPDATE: After reviewing your code in further detail, I believe figured out the problem.
I made the following adjustments to the code:
If the querystring is not passed, set tabSelect to empty string and thus avoiding a null object reference exception on the next line.
Set the ImageUrl path to include ~ (for root).
Please try the code below:
void Page_LoadComplete()
{
string tabSelect = Request.QueryString["tab"] ?? string.Empty;
if (tabSelect.Contains("Community"))
{
MultiView1.SetActiveView(Community);
btnCommunity.ImageUrl = "~/images/tabCommunity_on.png";
}
}