0

I have a long dropdown need to be filtered/searchable. Similar to this dropdown:

Creating a select box with a search option

A project set up with a master page which included ContentPlaceHolder tag and all CSS, jquery plugin(chosen, datepicker,select2... etc). I've tried to go all questions people ask, go through the jquery chosen documentaries but still don't get it to work. Is it possible because I'm using .net 4.5? Any thought? Please help.

Here is the code

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="V2.master.cs" Inherits="Stroke_V2" %>

<!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" lang="en">
<head runat="server">
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
    //All css and js.min go here
    <!-- CSS -->
    <!--.js.min-->

    <title>AppTitleGohere</title>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="MastPg3" runat="server">
        <div class="container">
            //Container here
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <br />
        <div class="container footer center">

            // Container footer here
        </div>       
    </form>
</body>
</html>

Then call the dropdown list from SQL and stored in PLACEHOLDER.The code is in .aspx.cs file

Student.Procedure.MasterCourses= formcontrols.GetDropdownValue($(record.PLACEHOLDER + 'ddlMasterCourses'));

formcontrols.PopulateDropDown($(record.PLACEHOLDER + 'ddlMasterCourses'), procedure.MasterCourses);

Then, I have a record.aspx file which has all HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/V2.master" AutoEventWireup="true" CodeFile="Record.aspx.cs" Inherits="Registry_Record" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />


<div id="dvStudentCourses" class="tab-pane fade in active">

    <div class="col-md-12 col-sm-12 col-xs-12 text-center section">
        Master Courses
    </div>
    <br />
    <br />    

    <div class="row">
        <div class="form-horizontal col-md-6 col-sm-12 col-xs-12 formelement csc">
            <div class="form-group">
                <div class="field-group">
                    <label id="lblMasterCourses" class="col-md-4 col-sm-4 col-xs-12 control-label">Master Courses</label>

                    <div class="col-md-8 col-sm-8 col-xs-12">
                        <div class="dropdown">

                            <input id="ddlMasterCourses" runat="server" aria-expanded="true" aria-haspopup="true" class="btn btn-default btn-block dropdown-toggle form-control input-sm" data-defaultvalue="Select Value" data-toggle="dropdown" type="button" />

                            <ul id="ulMasterCourses" runat="server" aria-labelledby="lblMasterCourses" class="dropdown-menu btn-block scrollable-menu">
                            </ul>

                            <input name="ddlMasterCourses" type="hidden" />
                        </div>
                        **<script>
                            $(document).ready(function() {
                                $('#ddlMasterCourses').select2({
                                });
                            });**
                        </script> 
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

0 Answers0