Develop Reference

Calling a server side method from a dynamically generated button inside an update panel

Lets preface this with the fact that I am learning ASP.NET C# and this is my first "real" project so there is a good chance I am missing something obvious, I apologize in advance.
I am working on a web page that displays three columns. The first is "Categories", a user should be able to select a category then have a list of items to choose from appear in the second column "Items". When they click an item the third column should show details about said item. For the most part this is a classic Master/Detail scenario except we take it a step further and do Master/Detail/Detail.
To achieve this I am generating dynamic buttons on Page_Load() in the "Categories" column. In addition I have added a debug line when the page loads, this is important later.
protected void Page_Load(object sender, EventArgs e)
{
//DB query to get categories omitted
for (int i = 0; i < categories.Rows.Count; i++)
{
Button btn = new Button();
btn.Click += new System.EventHandler(CategorySelected_Click);
btn.Attributes["runat"] = "server";
btn.ID = "CatSelBtn" + i;
btn.Attributes["data-categoryid"] = qry.GetCategories().Rows[i]["id"].ToString();
//And some other non-relevant attributes
CategoriesPane.Controls.Add(btn);
}
System.Diagnostics.Debug.WriteLine("Page Loaded");
}
As you may have noticed these buttons have a Click event handler that calls the method CategorySelected_Click(). These buttons all generate successfully and clicking on them results in that method being successfully called. This method is set up in a similar fashion, it grabs a list of items then generates buttons for the items, of course this needs to be done asynchronously so it doesn't reset the user's category selection, so this time it is all contained with an update panel.
C#
protected void CategorySelected_Click(object sender, EventArgs e)
{
//DB query to get items omitted
Button btn = (sender as Button);
string categoryid = btn.Attributes["data-categoryid"].ToString();
for (int i = 0; i < items.Rows.Count; i++)
{
if (items.Rows[i]["Category"].ToString() == categoryid)
{
Button ibtn = new Button();
ibtn.Click += new System.EventHandler(this.ItemSelected_Click);
ibtn.Attributes["runat"] = "server";
ibtn.ID = "ItmSelBtn" + i;
ibtn.Attributes["data-itemid"] = qry.GetItems().Rows[i]["id"].ToString();
//And again some none relevant attributes here
ItemsParent.Controls.Add(ibtn);
}
}
ItemsPanel.Update();
}
ASP
<div class="col-md-2 items-pane">
<asp:UpdatePanel ID="ItemsPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<div id="ItemsParent" runat="server">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="col-md-8 view-pane">
<asp:UpdatePanel ID="ItemDetailsPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<div id="ItemDetailsParent" runat="server">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Again this generates a list of buttons for each item matching the correct category. No issue there, but this time I need the clicked button to call the third and final method which will display the details for the item. This is where things stop working. I assumed that because I was able to generate buttons successfully on Page_Load() that it would work the same inside an update panel. Right now the third method just contains a debug line to check if its firing at all.
protected void ItemSelected_Click(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("Item has been selected");
ItemDetailsPanel.Update();
}
In my output console in visual studio when I click on an Item Button control it writes Page Loaded indicating a successful postback but I am not seeing Item has been selected indicating that the third method is firing. I also inserted a breakpoint there but it is not being reached.
I initially thought I needed to add an asyncpostback trigger for each button generated to my update panel but that did not seem to resolve that issue, and because I can now see that Page_Load() is getting triggered I am pretty sure that isn't the issue. This leads me to believe that the click event is somehow not being registered. So my question to you is this: How do I make a dynamically generated button inside an update panel call a server side method? Any help is greatly appreciated.

You need to attach the event handlers on every postback.
It works for your categories-buttons, because the attaching is executed on every page load.
Do this for all the other items also, e.g. put in your Page_Load something like this:
foreach (var ctrl in ItemsParent.Controls)
{
Button ibtn = ctrl as Button;
if (ibtn != null)
{
ibtn.Click += new System.EventHandler(this.ItemSelected_Click);
}
}

How manage two jQuery and c# event of one div?

I have a div like below I want to do some work when I click div:
with jQuery click I want to show another div that contain ListView (that must show messages) and by another click hide that div.
with C# click event I want to get Messages and bind to ListView
jQuery works but C# event does not work.
Another problem is that if I click div for second time the div will hide and I don't want bind messages
How should I do these works?
<div id="div1" class="Message" runat="server" onclick="ShowMessage">
jquery code:(this works)
$('#div1').click(function (e) {
e.stopPropagation();
if ($("#div2").is(":hidden")) {
$("#div2").show(500);
}
else {
$("#div2").hide(500);
}
});
and my code behind:(does not work)
protected void ShowMessage(object sender, MouseEventArgs e)//this will bind messages to ListView inside of div2
{
using (MYEntities en = new MyEntities())
{
///...
}
}

If you are using button then javascript click event of the button will get call and at the end just write return true then it will go to ServerSide click event of the button.
$('#btnClick').click(function(){
// your code
return true;
}
Protected void btnClick_Click()
{
}

LinkButton doesn't Postback on first click in asp.net?

I have a .aspx Webpage with a UserControl added on it.In UserControl when the LinkButton is clicked it do not Postback on first attempt. but when we click again it does the Postback and then only the page redirects don't know why?
Any idea?
In .ASPX Markup:
<asp:LinkButton ID="lnkCheckOut" runat="server"
CssClass="button orange" onclick="lnkCheckOut_Click">Checkout</asp:LinkButton>
In.cs file:
protected void lnkCheckOut_Click(object sender, EventArgs e)
{
if (Session["UserID"] != null)
{
lnkCheckOut.PostBackUrl = "~/checkout.aspx?type=checkout";
//Response.Redirect("~/checkout.aspx?type=checkout");
Session["IsQuoteAdded"] = "false";
}
//if not logged in user
else
{
lnkCheckOut.PostBackUrl = "~/login.aspx?returnUrl="+HttpUtility.UrlEncode(Request.RawUrl);
}
}
When i see markup in browser(using F12 in Chrome) on first click it shows:
<a id="ctl00_ContentPlaceHolder1_shpCart_lnkCheckOut" class="button orange" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$shpCart$lnkCheckOut','')">Checkout</a>
On Second Click:
<a id="ctl00_ContentPlaceHolder1_shpCart_lnkCheckOut" class="button orange" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$shpCart$lnkCheckOut", "", false, "", "login.aspx?returnUrl=%2fNew%2fMyBox.aspx", false, true))'>Checkout</a>
Note:I am not using any UpdatePanel in the Webpage or UserControl.
Help Appreciated!

Your code is not redirecting the page it has just assigning the URL. Use below codes to rectify that.
protected void lnkCheckOut_Click(object sender, EventArgs e)
{
if (Session["UserID"] != null)
{
//lnkCheckOut.PostBackUrl = "~/checkout.aspx?type=checkout";
Session["IsQuoteAdded"] = "false";
Response.Redirect(#"~/checkout.aspx?type=checkout");
}
//if not logged in user
else
{
Response.Redirect(#"~/login.aspx?returnUrl="+HttpUtility.UrlEncode(Request.RawUrl));
}
}

In your markup, there is no PostBackUrl. So on the first click, it will actually post back to the same page, and your event handler will run.
Then, in your event handler, you are setting the PostBackUrl.
So the second time somebody clicks the link, it will post to that URL. Your code is working as designed :)
Edit: I would suggest changing to Response.Redirect, but it's hard to know exactly what your code is supposed to do.

Same issue i was facing.
I have link button in grid view. when i clicked the link button its not postback on first click ,but when i clicked again it does.
Then i check my code properly and then i find that grid view is placed in update panel hence its not postback on first click.
So i would suggest please check the same.

Hide button on drop down selection -1

I need my create button to be hidden unless a facility is selected in my dropdown. When it is at -1 message i need my button to be hidden.
Code for button
<asp:Button ID="btnCreate" runat="server" Text="Create New" Width="89px" Font-Size="X-Small" OnClick="btnCreate_Click" />
Drop down code
private void ResetForm()
{
try
{
//facility dropdown
ddlFacility2.Items.Clear();
ddlFacility2.DataSource = this.DataLayer.model.MS_spGetFacilityInfo(null).OrderBy(x => x.FacilityName);
ddlFacility2.DataTextField = "FacilityName";
ddlFacility2.DataValueField = "FacilityID";
ddlFacility2.DataBind();
ddlFacility2.Items.Insert(0, new ListItem("All Facility Records..", "-1"));
BindGrid();
}
catch (Exception ex)
{
this.SetMessage(ex.ToString(), PageMessageType.Error);
AISLogger.WriteException(ex);
}
}

in first time page load if the default value selected is -1 you can set your button visible false as default.
in your droupdown list selected index change event you can enable/dissable button based on droupdown list selected value.

Add a OnSelectedIndexChange event to your dropdown list or add a clientside event to your dropdownlist. Double Click on your ddl you will see a function named ddlFacility2_OnSelectedIndexChanged in you code behind and add the below code to it.
Add AutoPostBack=true to you ddl
protected void ddlFacility2_OnSelectedIndexChanged(object sender, EventArgs e)
{
if(ddlFacility2.SelectedIndex>-1)
{
btnCreate.Enabled = true;
}
else
{
btnCreate.Enabled = false;
}
}

You can wire up a JQuery script that can bind to your DropDownList's selected value...
In this example, the button's visibility is bound on a click from another button:
$('#Button1').bind("click", function() {
$("#Button2").hide();
});
I dont know the exact syntax to use for the binding to selected value, but the above code should be a good place to start.

How could I set the Username textbox of the Login control to have the initial focus?

I'm using the asp.net Login control:
<asp:Login ID="Login2" runat="server" LoginButtonType="Link"
Width="280px" Height="150">
</asp:Login>
How could I set the Username textbox to have the focus when initially the page loads and also the Login link button should be clicked when the user enters.
I tried the below in the Page_Load event but didn't work?
this.Login2.FindControl("Username").Focus();
this.form1.DefaultButton = this.Login2.FindControl("LoginButton").UniqueID;
Thanks,

Try something like this:
TextBox tb = (TextBox)Login1.FindControl("UserName");
tb.Focus();

if (!HttpContext.Current.User.Identity.IsAuthenticated) {
Login lg = (WebControls.Login)LoginView1.FindControl("Login2");
TextBox tb = (TextBox)lg.FindControl("UserName");
tb.Focus();
}
Have a look here to see how you can define the login-button as default button in Login:
Submit Login control button when I hit Enter

protected void Page_Load(object sender, System.EventArgs e)
{
System.Web.UI.WebControls.Login login = LoginArea.FindControl("LoginForm");
TextBox txt = login.FindControl("UserName");
Page.SetFocus(txt);
}

You can simply write
Login1.Focus() at page load event and also basically, you can define a DefaultButton not just on the Form level, but also on individual Panel level, as long as the focus is within the panel, the default button for the panel will be used if you hit "Enter