Add searchable Function in Dropdownlist with Razer

akhter hussain 2,491 Reputation points
2021-11-11T14:27:40.087+00:00

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

        }
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
2,585 questions
ASP.NET MVC
ASP.NET MVC
A Microsoft web application framework that implements the model-view-controller (MVC) design pattern.
610 questions
No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 18,881 Reputation points Microsoft Employee
    2021-11-12T05:37:35.85+00:00

    Hi @akhter hussain ,

    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:

    148686-1.gif


    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


2 additional answers

Sort by: Most helpful
  1. AgaveJoe 17,216 Reputation points
    2021-11-11T14:49:35.95+00:00

    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>  
    

  2. akhter hussain 2,491 Reputation points
    2021-11-12T12:22:22.75+00:00

    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>