visualizzazione onchange Record GridView se esiste dal database utilizzando Javascript

Question

Ho un evento onchange da html DropDownList nel mio codice. Ho già creato una funzione per gestire l'evento OnChange.

Quello che sto cercando di ottenere è di caricare un GridView in base alla selezione DropDownList.

Qui di seguito è il mio HTML:

<select id="ddlUnit" style="width: auto" runat="server" name="unitno" onchange="Funchangestatus()"> 
    <option>--- Select ---</option> 
</select> 

veda anche il mio JavaScript per lo stesso:

function Funchangestatus() { 
     PageMethods.GetStatus(document.getElementById('ddlUnit').value, onstatuschange); 
} 
function onstatuschange(status) { 
     var strvalstatus = ""; 
     strstatus = status[0].split('~'); 
     document.getElementById("txtstatus").value = strstatus[0]; 
     document.getElementById("txtstatus").readOnly = true; 
} 

Come posso realizzare questo compito utilizzando Javascript? suggerire gentilmente

Answer 1

ho cambiato il mio modo di codifica per questa funzionalità.

Come ho aggiunto un aspx Dropdownlist anziché HTML SELECT E non utilizzare javascript per questo.

Qui vado: -

SelectedIndexChanged Codice Evento

protected void ddlUnit_OnSelectedIndexChanged(object sender, EventArgs e) 
{ 
    string flatstatus = ddlUnit.SelectedItem.Text; 
    OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString()); 
    ObjPriCon.Open(); 

    OracleCommand cmd = new OracleCommand("Select distinct FLAT_STATUS STATUS from xxacl_pn_flat_det_v where FLAT_ID = '" + flatstatus + "' order by STATUS", ObjPriCon); 

    if (ddlUnit.SelectedItem.Text.ToString().Equals("--- Select ---")) 
    { 
     txtstatus.Value = ""; 
     return; 
    } 
    OracleDataReader dr = cmd.ExecuteReader(); 

    if (dr.HasRows) 
    { 
     dr.Read(); 
     txtstatus.Value = dr["STATUS"].ToString(); 
    } 
    else 
    { 

    } 
    dr.Close(); 
    ObjPriCon.Close(); 
    DisplayGrid(); 
    GrdBookingStatus.Visible = true; 
} 

ROW filtraggio e verifica se il record esiste utilizzando [DATAVIEW][1]

protected void DisplayGrid() 
{ 

    OracleCommand cmd = new OracleCommand("SELECT pn.project_id AS project_id, pn.property_name, pn.building, pn.building_id AS building_id, cd.flat_id AS flat_id, ab.flat_status, ab.COMMENTS " + 
             "FROM xxcus.xxacl_pn_projbuild_v pn INNER JOIN xxacl_pn_flat_status_his ab " + 
             "ON pn.project_id = ab.project_id AND pn.building_id = ab.building_id " + 
             "INNER JOIN xxacl_pn_flat_det_v cd ON cd.flat_id = ab.flat_id", ObjPriCon); 
    DataTable dtfillgrid = new DataTable(); 
    OracleDataAdapter da = new OracleDataAdapter(cmd); 
    da.Fill(dtfillgrid); 

    DataView dView = new DataView(dtfillgrid); 
    dView.RowFilter = "PROJECT_ID = '" + ddlProject.SelectedValue + "' AND BUILDING_ID ='" + ddlBuilding.SelectedValue + "' AND FLAT_ID = '" + ddlUnit.SelectedItem.Text + "'"; 
    GrdBookingStatus.DataSource = dView.ToTable(); 
    GrdBookingStatus.DataBind(); 
} 

Inoltre, d'altra parte I volevo impedire alla pagina di ottenere PostBack quindi ho usato Update panel in aspx come di seguito: -

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
     <table width="100%" border="0" cellpadding="1px" cellspacing="1px"> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Project 
       </td> 
       <td class="field" style="width: 7%"> 
        <asp:DropDownList ID="ddlProject" runat="server" Width="250" OnSelectedIndexChanged="ddlProject_OnSelectedIndexChanged" 
         AutoPostBack="true"> 
         <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> 
        </asp:DropDownList> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Building No 
       </td> 
       <td class="field" style="width: 7%"> 
        <asp:DropDownList ID="ddlBuilding" runat="server" AutoPostBack="true" Width="250" 
         OnSelectedIndexChanged="ddlBuilding_OnSelectedIndexChanged"> 
         <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> 
        </asp:DropDownList> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Unit No 
       </td> 
       <td class="field" style="width: 7%"> 
        <asp:DropDownList ID="ddlUnit" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlUnit_OnSelectedIndexChanged" 
         Width="177" AppendDataBoundItems="false"> 
         <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem> 
        </asp:DropDownList> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Status 
       </td> 
       <td class="field" style="width: 7%"> 
        <input type="text" runat="server" id="txtstatus" style="width: 175px; background-color: #EBEBE4;" 
         readonly="readonly" /> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Date 
       </td> 
       <td class="field" style="width: 7%"> 
        <input type="text" runat="server" id="txtdate" style="width: 175px;" disabled="disabled" /> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Flat Status 
       </td> 
       <td class="field" style="width: 7%"> 
        <select id="ddlflatstatus" style="width: 177px;" name="flatstatus" runat="server"> 
         <option value="0">--- Select ---</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New"> 
        Comments 
       </td> 
       <td class="field" style="width: 7%"> 
        <asp:TextBox ID="txtcomments" runat="server" Width="172" TextMode="MultiLine"></asp:TextBox> 
       </td> 
      </tr> 
     </table> 
     <div style="height: 10px; background-color: #EAEFF5"> 
     </div> 
     <table width="100%" border="0" cellpadding="1" cellspacing="1" style="background-color: #EAEFF5"> 
      <tr> 
       <td align="center"> 
        <asp:Button ID="CmdSave" OnClientClick="return ValidateRecord()" OnClick="CmdSave_Click" 
         CssClass="button" Text="Submit" runat="server" />&nbsp &nbsp &nbsp 
        <asp:Button ID="btnCancel" CssClass="button" Text="Cancel" runat="server" /> 
       </td> 
      </tr> 
     </table> 
     <div style="height: 10px; background-color: #EAEFF5"> 
     </div> 
     <div align="center" style="background-color: #EAEFF5"> 
      <cc1:Grid ID="GrdBookingStatus" runat="server" FolderStyle="../../Styles/Grid/style_12" 
       AutoGenerateColumns="false" AllowColumnResizing="true" Width="100%" ShowFooter="false" 
       ShowHeader="true"> 
       <Columns> 
        <cc1:Column ID="Column1" DataField="" ReadOnly="true" HeaderText="Sr.No" Width="50" 
         runat="server"> 
         <TemplateSettings TemplateId="tplNumbering" /> 
        </cc1:Column> 
        <cc1:Column ID="Column2" DataField="PROPERTY_NAME" HeaderText="Project Name" runat="server" 
         Width="200px"> 
        </cc1:Column> 
        <cc1:Column ID="Column3" DataField="BUILDING" HeaderText="Building No" runat="server" 
         Width="200px"> 
        </cc1:Column> 
        <cc1:Column ID="Column4" DataField="FLAT_ID" HeaderText="Flat No" runat="server" 
         Width="80px"> 
        </cc1:Column> 
        <cc1:Column ID="Column5" DataField="FLAT_STATUS" HeaderText="Flat Status" runat="server" 
         Width="160px"> 
        </cc1:Column> 
        <cc1:Column ID="Column6" DataField="COMMENTS" HeaderText="Comments" runat="server" 
         Width="200px"> 
        </cc1:Column> 
       </Columns> 
       <Templates> 
        <cc1:GridTemplate runat="server" ID="tplNumbering"> 
         <Template> 
          <b> 
           <%# (Container.RecordIndex + 1) %></b> 
         </Template> 
        </cc1:GridTemplate> 
       </Templates> 
      </cc1:Grid> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

Ed è visualizzato il record se esiste nel database.

Answer 2

Utilizzare i dati jquery, supportano le chiamate ajax e l'elaborazione lato server. Date un'occhiata a questo:

https://www.datatables.net/examples/server_side/

$(document).ready(function() { 
    $('#example').dataTable({ 
    "bServerSide": true, 
    "sAjaxSource": "scripts/GetMyData.aspx", 
    "sServerMethod": "POST" 
    }); 
}); 

Answer 3

Ecco un approccio con jQuery (non dimenticate di togliere runat='server' da select):

HTML:

<select id="ddlUnit" style="width: auto" name="unitno"> 
    <option>--- Select ---</option> 
    <option>option1</option> 
</select> 
<asp:Button ID="btnSearch" runat="server" Text="Search" /> 
<asp:Label ID="lblMessage" runat="server" Text="No Record Found" Font-Bold="true" ForeColor="Red" style="display:none"></asp:Label> 

jQuery:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=btnSearch.ClientID %>').click(function (e) { 
      SearchGridData(); 
      e.preventDefault(); 
     }); 
    }); 
    function SearchGridData() { 
     var counter = 0; 
     //Get the search text 
     var searchText = $('#ddlUnit').val().toLowerCase(); 
     //Hide No record found message 
     $('#<%=lblMessage.ClientID %>').hide(); 
     //Hide all the rows of gridview 
     $('#<%=GridView1.ClientID %> tr:has(td)').hide(); 
     if (searchText.length > 0) { 
      //Iterate all the td of all rows 
      $('#<%=GridView1.ClientID %> tr:has(td)').children() 
     .each(function() { 
     var cellTextValue = $(this).text().toLowerCase(); 
      //Check that text is matches or not 
     if (cellTextValue.indexOf(searchText) >= 0) { 
     $(this).parent().show(); 
     counter++; 
     } 
     }); 
      if (counter == 0) { 
       //Show No record found message 
       $('#<%=lblMessage.ClientID %>').show(); 
      } 
     } 
     else { 
      //Show All the rows of gridview 
      $('#<%=GridView1.ClientID %> tr:has(td)').show(); 
     } 
    } 
</script>