Dropdown With Multiple CheckBox With Angular 2 In MVC 5

 Multiple Dropdown   checkbox using MVC .following few step.

Step 1 :    Create AutoComplete.Component.ts

import { Component } from '@angular/core';
import { Autoclass } from './auto_model';   //  Class Name is Autoclass 
import { AutoLogic } from './auto_access_logic';   //Controller Access 
@Component({
    selector: 'Auto',
    templateUrl: './Autocomplete/Index'
})
export class AutoComponent {
    public checked: string = "";
    public unchecked: string = "";
    public data_Autovalue: Array<Autoclass>;
    public div_autocomplete: boolean = false;
    public data_Autovalue_search: Array<Autoclass>;
    constructor(private access: AutoLogic) {

        access.Get_auto().subscribe((data) => {

            this.data_Autovalue = JSON.parse(data.json())
            var records = this.data_Autovalue;
            this.data_Autovalue_search = this.data_Autovalue;
        })

    }
    search_value(names: string) {

        this.data_Autovalue = this.data_Autovalue_search.filter(function (data) {

            return data.Name.toLocaleUpperCase().startsWith(names.toLocaleUpperCase()) || data.Name.toLocaleLowerCase().startsWith(names.toLocaleLowerCase())
        });

    }
    onchecked(Id: string, value_check: boolean): void {

        if (value_check == true) {
            this.checked = this.checked + Id + ',';
            alert(this.checked);
        }
        else {
            this.unchecked = this.checked.replace(Id + ',', '');
            this.checked = this.unchecked;
            alert(this.checked);
        }
    }

}

Step 2 : Create Model In Angulr  Like Autoclass .ts

export class Autoclass {

    public Name: string = "";
    public Id: string = "";

}

Step 3 : Create Http Access In Angulr  Like AutoLogic .ts

import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/catch'
import 'rxjs/add/Observable/throw'
@Injectable()
export class AutoLogic {

    constructor(private http: Http)
    { }
    Get_auto(): Observable<any> {
       
        return this.http.get("/Autocomplete/Getrecords")
            .catch((error: any) => Observable.throw(error.json().error || "Server error"));
    }

}

Step 4 : Add Model and Logic or component in App.Module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AutoLogic } from './auto_access_logic';
import { AppComponent } from './app.component';
import { AutoComponent } from './Autocomplete';
import { HttpModule } from '@angular/http';
@NgModule({
    imports: [BrowserModule, HttpModule],
  declarations: [AppComponent, AutoComponent ],
  bootstrap: [AppComponent],
  providers: [AutoLogic]
})

export class AppModule { }

Note : After completed Angular part let got to in MVC 


Step 5 : Create One Model Like Auto_Model.cs

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

namespace autocomplete.Models
{
    public class Auto_Model
    {

        public string Name { get; set; }
        public string Id { get; set; }

    }

}

Step 6 : Create Access Data Model  on this model we will access or database .I have given View_Model Name Auto_ViewModel.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.Data;
using autocomplete.Models;

namespace autocomplete.ViewModel
{
    public class Auto_ViewModel
    {
        public List<Auto_Model> Return_auto()
        {

            List<Auto_Model> va_auto = new List<Auto_Model>();

            DataTable dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Id", typeof(string));

            DataRow rd_Gujarat = dt.NewRow();
            rd_Gujarat["Name"] = "Gujarat";
            rd_Gujarat["Id"] = "1";

            DataRow rd_HimachalPradesh = dt.NewRow();
            rd_HimachalPradesh["Name"] = "Himachal Pradesh";
            rd_HimachalPradesh["Id"] = "2";

            DataRow rd_j_k = dt.NewRow();
            rd_j_k["Name"] = "Jammu and Kashmir";
            rd_j_k["Id"] = "3";

            DataRow rd_Karnataka = dt.NewRow();
            rd_Karnataka["Name"] = "Karnataka";
            rd_Karnataka["Id"] = "4";          

            dt.Rows.Add(rd_Gujarat);
            dt.Rows.Add(rd_HimachalPradesh);
            dt.Rows.Add(rd_j_k);
            dt.Rows.Add(rd_Karnataka);
         
            foreach (DataRow row in dt.Rows)
            {
                va_auto.Add(new Auto_Model
                {
                    Name = row["Name"].ToString(),
                    Id = row["Id"].ToString()
                });
            }
            return va_auto;
        }
    }

}

Step 7 : Create Controller AutocompleteController.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using System.Data;
using autocomplete.ViewModel;

namespace autocomplete.Controllers
{
    public class AutocompleteController : Controller
    {
        // GET: Autocomplete
        Auto_ViewModel AVM = new Auto_ViewModel();
        public ActionResult Index()
        {
            return View();
        }
      
        public ActionResult Getrecords( )
        {                    
            return Json(JsonConvert.SerializeObject(AVM.Return_auto()), JsonRequestBehavior.AllowGet);
        }

       
    }

}

Step 8 : Create View 


@{
    Layout = null;
    ViewBag.Title = "Index";
}


<style>
    a {
        color: #000000;
    }

    .dropdown dd,
    .dropdown dt {
        margin: 0px;
        padding: 0px;
    }

    .dropdown ul {
        margin: -1px 0 0 0;
    }

    .dropdown dd {
        position: relative;
    }

    .dropdown a,
    .dropdown a:visited {
        color: #000000;
        text-decoration: none;
        outline: none;
        font-size: 12px;
    }

    .dropdown dd ul {
        background-color: antiquewhite;
        color: #000000;
        padding: 2px 15px 2px 5px;
    }
</style>


<table>
    <tr>
        <td>
            <dl class="dropdown">
                <dt>
                    <div (click)="div_autocomplete=!div_autocomplete" style="height:20px;width:300px;background-color: antiquewhite;">Select Value</div>
                    <input #values_search class="form-control" type="text" [hidden]="!div_autocomplete" placeholder="Search" style="width:300px;" (keypress)="search_value(values_search.value)" (keyup)="search_value(values_search.value)">
                </dt>
                <dd>
                    <div class="mutliSelect" [hidden]="!div_autocomplete" style="height:300px;overflow:auto;">
                        <ul *ngFor="let i of data_Autovalue" style="list-style-type: none;">
                            <li>
                                <input #checked class="abc" type="checkbox" id="{{i.Id}}" (click)="onchecked(i.Id,checked.checked)" name="isActive" [checked]="ischecked">
                                <span id='{{i.Id}}'>{{i.Name}}</span>
                            </li>
                        </ul>
                    </div>
                </dd>
            </dl>
        </td>

    </tr>
</table>
Demo 

search

search snapdeal