Get Started with Angular 2 and ASP.NET Core in Visual Studio 2015 Part-1



Let’s build an application with Angular 2 and core.



Now Create a Application

Now go to Visual Studio and create new project.

You should find new Asp.Net Core Angular 2 Starter Application (.Net Core)


Select ASP.NET Core Angular 2 Starter Application (.NET Core)  and fill appropriate details.

When visual studio complete the process you can see like this:


Now go to Visual Studio Hit Ctrl + F5 to preview your application. You will see following screen in your browser.


Now you’ve build a Angular  2 and core Application in Visual Studio 2015.


How to install MongoDB on Windows



This tutorial is totally depends on how to install MongoDB on Windows system.

What is MongoDB ?

It is free and open source database, published under GNU Affero General Public Licence basically it is using document oriented data model or we cans say NoSQL database.

Instead of ralational database this is built on architecture of collections and documents. Document comprise of key-value-pair is basic unit of MongoDB.

MongoDB stores data in flexible format like JSON format. Fields can be vary from document to document and data structure can be changed over time. It supports dynamic schema design.

MongoDB provides powerful ways to access and analyze your data using  ad hoc queries, indexing, and real time aggregation.


MongoDB Requires Windows 2008 , Windows vista or later versions of windows.

Go to Download – MongoDB


Find the current stable release select 64/32 bit version and install MSI installer. Basically MongoDB is installing C:\Program Files\MongoDB .




To configure MongoDB in windows simply follow following steps.

Step 1: Firs you need search Environment Variable from your My Computer properties and add C:\Program Files\MongoDB\Server\3.4\bin to PATH variable.

Step 2: Now create MongoDB log and data directories in your system (Such as D:/ ) . Or you can create using CMD. Select Command Prompt from start menu  and type:

C:\> D:
D:\> mkdir \MongoDB\MongoData
D:\> mkdir \MongoDB\MongoLogs


Step 3: Now move to the MongoDB Installation path C:\Program Files\MongoDB\Server\3.4\bin and run CMD:


C:\Program Files\MongoDB\Server\3.4\bin> mongod --dbpath D:\MongoDB\MongoData\ --logpath D:\MongoDB\MongoLogs\mongodb-log.log

It may take several minutes to prelocate all Journal files and start listening You can see it has generated all the files in given path.


Step 4: Now to start MongoDB administrative shell, open another Command Prompt from Start and use following commands. 

Microsoft Windows [Version 6.3.9600]
(c) 2013 Microsoft Corporation. All rights reserved.

C:\Users\Ravi>cd C:\Program Files\MongoDB\Server\3.4\bin

C:\Program Files\MongoDB\Server\3.4\bin>mongo
MongoDB shell version v3.4.5
connecting to: mongodb://
MongoDB server version: 3.4.5
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
Questions? Try the support group
Server has startup warnings:
2017-06-23T22:47:47.863+0530 I CONTROL  [initandlisten]
2017-06-23T22:47:47.864+0530 I CONTROL  [initandlisten] ** WARNING: Access contr
ol is not enabled for the database.
2017-06-23T22:47:47.864+0530 I CONTROL  [initandlisten] **          Read and wri
te access to data and configuration is unrestricted.
2017-06-23T22:47:47.864+0530 I CONTROL  [initandlisten]
> db
> db.fooo.insert({ a: 1 })
WriteResult({ "nInserted" : 1 })
> show dbs
admin  0.000GB
local  0.000GB
test   0.000GB
> show collections
> help                    help on db methods             help on collection methods                    sharding helpers                    replica set helpers
        help admin                   administrative help
        help connect                 connecting to a db help
        help keys                    key shortcuts
        help misc                    misc things to know
        help mr                      mapreduce

        show dbs                     show database names
        show collections             show collections in current database
        show users                   show users in current database
        show profile                 show most recent system.profile entries wit
h time >= 1ms
        show logs                    show the accessible logger names
        show log [name]              prints out the last segment of log in memor
y, 'global' is default
        use <db_name>                set current database                list objects in collection foo { a : 1 } )     list objects in foo where a == 1
        it                           result of the last line evaluated; use to f
urther iterate
        DBQuery.shellBatchSize = x   set default number of items to display on s
        exit                         quit the mongo shell

Step 7: Now you can install mongod.exe as a service. Type following command:

 C:\Program Files\MongoDB\Server\3.4\bin> mongod --dbpath D:\MongoDB\MongoData\ --logpath D:\MongoDB\MongoLogs\mongodb-log.log --logappend  --install

MongoDB service is installed now –logpath is used to specify log file and –logappend is used to restart service to append the output to existing log file. –dbpath is specific to the location of the data directory.

To start MongoDb service, run following command in Command Prompt:

net start MongoDB

Now MongoDB is running in your system.

Note : For more command line visit MongoDB Docs

How to create AutoComplete TextBox In ASP.NET MVC 5


Here we are going to implement Auto Complete TextBox using Jquery and Mvc 5. Simply follow following steps.

Step 1: Go to Microsoft Visual Studio 2015 and create a new empty MVC 5 project.
New Application
Step 2: Now go to Controllers folder and add new empty HomeController.cs file. And paste following give code.

Empty Controller

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

namespace JQueryAutoComplete.Controllers
    public class HomeController : Controller
        public ActionResult Index()
            return View();
        public JsonResult Index(string keyword)
            //This can be replaced with database call.
            List<Games> objGameList = new List<Games>
                new Games {Id=1,GameName="Cricket" },
                new Games {Id=2,GameName="Football" },
                new Games {Id=3,GameName="Chesh" },
                new Games {Id=4,GameName="VallyBall" },
                new Games {Id=5,GameName="Kabbadi" },
                new Games {Id=6,GameName="Hockey" }

            var result = (from a in objGameList
                          where a.GameName.ToLower().StartsWith(keyword.ToLower())
                            select new { a.GameName });

            return Json(result, JsonRequestBehavior.AllowGet);

        public ActionResult About()
            ViewBag.Message = "Your application description page.";

            return View();

        public ActionResult Contact()
            ViewBag.Message = "Your contact page.";

            return View();

Step 3: Now add new class named Games.cs in Models folder. And add following code in to it.


namespace JQueryAutoComplete.Models
    public class Games
        public int Id { get; set; }
        public string GameName { get; set; }

Step 4: Go to BundleConfig.cs and comment following lines.

using System.Web;
using System.Web.Optimization;

namespace JQueryAutoComplete
    public class BundleConfig
        // For more information on bundling, visit
        public static void RegisterBundles(BundleCollection bundles)
            //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            //            "~/Scripts/jquery-{version}.js"));

            //bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            //            "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

            bundles.Add(new StyleBundle("~/Content/css").Include(

Step 5: Now move to Home in View view folder and replace the following code with Index.cshtml.

@model JQueryAutoComplete.Models.Games
    ViewBag.Title = "Home Page";
		<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"> </script>
<script type="text/javascript">
    $(document).ready(function () {
            source: function (request, response) {
                    url: "/Home/Index",
                    type: "POST",
                    dataType: "json",
                    data: { keyword: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.GameName, value: item.GameName };
                    error: function () {
                        alert('something went wrong !');
            messages: {
                noResults: "", results: ""

@using (Html.BeginForm())
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
                <label for="games">Select Game :-</label>
                @Html.EditorFor(model => model.GameName, new { htmlAttributes = new { @class = "form-control" } })</div>

Step 6: Compile the code and runt the application. You can now use AutoComplete in your application.
Running applicationSecon PageThird Page
Note : You need to use the Jquery library to perfom this example.