Wednesday 28 March 2018

Drop down with autocomplete Example


View Model  :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Models
{
    public class EMPVM
    {
        public int CID { get; set; }
        public List<SelectListItem> LCOUNTRY { get; set; }
        public List< int> SID { get; set; }
        public EMPVM()
        {
            LCOUNTRY = new List<SelectListItem>();
            SID = new List<int>();
        }
    }
}

View code.

@model WebApplication1.Models.EMPVM

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
       
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.CID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CID,Model.LCOUNTRY,"Select...", new {@class = "form-control" ,@style="width:200px" } )
                    @Html.ValidationMessageFor(model => model.CID, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <br /><br />
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
   
</body>
</html>
<link rel="stylesheet" href="~/chosen.css" />
<script src="~/scripts/jquery-1.12.4.min.js"></script>
<script src="~/scripts/chosen.jquery.js"></script>
<script src="~/scripts/chosen.proto.js"></script>
<script type="text/javascript">
    $(function () {
        $('#CID').chosen();
    });
</script>

Reset Dropdown Code :

$('#CID').val('').trigger('chosen:updated');

No comments:

Post a Comment