locked
Get Data From Table One Time And Filter Base On Selection RRS feed

  • 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..

    Thanks
    Tuesday, 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-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