I have an AJAX Modal Popup panel that contains a RadioButtonList, 2 labels and 2 DropDowns. I want to update the Labels and DropDowns when a radio button is selected. My attempt at this posts back which causes the ajax popup to disappear.
aspx called on image click:
<asp:Panel ID="pnlModalContainer" runat="server">
<asp:RadioButtonList ID="rblTest" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rblTest_SelectedIndexChanged">
<asp:ListItem Text="Test 1" Value="1" Selected="True" />
<asp:ListItem Text="Test 2" Value="2" />
</asp:RadioButtonList>
<br />
<asp:Label ID="lblFoo" Text="Foo" />
<asp:Label ID="lblBar" Text="Bar" />
<asp:DropDownList ID="ddlDogs" runat="server" DataSourceID="odsDogs" DataTextField="Dog" DataValueField="DogID" />
<asp:DropDownList ID="ddlCats" runat="server" DataSourceID="odsCats" DataTextField="Cat" DataValueField="CatID" />
</asp:Panel>
Code Behind (vb.net):
Protected Sub rblTest_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles rblTest.SelectedIndexChanged
' ???
' Make it change lblFoo.Text and lblBar.Text as well as the DataSource for the DDLs
End Sub
You need to add an UpdatePanel within pnlModalContainer.
Related
I have several text boxes on my website, each with a required field validator, and a submit button on the bottom. The submit button works whether or not I have entered values into the text boxes. Below is the code:
<asp:TextBox ID="TextBoxName" ValidationGroup="textgroup" runat="server"
ToolTip="Insert the Pokemon's name" CssClass="upper-case" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ValidationGroup="textgroup" Text="Names only please" ControlToValidate="TextBoxName"
ValidationExpression="^[a-zA-Z]*$" CssClass="required-field" />
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="textgroup"
runat="server" Text="Required Field" ControlToValidate="TextBoxName"
CssClass="required-field" />
<br />
Here is the submit button:
<asp:Button ID="Button1" runat="server" Text="Insert Card" ValidationGroup="textgroup" />
And the code-behind for the submit button:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Page.Validate()
CardCollectionDataSource.Insert()
I have an asp.net website in which I'm using an AJAX TabContainer. Within this container I have one TabPanel. Inside this panel I want to have a close button which would, upon clicking, close (visible=false) this panel.
Sample:
<cc1:TabContainer ID="tbcMain" runat="server" Width="100%" ActiveTabIndex="0" CssClass="Tab">
<cc1:TabPanel ID="tbp1" runat="server" Visible="false">
<HeaderTemplate>
<asp:Label ID="lbl_tbp1_Title" runat="server"></asp:Label>
<asp:ImageButton ID="imb_tbp1_Close" runat="server" ImageUrl="~/Images/cross.png" />
</HeaderTemplate>
<ContentTemplate>
some content
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
The button imb_tbp1_Close does not cause a postback. I belive it's something with the whole region of HeaderTamplate being clickable and thus my button stays behind (like a z-index of sorts).
How can I make my button receive the click and cause a postback?
Edit, the solution I'm using now:
Firstly I could use an actual button event in the code-behind but ImageButton control does not have the property UseSubmitBehavior to set it false. So I handle the event in my Page_Load.
<cc1:TabPanel ID="tbpCust_1" runat="server" Visible="false">
<HeaderTemplate>
<asp:Label ID="lbl_UC_CUSTO_1_Title" runat="server"></asp:Label>
<asp:ImageButton ID="imb_CUSTO_Close_1" runat="server" ImageUrl="~/Images/cross.png" OnClientClick="javascript:__doPostBack('imb_CUSTO_Close_1', '0')" />
</HeaderTemplate>
<ContentTemplate>
<ucCUSTO:UC_CUSTO ID="UC_CUSTO_1" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
and in the code-behind:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim evtTarg As String = Request.Form("__EVENTTARGET")
Dim evtArg As String = Request.Form("__EVENTARGUMENT")
If evtTarg = "imb_CUSTO_Close_1" Then
UC_CUSTO_1.clear_fields()
tbcStranke.Tabs(0).Visible = False
ElseIf evtTarg = "imb_CUSTO_Close_2" Then
UC_CUSTO_2.clear_fields()
tbcStranke.Tabs(1).Visible = False
End If
End Sub
The following code is the markup for my page
<div id="addnewcontact">
<fieldset style="width:70%;">
<legend>Add New Contact Form</legend>
<asp:panel runat="server" ID="custform" cssclass="contactform visible">
"code removed for brevity"
<asp:UpdatePanel ID="updtpanlCity" runat="server">
<ContentTemplate>
<!-- State dropdown selector area -->
<asp:DropDownList ID="ddlStates" runat="server" AppendDataBoundItems="True"
AutoPostBack="True" CssClass="dropdowns" TabIndex="7" ToolTip="Select a state"
OnSelectedIndexChanged="ddlStates_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvState" runat="server" ErrorMessage="[Required]"
ToolTip="Please select a state" ForeColor="#FF3300" ControlToValidate="ddlStates"
Display="Dynamic">
</asp:RequiredFieldValidator>
<!-- End of State dropdown selector area -->
<br /><p class="spacer"></p>
<asp:DropDownList ID="ddlCity" runat="server" CssClass="dropdowns"
BorderColor="Black" BorderStyle="Solid" BorderWidth="2px"
TabIndex="8" ToolTip="Select a city here"
OnSelectedIndexChanged="ddlCity_SelectedIndexChanged"
AppendDataBoundItems="True" AutoPostBack="True">
<asp:ListItem Value="" Text="Select a city"/>
</asp:DropDownList>
<br /><p class="spacer"></p>
<asp:DropDownList ID="ddlPostalCode" runat="server" TabIndex="9"
CssClass="dropdowns" ToolTip="Select your postal code here."
AppendDataBoundItems="True" AutoPostBack="True">
<asp:ListItem Value="" Text="Postal Code"/>
</asp:DropDownList>
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlStates" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlCity" EventName="SelectedIndexChanged"/>
<asp:AsyncPostBackTrigger ControlID="ddlPostalCode" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<br />
<br /><p class="spacer"></p>
<asp:Button ID="submit" runat="server" Text="Submit" CssClass="buttons" />
</asp:panel> <%--end of custform panel--%>
</fieldset>
</div>
On selecting a state from the state dropdown selector, the code should retrieve a list of cities to populate the city dropdown. This was working before but I rebuilt the page as i changed the database structure. The problem is that the msgbox line i put in the event handler is showing that the selection with index 0 is what is always returned from that event, why is that?
Protected Sub ddlStates_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlStates.SelectedIndexChanged
If IsPostBack Then
MsgBox("item: " & ddlStates.SelectedItem.ToString() & " " & "index: " & ddlStates.SelectedIndex.ToString())
Dim ctx As New enerteckwebEntities()
'retrieve the list of cities based on state selected
Dim citylist As List(Of String) = (From c In ctx.ziptaxes Where c.StateID = Convert.ToInt32(ddlStates.SelectedValue) Order By c.City Ascending Select c.City).ToList()
With ddlCity
.Items.Clear()
.DataSource = citylist.Distinct()
.DataBind()
.Items.Insert(0, "Select a city")
.SelectedIndex = 0
End With
End If
End Sub
I have autopostback, appenddatabounditems and enableviewstate set to true in the markup
Here is one thing you can try.
Make sure that databind the States dropdown in the if(!IsPostBack) condition in the page_load method. This ensures that the dropdown is not databound again when the Selected Index change event is fired.
I've created two radio buttons with the following code:
<telerik:RadButton ID="rbOption1" runat="server" Text="option 1" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<br />
<telerik:RadButton ID="rbOption2" runat="server" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton">
<ContentTemplate>
<asp:Label ID="lblChoose" runat="server" Text="choose" />
<asp:DropDownList ID="ddlChoose" runat="server" />
</ContentTemplate>
</telerik:RadButton>
I want the second radbutton to be rendered with a radio button just the the first radbutton. But instead the entire contents of the content template is being rendered as an html anchor and no radio button is being shown for the second radbutton. Is there a way to use the telerik radbutton to look like this mockup?
When the content of a RadButton is specified through the ContentTemplate inner property, the button control is automatically configured in a LinkButton mode.
The desired functionality can be achieved via two RadButtons, configured as radio buttons (ToggleType="Radio" ButtonType="ToggleButton"), and a DropDownList control that can be enabled only when one of the radio buttons is checked:
Page
<telerik:RadButton ID="rbOption1" runat="server" Text="option 1" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<br />
<telerik:RadButton ID="rbOption2" runat="server" Text="choose" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<asp:DropDownList ID="ddlChoose" runat="server" Enabled="false">
<asp:ListItem Text="Text" Value="Value"></asp:ListItem>
<asp:ListItem Text="Text" Value="Value"></asp:ListItem>
</asp:DropDownList>
<br />
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
ddlChoose.Enabled = rbOption2.Checked;
}
I have a gridview with Template field. I add a checkbox in templatefield . Autopostback is true for checkbox .
I fill grid in Load-page and creted column dynamic .
if (!IsPostBack)
{
FillGrid();
}
I use update panel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<SharePoint:SPGridView ID="grid" AllowSorting="true" AllowFiltering="true" CssClass="ms-listviewtable"
runat="server" AutoGenerateColumns="false">
<RowStyle CssClass="ms-alternating" Height="10px" />
<Columns>
<asp:TemplateField>
<ItemTemplate >
<asp:CheckBox ID="select" runat="server"
OnCheckedChanged="select_CheckedChanged" AutoPostBack="true" />
<input id="Display" type="hidden" runat="server" />
<input id="itemID" type="hidden" runat="server" />
<asp:Image ID="icon" runat="server" Height="10px" Visible="false" />
</ItemTemplate>
<ItemStyle Width="35px" />
</asp:TemplateField>
<asp:TemplateField >
</asp:TemplateField>
</Columns>
</SharePoint:SPGridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="select" EventName="OnCheckedChanged" />
</Triggers>
</asp:UpdatePanel>
but show error :A control with ID 'select' could not be found for the trigger in UpdatePanel 'UpdatePanel1'.
My problem is : When checkbox is change, page refresh
I don't want to refresh page after checkedchange!
you have to set autopostback="false" or remove autopostback property in checkbox. autopostback actully refresh the page.
So what happens if you set the autopostback property of the checkbox to false?
Also if you are actually looking to handle the onchange event of the checkbox you could wrap the grid with an UpdatePanel; the user wouldn't see a postback but you still get the flexibility of serverside event handling.
First of all you need changes templetecolumn as below
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkselect" runat="server" />
<input id="Display" type="hidden" runat="server" />
<input id="itemID" type="hidden" runat="server" />
<asp:Image ID="imgicon" runat="server" Height="10px" Style="display: none;" ImageUrl="~/images/arrow_left.jpg" />
</ItemTemplate>
<ItemStyle Width="35px" />
</asp:TemplateField>
Now handle itemdatabound event in server side code
Protected Sub SPGridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvBanner.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim chkselect As CheckBox = e.Row.FindControl("chkselect")
Dim imgicon As Image = e.Row.FindControl("imgicon")
If chkselect IsNot Nothing Then
chkselect.Attributes.Add("onclick", "javascript:DoMyTask(this,'" + imgicon.ClientID + "')")
End If
End If
End Sub
Now specify JavaScript function in aspx page as below.
<script type="text/javascript" language="javascript">
function DoMyTask(obj, imgid) {
var objCheck = obj.checked;
var objimg = document.getElementById(imgid)
if (objCheck == true) {
objimg.style.display = "block";
//set more attributes over here
}
else {
objimg.style.display = "none";
//set more attributes over here
}
var count = $(":checkbox:checked").length;
alert('you have selected ' + count + ' Rows');
}
</script>
Hope this will help you...happy coding ..