Answered by:
Get Data From Table One Time And Filter Base On Selection

Question
-
User-807418713 posted
Hello
I have one table called Table1 which has following data
ItemName Rate AA 2 BB 1 CC 4 DD 3 EE 5 FF 6 GG 54 Now in aspx page I have one dropdownlist1 and one textbox1
For example first user select DD from dropdownlist1 i have to show in textbox1 = 3 without postback
Next user select GG from dropdownlist1 i have to show in textbox1 = 54 without postback
How to filter data without postback
Thank You
Tuesday, May 28, 2019 9:48 AM
Answers
-
User-1174608757 posted
Hi Gopi.MVA,
According to your description, I have made a sample here.
In fact , dropdownlist has two attributes : DataValueField and DataTextField .DataValueFied doesn't show on the page, it's set in dropdownlist which is set as index of options. DataTextFied is the value you want to show in the dropdownlist.
So I suggest that you could set the column Rate as DataValueField and set item as DataTextField. Then you could set text as the value of DateValueFied when dropdownlist changes. You could see my demo as below:
Table1:
aspx:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../Scripts/jquery-3.3.1.js"></script> <script> $(function () { $(".mytext").val($(".myddl").val()) $(".myddl").change(function () { $(".mytext").val($(this).val()) }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mssqlserver %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource> <asp:DropDownList ID="DropDownList1" Class="myddl" runat="server" DataSourceID="SqlDataSource1" DataValueField="Rate" DataTextField="item"></asp:DropDownList> <input id="Text1" class="mytext" type="text" /> </div> </form> </body> </html>
You could firstly see that dropdownlist has value attribute:
Then you could find it works as you want:
Best Regards
Wei
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 29, 2019 2:34 AM
All replies
-
User753101303 posted
Hi,
ItemName is both the key and what you are showing in the dropdown (or Rate is the key ?)
A first option could be to show the value as part of the dropdown ie showing
AA (2)
BB (1)
CC (4)
etc...How much explanation you need depends on your current JavaScript knownledge. Basically you'll use something such as https://stackoverflow.com/questions/44679332/javascript-change-input-value-when-select-option-is-selected to call a JavaScript when the selected value is changed. If Rate is not shown and not the key, you could store the value using a data-rate attribute as shown in the last sample.
With Web Forms a known problem is that the ClientID doesn't necessarily matches the server side control ID so you have to alter how the ID is generated or just use ClientID to generate a JavaScript that is working on the expected controls.
I'll post a sample if not enough and someone else doesn't provide one before.
Tuesday, May 28, 2019 11:53 AM -
User-807418713 posted
Hello
Good Day
I mean what we have to do is can we load table data in page_load and from that without postback Rate To be fetech on selected item using JavaScript or Jquery..
ThanksTuesday, May 28, 2019 12:21 PM -
User-2054057000 posted
Hello
I have one table called Table1 which has following data
ItemName Rate AA 2 BB 1 CC 4 DD 3 EE 5 FF 6 GG 54 Now in aspx page I have one dropdownlist1 and one textbox1
For example first user select DD from dropdownlist1 i have to show in textbox1 = 3 without postback
Next user select GG from dropdownlist1 i have to show in textbox1 = 54 without postback
How to filter data without postback
Thank You
You first bind your drowpdownlist selected text to ItemName and selected value to rates. Then use the below code jQuery code:
<asp:DropDownList ID="DdlMonths" runat="server" class="myddl"> ... </asp:DropDownList>
<
input
type
=
"text"
id
=
"mytextbox"
class="mytext"/>
In your jQuery code you add the jQuery change method for the dropdownlist:
$(".myddl").change(function () {
$(".mytext").val($(this).val());
});Tuesday, May 28, 2019 1:06 PM -
User-807418713 posted
Hello
Good Day
I mean what we have to do is can we load Rate and item from sql table data in page_load and from that without postback Rate To be fetech on selected item using JavaScript or Jquery..Tuesday, May 28, 2019 1:08 PM -
User-943250815 posted
As yogyogi mention, just bind data from sql table, then use Jquery code.
Of course you can do it on Page Load using your own logic, or you can just use SqlDataSource Control to query your table combined with DataSourceID on DropDownList.
Note you should set AutoPostBack="False"
Sample bellow uses SQLDataSource control, if do not want use it, do your query a bind data on PageLoad<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" SelectCommand="SELECT [ItemName], [Rate] FROM [tblRATES]"></asp:SqlDataSource> <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="ItemName" DataValueField="Rate" AutoPostBack="False" AppendDataBoundItems="True"> <asp:ListItem>Selecione</asp:ListItem> </asp:DropDownList>
Tuesday, May 28, 2019 6:51 PM -
User-807418713 posted
Hello
Here Is My Complete Code But Not Working Why
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(".myddl").change(function () { $(".mytext").val($(this).val()); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CHEMIMSConnectionString %>" SelectCommand="select Item_Name,Price from dbo.All_Item_Master"></asp:SqlDataSource> <asp:DropDownList ID="DropDownList1" runat="server" Class="myddl" DataSourceID="SqlDataSource1" DataTextField="Item_Name" DataValueField="Price" AutoPostBack="False" AppendDataBoundItems="True"> </asp:DropDownList> <asp:TextBox ID="txtRate" runat="server" class="mytext" ClientIDMode="Static"> </asp:TextBox> </div> </form> </body> </html>
Please Check Why The Above Code Not Working...
Tuesday, May 28, 2019 11:14 PM -
User-943250815 posted
Check if this can help you https://www.tutorialrepublic.com/faq/how-to-get-the-value-of-selected-option-in-a-select-box-using-jquery.php
Wednesday, May 29, 2019 1:05 AM -
User-1174608757 posted
Hi Gopi.MVA,
According to your description, I have made a sample here.
In fact , dropdownlist has two attributes : DataValueField and DataTextField .DataValueFied doesn't show on the page, it's set in dropdownlist which is set as index of options. DataTextFied is the value you want to show in the dropdownlist.
So I suggest that you could set the column Rate as DataValueField and set item as DataTextField. Then you could set text as the value of DateValueFied when dropdownlist changes. You could see my demo as below:
Table1:
aspx:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../Scripts/jquery-3.3.1.js"></script> <script> $(function () { $(".mytext").val($(".myddl").val()) $(".myddl").change(function () { $(".mytext").val($(this).val()) }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mssqlserver %>" SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource> <asp:DropDownList ID="DropDownList1" Class="myddl" runat="server" DataSourceID="SqlDataSource1" DataValueField="Rate" DataTextField="item"></asp:DropDownList> <input id="Text1" class="mytext" type="text" /> </div> </form> </body> </html>
You could firstly see that dropdownlist has value attribute:
Then you could find it works as you want:
Best Regards
Wei
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 29, 2019 2:34 AM