I have been adding UpdatePanels to my application around the objects that I just want to update.
Example, When I click a button I want a ListBox to update. I would wrap the UpdatePanel around the list box in the html, but when I do this my design goes all over the place.
I am not sure If I'm using AJAX the correct way, as I have seen people adding Triggers but don't know how and where to use them, here is an example of my code:
<asp:ListBox ID="lst_AdminExistingDepartments" runat="server" >
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
<asp:ListItem Text="Acceptance"></asp:ListItem>
</asp:ListBox>
</div>
<div class="AddEditUpdateDepartment">
<asp:Label ID="lbl_AdminAddEditUpdateDepartments" runat="server" Text="Modify Departments" />
<asp:Label ID="lbl_AdminAddDepartment" runat="server" Text="Add Department" />
<input id="txt_AddDepartment" runat="server" type="text" class="aclass" />
<input id="btn_AddDepartment" runat="server" type="button" class="ButtonAdminPage" value="Add" onserverclick="btn_AddDepartment_ServerClick" />
Here is a ListBox and also a Textbox and a Button. When they click that Button I would want the ListBox to update with the record entered in the TextBox using AJAX?
At the most basic level you need to place the UpdatePanel around all controls being affected by the action. So you need the List, TextBox and Button all inside the UpdatePanel.
Following on from that you have more advanced scenarios where you can have Triggers and multiple UpdatePanels etc. However, it would be best to start with something simple (i.e. everything you need in one UpdatePanel and advance from there.
Related
I'm have ASP MultiView for an application form. Inside one of the view I have few radio button as follows--
<div class="row">
<asp:CustomValidator ID="Group1Validator" GroupName="Group1" runat="server"
ValidationGroup="Group1" Display="Dynamic"></asp:CustomValidator>
<asp:RadioButton ID="Group1Yes" runat="server" GroupName="Group1" Text="Yes"/>
<asp:RadioButton ID="Group1No" runat="server" GroupName="Group1" Text="No" />
</div>
Now on the code behind I want to iterate through all the RadioButtons in that page and pull the values to be saved in the DB. I have tried the solution HERE both Loop and LINQ version, but the problem is my RadioButton controls are not directly in the page. Let me elaborate-
First, I have multi view in a page-
Multi view contains views-
And finally inside views I have the RadioButton controls-
Now my goal is the fetch the values of all the RadioButton that are selected which is laid out using the div above.
Any help and guidance will be much appreciated! Thanks!
You must put your RadioButtons as childs of RadioButtonList, then iterate in foreach loop over RadioButtonList items.
Why not use a RadioButtonList
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:RadioButtonList>
And then you can get the value in code behind
string value = RadioButtonList1.SelectedValue;
You can also add items to the RadioButtonList in code behind
RadioButtonList1.Items.Insert(0, new ListItem("Yes", "1", true));
RadioButtonList1.Items.Insert(1, new ListItem("No", "0", true));
i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.
Problem:
I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.
Code:
<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Panel ID="pnlBoxesDropDowns" runat="server">
<label style="width:400px">Relevant Region</label>
<asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True" AutoPostBack="true" >
<asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server"
ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
<label style="width:400px">Relevant District</label>
<asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server"
ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
<label>Relevant P.Station</label>
<asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server"
ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
<label>Priority</label>
<asp:DropDownList ID="ddlPriority" runat="server">
<asp:ListItem Text="Top" Value="1"></asp:ListItem>
<asp:ListItem Text="Normal" Value="2"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<br />
<br />
<asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
help please.
The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:
In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of
<select id="ctl000$ddlDistricts"...
You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).
<script type="text/javascript">
location.href='#' + <%=PostedControl.ClientID %>
</script>
Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.
Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:
OnSelectedIndexChanged=MyFunction
What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:
http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)
http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)
Lastly, the fully modern way to do things that involves completely rewriting your page
http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")
When I click radio buttons in the radio button list control, javascript function gets called, but the server side onchange event doesn't get triggered. I tried the same with "onchange" event of the control but didn't work.
first type -
<asp:RadioButtonList ID="rdoRightPeriod" runat="server" CssClass="text"
OnSelectedIndexChanged="rdoRightPeriod_SelectedIndexChanged" AutoPostBack="true"
RepeatDirection="Horizontal" onclick="return showConfirmMessageBoxNew()">
<asp:ListItem Text="Year Based" Value="Y"></asp:ListItem>
<asp:ListItem Text="Perpetuity" Value="P"></asp:ListItem>
<asp:ListItem Text="Run Based" Value="R"></asp:ListItem>
</asp:RadioButtonList>
second type
<asp:RadioButtonList ID="rdoRightPeriod" runat="server" CssClass="text"
OnSelectedIndexChanged="rdoRightPeriod_SelectedIndexChanged" AutoPostBack="true"
RepeatDirection="Horizontal">
<asp:ListItem Text="Year Based" Value="Y" onclick="return showConfirmMessageBoxNew()"></asp:ListItem>
<asp:ListItem Text="Perpetuity" Value="P" onclick="return showConfirmMessageBoxNew()"></asp:ListItem>
<asp:ListItem Text="Run Based" Value="R"onclick="return showConfirmMessageBoxNew()"></asp:ListItem>
</asp:RadioButtonList>
I tried both the above techniques, but the server-side code doesn't get called.
Instead of using OnClick, use OnClientClick.
Using OnClientClick you ran run addition client side scripts alongside the server side event. By using the OnClick event, you have replaced the call for the server's event with your JavaScript.
I have a simple radio button list inside a form view:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" SelectedValue='<%# Bind("Answer") %>' Visible="false">
<asp:ListItem Text="Yes" Value="true" ></asp:ListItem>
<asp:ListItem Text="No" Value="false"></asp:ListItem>
</asp:RadioButtonList>
The "Answer" property does not exists, and even though RadioButtonList1 is invisible, it's still being bound to. Why is this? I've tried changing the visibility in various page life-cycle events with no luck.
Any ideas?
Visibility has nothing to do with binding. You would have to remove either the binded property or the button itself for the binding to disappear.
I have a page that contains a Repeater, which contains server control elements, within an UpdatePanel and while all other controls behave normally, the Drop Down control causes a full postback every time.
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<asp:SomeWorkingControl ID="swc" runat="server" />
<asp:DropDownList ID="ddl" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="0" Value="0" />
<asp:ListItem Text="1" Value="1" />
</asp:DropDownList>
</ItemTemplate>
</asp:Repeater>
This is vaugely what my code looks like, the DropDownList control is actually in a UserControl, but the theory is the same.
If I apply an event to SomeWorkingControl then there is an Ajax postback and all is fine.
However, the event associated with the DropDownList causes a full postback! I know usually you would set an Async trigger for the DropDown, but since it is created in a repeater (and therefore I can not know how many there will be) so I don't really see how that could work.
Is there anybody who has experienced this before and knows a workaround perhaps?
Try to change this line:
<asp:DropDownList ID="ddl" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="true">
for:
<asp:DropDownList ID="ddl" runat="server" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="true" ClientIDMode="AutoID">
Recently I had the same problem and I found out that the ClientIDMode can solve it.
Please have a look here: asp.net ClientIDMode Changes