How to bind radiobuttonlist with jquery - c#

I have added radiobuttonlist into asp updatepanel, radiobuttonlist is bound form table in codebehind with C#.But updatepanel gives error at postback.can anybody help me to bind radiobuttonlist with Jquery on page load.
<asp:UpdatePanel ID="UpdPanel_Questions" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Label ID="Lbl_QuestionTitle" runat="server" Font-Bold="False"
Font-Size="Medium" Height="45px" ></asp:Label>
</div>
<div> <p></p>
<asp:RadioButtonList ID="RadBut_Answer" runat="server" onselectedindexchanged="RadBut_Answer_SelectedIndexChanged"
CellSpacing="5" AutoPostBack="True" CellPadding="0">
</asp:RadioButtonList>
</div>
<div class="SelectedAnsMsg alpha">
<asp:Literal runat="server" EnableViewState="False" ID="Lbl_SelectedAnsMsg"></asp:Literal>
</div>
<div class="Butskipnext">
<div class="Butskip">
<asp:Button ID="But_Skip" runat="server" Text="Skip" SkinID="AltButton" />
</div>
<div class="Butnext">
<asp:Button ID="But_Next" runat="server" Text="Next" SkinID="Button"
onclick="But_Next_Click" />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadBut_Answer" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

Why do you want to use jQuery to bind RadioButtonList at Page_Load? If you want to bind RadioButtonList on Page_Load using jQuery, then it is something to do in Javascript (i.e. either in .aspx page or separate Javascript file), but not code behind.
I have not used jQuery, but the following code in code-behind works well to bind table data to RadioButtonList.
For the example purpose, I have Taken DEPT(DEPTNO, DNAME) table.
Now, I hope you can understand the code since it is very easy.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
SqlCommand objCmd = new SqlCommand("SELECT DEPTNO, DNAME FROM DEPT", objConn);
objConn.Open();
RadBut_Answer.DataSource = objCmd.ExecuteReader();
RadBut_Answer.DataTextField = "DNAME";
RadBut_Answer.DataValueField = "DEPTNO";
RadBut_Answer.DataBind();
objConn.Close();
}
}

Related

ASP Multiple UpdatePanels with gridviews but only one updating

I wish to have 3 gridviews on a single aspx page fed by individual DB queries (displaying static data, no manipulation) and based on a 10 second timer, refresh the tables. I have the code to return the datatables sorted. I can make it update one gridview which is in one of my update panels, but the other two dont render.
Code is:
<%# Page Title="Index" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Test.Admin" %>
<script runat="server" type="text/c#">
protected void Page_PreRender(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
}
protected void Timer2_Tick(object sender, EventArgs e)
{
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer3_Tick(object sender, EventArgs e)
{
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
}
</script>
<div class="row">
<div class="col-md-7">
<asp:UpdatePanel ID="UpdateFullAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick">
</asp:Timer>-->
<asp:Label ID="Label7" runat="server" Font-Bold="True" Text="Full Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="FullAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLimitedAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer3" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Limited Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="LimitedAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLog" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer2" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label5" runat="server" Font-Bold="True" Text="General Log"></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text="Panel not refreshed yet."></asp:Label>
<asp:GridView ID="LogData" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I cant work out why one of my update panels are working. As you can see i've tried using the PreRender function as well as (currently commented out) timers. The labels are updating with the current time but only one gridview displays.
Any help would be appreciated
Thanks
The issue here is that the script of timer is lost after the post back inside the UpdatePanel - the solution is to take it out of the update panel and use Triggers
Here is an example that I test it and works.
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="2800"></asp:Timer>
<asp:Timer ID="Timer2" runat="server" ontick="Timer2_Tick" Interval="2500"></asp:Timer>
<div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer2" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest2"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and on code behind the ontick is the trigger, eg:
protected void Timer1_Tick(object sender, EventArgs e)
{
txtTest1.Text += "1.";
}

Binding a gridview INSIDE ModalPopupExtender

I have searched about this topic all over the internet and have come up with nothing. Either I am having a hardtime wording my problem or I am do something so wrong that no one else has ever even tried it...
I have a gridview. I am using a button in the gridview to execute a command to open a ModalPopupExtender. That part works great. Once I have the popup open, I want to be able to press a button to execute a function which will perform a Sql query and bind a gridview that is INSIDE the popup panel. After that the user can perform an action with the gridview which would close the modal popup.
Here is my HTML -
<cc1:ModalPopupExtender runat="server" ID="MPE_Issue" PopupControlID="pnlIssue" BackgroundCssClass="ModalPopupBG"
TargetControlID="Hid_Sno" CancelControlID="btnIssueCancel">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlIssue" runat="server" Style="display: none" >
<div class="HelloPopup">
<div>
<br />
<h2> Issue Equipment</h2>
<br />
<asp:Panel runat="server" ID="pnlIssueSearch" DefaultButton="btnIssueSearch">
<div class="block" style="text-align: right; margin-left: 50px">
<asp:Label CssClass="lblBlock" runat="server" ID="lblIssueSearch" Text="Search:"></asp:Label>
</div>
<div class="block">
<asp:TextBox runat="server" ID="txtIssueSearch" Width="160px"></asp:TextBox>
<asp:ImageButton runat="server" ID="btnIssueSearch" ImageUrl="../Images/search.png" OnClick="btnIssueSearch_Click" />
</div>
</asp:Panel>
<asp:Panel runat="server" ID="pnlIssueSubmit" DefaultButton="btnIssueSubmit">
<div style="width: 275px; margin: auto; height: 295px; overflow: scroll;">
<asp:GridView runat="server" ID="gvIssue" AutoGenerateColumns="false" CssClass="mGrid" OnRowCommand="gvIssue_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtIssueQty" runat="server" Text='<%# Bind("QTY") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Assignment" DataField="FIRST_NAME" />
</Columns>
</asp:GridView>
</div>
<div class="center">
<asp:Button runat="server" ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" />
<input type="button" id="btnIssueCancel" value="Cancel" />
</div>
</asp:Panel>
And the codebehind -
protected void gv1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "issue")
{
GridViewRow gvr3 = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
string itemNo = ((Label)gvr3.Cells[0].FindControl("lblItemNo")).Text;
btnIssueSubmit.Visible = false;
txtIssueSearch.Text = "";
MPE_Issue.Show();
}
protected void btnIssueSearch_Click(object sender, ImageClickEventArgs e)
{
string query = "SELECT QTY, NEW_EMP_ID as NAME FROM TRANSACTION_TRACKING WHERE NEW_EMP_ID = #inputINT";
string inputString = "%" + txtIssueSearch.Text + "%";
int inputINT = Convert.ToInt32(txtIssueSearch.Text);
SqlConnection con = new SqlConnection(CS);
SqlDataAdapter da = new SqlDataAdapter(query, con);
SqlParameter parameter = new SqlParameter("inputString", inputString);
SqlParameter parameter2 = new SqlParameter("inputINT", inputINT);
da.SelectCommand.Parameters.Add(parameter);
da.SelectCommand.Parameters.Add(parameter2);
DataSet ds = new DataSet();
da.Fill(ds);
gvIssue.DataSource = ds;
gvIssue.DataBind();
btnIssueSubmit.Visible = true;
MPE_Issue.Show();
}
EDIT/SOLUTION
I was going about solving this problem wrong. I wanted to override the nature of asp.net instead of going with the flow and solving the problem systematically. To overcome this issue I changed my data bind into its own method and had the button within the panel activate the that method, set the popup control to Open(), and also set a boolean from false to true. Then on the page_load I have an event that checks the boolean and automatically does the data Method if it is true (and therefore a search parameter is in the textbox).
Thanks all for the suggestions and help.
If you make your pnlIssueSubmit an UpdatePanel then do an asyncpostback trigger on btnIssueSearch wouldn't that fix your issue? Because your imageButton needs to do a post back in order to refresh you grid but then you'll lose your modal. Something like this:
<asp:UpdatePanel id="pnlIssueUpdate" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlIssueSubmit" DefaultButton="btnIssueSubmit">
<div style="width: 275px; margin: auto; height: 295px; overflow: scroll;">
<asp:GridView runat="server" ID="gvIssue" AutoGenerateColumns="false" CssClass="mGrid" OnRowCommand="gvIssue_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtIssueQty" runat="server" Text='<%# Bind("QTY") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Assignment" DataField="FIRST_NAME" />
</Columns>
</asp:GridView>
</div>
<div class="center">
<asp:Button runat="server" ID="btnIssueSubmit" Text="Issue" OnClick="btnIssueSubmit_Click" />
<input type="button" id="btnIssueCancel" value="Cancel" />
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:asyncPostBackTrigger ControlID="btnIssueSearch" />
</Triggers>
I was going about solving this problem wrong. I wanted to override the nature of asp.net instead of going with the flow and solving the problem systematically. To overcome this issue I changed my data bind into its own method and had the button within the panel activate the that method, set the popup control to Open(), and also set a boolean from false to true. Then on the page_load I have an event that checks the boolean and automatically does the data Method if it is true (and therefore a search parameter is in the textbox).

Update Panel Button need to be pressed twice to update

I have a List View inside an update panel, but I can't get it to update properly - each item has a button that removes it from the list - which it does but it takes two button presses to see the item disappear from the page.
Here the markup:
<asp:ScriptManager ID="DashScriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="ToDo" runat="server">
<ItemTemplate>
<li style="" class="<%# Eval("ToDoPriority")%>">
<%# Eval("ToDoText")%>
<div class="agile-detail">
<asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
<i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
</div>
</li>
<asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
And the Code Behind:
protected void ToDoComplete_Click(Object sender, EventArgs e)
{
LinkButton ToDoComplete = sender as LinkButton;
HiddenField todo = ToDoComplete.NamingContainer.FindControl("HiddenToDoID") as HiddenField;
int TodDoId = Convert.ToInt32(todo.Value);
DashboardController.UpdateToDo(TodDoId);
GetToDoItems(1);
ToDoUpdate.Update();
}
Is there any way to do this by pressing the button once?
What you are missing is Triggers section in UpdatePanel. As your update panel as UpdateMode ="Conditional" you need to specify triggers. If you are using normal full postback then change AsyncPostBackTrigger to PostBackTrigger.
<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="ToDo" runat="server">
<li style="" class="<%# Eval("ToDoPriority")%>">
<%# Eval("ToDoText")%>
<div class="agile-detail">
<asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
<i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
</div>
</li>
<asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ToDo" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Access TextBox in DataList by ID from Button-Click handler in codebehind

I have a textbox which is kept inside Datalist. I need to find it via ID, so that i can insert text written to that textbox to the database.Here is my aspx page containing textbox.
<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
<div id="ccont">
<asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down" runat="server">
<ItemTemplate>
<div id="wholeC">
<div id="ctop">
<div id="lft_l">
<div id="lft_c_top">
<asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
<br/>
</div>
<div id="lft_c_down">
<b>Product Name:</b>
<asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
<br/>
<b>brand:</b>
<asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
<br/>
<b>Price:</b>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
</div>
</div>
<div id="lft_r">
<b>Details:</b>
<asp:Label ID="Label2" Text='<%#DataBinder.Eval(Container.DataItem,"description") %>' runat="server" />
</div>
</div>
<div id="cmt">
<asp:TextBox ID="tb_cmt" runat="server" Height="35px" Width="620" placeholder="comment.." />
<asp:Button ID="Button1" runat="server" Text="Comment" backcolor="black" BorderStyle="None" Font-Names="Consolas" Font-Overline="False"
ForeColor="White" Height="34px" Width="108px" OnClick="cmt_Click" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
The Textbox with ID="tb_cmt" is the text box i want to access in my code behind as:
protected void cmt_Click(object sender, EventArgs e)
{
// how to get the TextBox?
sq.connection();
SqlCommand cmd = new SqlCommand("insert into comment(ecomment,sid) values(#myecomment,#mysid)", sq.con);
cmd.Parameters.AddWithValue("#myecomment",tb_cmt.text)//but here tb_cmt is not recognized.
}
You can use the NamingContainer property of the button that was clicked to get the DataListItem. Then you just have to use FindControl to get the reference to your TextBox:
protected void cmt_Click(object sender, EventArgs e)
{
Button btn = (Button) sender;
DataListItem item = (DataListItem) btn.NamingContainer;
TextBox txt = (TextBox) item.FindControl("tb_cmt");
//... save
}

Div show hide not working when using UpdatePanel inside dev

<div id="test1" runat="server">
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
C# Code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid) {
// ...
test1.Visible = false;
test2.Visible = true;
} else {
// do some thing...
}
}
Only elements inside of the update panel will be updated when an update panel is triggered.
Since you only have the button in the update panel, the button is the only thing that will get updated, even though you set it in the code behind. You just have to wrap all the elements you want updated in the panel like so.
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Try following Code:
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="True" CssClass="asgButton" runat="server" Text="Submit" OnClick="btnSubmit_OnClick"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="updDiv2" UpdateMode="Conditional">
<ContentTemplate>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>
And in code-behind:
protected void btnSubmit_OnClick(object sender, EventArgs e)
{
if (Page.IsValid)
{
test1.Visible = false;
test2.Visible = true;
updDiv2.Update();
}
}
If you update controls from an UpdatePanel they have to be either in the same UpdatePanel or in another one.
If the controls are in another one make sure to call Update of the UpdatePanel containing the controls after editing them.
Make sure as well to set UpdateMode="Conditional" on the UpdatePanel otherwise Update would throw an exception.
Cover your complete div inside update panel..You should place the controls which have to be updated inside update panel..
<asp:UpdatePanel runat="server" ID="updTerms">
<ContentTemplate>
<div id="test1" runat="server">
<asp:Button ID="btnSubmit" Enabled="false" CssClass="asgButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div id="test2" visible="false" runat="server">
<p>this is sample text.... bla bla bla</p>
</div>
</ContentTemplate>
</asp:UpdatePanel>
My suggestion is do not use Visible property.Instead do the following things
1)Remove Visibile="False" .Use Style="display:none"
<div id="test2" style="display:none" runat="server">
2)Add the following javascript in the design page.
function divviZ()
{
var test1=document.getElementById("<%=test1.ClientId%>");
var test2=document.getElementById("<%=test2.ClientId%>");
if(test2.style.display=="none")
{test1.style.display="block";}
else
{test1.style.display="none";}
}
3)Change the vb code as follows
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid) {
// ...
test2.style("display")="block"
ScriptManager.RegisterClientScriptBlock(this, this.GetType, "divviz", "javascript:divviZ()", True)
} else {
// do some thing...
}
}

Categories

Resources