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

Introduction

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

Prerequisites

2017-06-26_221440

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)

2017-06-26_214630

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:

2017-06-26_215249

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

2017-06-26_215920

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

How to install MongoDB on Windows

Introduction 

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.

Requirements

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

Go to Download – MongoDB

MongodbSCommunity

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

2017-06-23_222344

2017-06-23_222444

2017-06-23_222510

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

2017-06-23_224125

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

2017-06-23_224621

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.

2017-06-23_2249382017-06-23_225100

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://127.0.0.1:27017
MongoDB server version: 3.4.5
Welcome to the MongoDB shell.
For interactive help, type "help".
For more comprehensive documentation, see
        http://docs.mongodb.org/
Questions? Try the support group
        http://groups.google.com/group/mongodb-user
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
test
> db.fooo.insert({ a: 1 })
WriteResult({ "nInserted" : 1 })
> show dbs
admin  0.000GB
local  0.000GB
test   0.000GB
> show collections
fooo
> help
        db.help()                    help on db methods
        db.mycoll.help()             help on collection methods
        sh.help()                    sharding helpers
        rs.help()                    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
        db.foo.find()                list objects in collection foo
        db.foo.find( { 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
hell
        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
HomeController
HomeController.cs

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();
        }
        [HttpPost]
        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.

Games.cs

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 http://go.microsoft.com/fwlink/?LinkId=301862
        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 http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

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="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#GameName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    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: ""
            }
        });
    })
</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
<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>
</div>
</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.