Add searchable Function in Dropdownlist with Razer

Question

I want to add searchable function in dropdownlist

below

 <tr>
                <td>
                    Class

                </td>
                <td>
                    @Html.DropDownListFor(m => m.SecID, Model.SectionList)

                </td>
            </tr>

Controller COde

  private static List<SelectListItem> GetSection()
        {
            SilverEntities entities = new SilverEntities();
            {
                List<SelectListItem> SectionList = (from d in entities.Sections
                                                    select new SelectListItem
                                                    {
                                                        Text = d.Secnam,
                                                        Value = SqlFunctions.StringConvert((double)d.SecID)
                                                    }).ToList();
                SectionList.Insert(0, new SelectListItem { Text = "--Select Section--", Value = "" });


                //Add Default Item at First Position.

                return SectionList;
            }

        }

Answer 1

Hi @Analyst_SQL ,

You can try to use the bootstrap-select package, check the following sample: add the selectpicker class and enable data-live-search.

    <div class="form-group">  
        @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })  
        <div class="row-fluid col-md-10">  
            @Html.DropDownListFor(c => c.Country, Model.SelectionList, null, new { @class = "selectpicker", data_live_search = "true" })  
        </div>  
    </div>  

And add the following reference:

<!-- Latest compiled and minified CSS -->  
< link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">  
<!-- Latest compiled and minified JavaScript -->  
< script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>  
<!-- (Optional) Latest compiled and minified JavaScript translation files -->  
< script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>  

[Note] The above code uses the default layout, it already adds the JQuery and Bootstrap reference. If you are not using the default layout, you must add the JQuery and Bootstrap reference by yourself.

Then, the output as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

What is a "searchable function"? My best guess it you are having trouble with MVC model binding and fetching the user's selected value. Then using the selected value in an LINQ query. The below example illustrates how to use the @azzedinehtmlsql .DropDownListFor with a model. If this does not answer your question, then please clarify what you are trying to do.

namespace MvcBasic.Controllers  
{  
    public class ViewModel  
    {  
        public int OptionValue { get; set; }  
        public int Hello { get; set; }  
        public List<SelectListItem> SectionList { get; set; }  
    }  
    public class BasicFormsController : Controller  
    {  
        // GET: BasicForms  
        [HttpGet]  
        public ActionResult Index()  
        {  
            ViewModel vm = new ViewModel()   
            {   
                OptionValue = 3,  
                SectionList = PopulateOptions()  
            };  
            return View(vm);  
        }  
  
        [HttpPost]  
        public ActionResult Index(ViewModel model)  
        {  
            //Use theSelectedValue to filter a LINQ query.  
            int theSelectedValue = model.OptionValue;  
  
            // Use theSelectedValue to persist the selected value.   
            ViewModel vm = new ViewModel()  
            {  
                OptionValue = theSelectedValue,  
                SectionList = PopulateOptions()  
            };  
            return View(vm);  
        }  
  
        private List<SelectListItem> PopulateOptions()  
        {  
            List<SelectListItem> options = new List<SelectListItem>();  
  
            for (int i = 1; i < 10; i++)  
            {  
                options.Add(new SelectListItem()   
                {  
                    Text = $"Option {i}",  
                    Value = $"{i}",  
                });  
            }  
            return options;  
        }  
    }  
}  


@model MvcBasic.Controllers.ViewModel  
@{  
    ViewBag.Title = "Index";  
}  
  
<h2>Index</h2>  
  
<form method="post">  
    <div>  
        @Html.DropDownListFor(m => m.OptionValue, Model.SectionList)  
    </div>  
    <div>  
        <input id="Submit1" type="submit" value="submit" />  
    </div>  
</form>  

Answer 3

i did not mentioned link JS

@model WebApplication9.Models.Bigbalprd
@{
    Layout = null;
}

<html>
<head>


    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>

<body>


    <h1>Insert Data Into Data using MVC EDO</h1>


    <div>
        @using (Html.BeginForm("Index", "Bigbale", FormMethod.Post))
        {
        <table border="1" bgcolor="yellow" width="400px" height="250px">


            <tr>
                <td>
                    Class

                </td>
                <td>


                    <div class="form-group">
                        @Html.LabelFor(m => m.CodeItem, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="row-fluid col-md-10">
                            @Html.DropDownListFor(c => c.CodeItem, Model.ItemList, null, new { @class = "selectpicker", data_live_search = "true" })
                        </div>
                    </div>


                </td>
            </tr>

            <tr>
                <td>
                    Class

                </td>
                <td>
                    @Html.DropDownListFor(m => m.SecID, Model.SectionList)
                </td>
            </tr>

            <tr>
                <td>
                    Category

                </td>
                <td>
                    @Html.DropDownListFor(m => m.CID, Model.SectionList)
                </td>
            </tr>

            <tr>
                <td>
                    Qty

                </td>
                <td>
                    @Html.TextBoxFor(m => m.Bpqty)
                </td>
            </tr>
            <tr>
                <td>
                    Qty

                </td>
                <td>
                    @Html.TextBoxFor(m => m.Bweight)
                </td>
            </tr>


            <tr>
                <td>
                    <input class="submit" type="submit" />
                </td>
            </tr>


        </table>


        }


    </div>
    <b>@ViewBag.saveresult</b>
</body>


</html>