hiển thị trao đổi Bản ghi GridView nếu tồn tại từ cơ sở dữ liệu bằng cách sử dụng Javascript

Question

Tôi có một sự kiện onchange từ html DropDownList trong mã của tôi. Tôi đã tạo một hàm để xử lý sự kiện OnChange.

Điều tôi đang cố gắng đạt được là tải GridView dựa trên lựa chọn DropDownList.

Dưới đây là tôi HTML:

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

Xem thêm JavaScript của tôi cho cùng:

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; 
} 

Làm thế nào tôi có thể đạt được nhiệm vụ này sử dụng JavaScript? vui lòng đề xuất

Answer 1

tôi đã thay đổi cách của tôi về mã hóa cho chức năng này.

Khi tôi thêm một aspx Dropdownlist thay vì HTML SELECT Và không sử dụng javascript cho nó.

Ở đây tôi đi: -

SelectedIndexChanged đang tổ chức sự kiện

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 LỌC và kiểm tra nếu kỷ lục tồn tại bằng cách sử dụng [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(); 
} 

Ngoài ra, mặt khác tay tôi muốn ngừng trang nhận được PostBack vì vậy tôi sử dụng Update panel trong aspx như dưới đây: -

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

Và nó hiển thị hồ sơ mà nếu tồn tại vào cơ sở dữ liệu.

Answer 2

Sử dụng dữ liệu jquery, chúng hỗ trợ các cuộc gọi ajax và xử lý phía máy chủ. Hãy xem này:

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

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

Answer 3

Dưới đây là một cách tiếp cận với jQuery (đừng quên để loại bỏ runat='server' từ 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>