Learn C# ASP.NET MVC WCF SQL Angular: How to use AngularJS in ASP.NET MVC AngularJS and ASP.NET MVC Angular.Js ASP.NET MVC And Angular.Js Web Apps Learning {{AngularJS}} with ASP.NET MVC

In this article I am going to create a Login Page in MVC using Angular JS.

Step 1

Go to Visual Studio Menu File->New-Project (Click on "Project" Menu Item). the out put will look like

Step 2

After Clicking on project Menu item a new window will be open and its output look like

now select ASP.NET MVC4 Web Application and rename your solution name to "LoginPageMVCWithAngularJS" and click on "OK" button.

Step 3

After Complete Step 2 a new window will be open. select "Basic" template and click on "OK" Button, output will look like

Step 4

Now right click at solution explorer Click on "Manage NuGet Packages.."

Click on "Manage NuGet Packages.." After clicking on it a window will be open , type in search box "angularjs" and click on install to searched angular js item, output is

Step 5

After Installing angularjs click on close button

Step 6

At the Solution explorer in Script Floder , you may see angular js file has loaded.
Now I edited "_Layout.cshtml" in "Views->Shared" folder.

_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

@* Here ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner

of AngularJS application*@

@RenderBody()

@Scripts.Render("~/bundles/jquery")

@* Add Angular Library Here *@

@Scripts.Render("~/bundles/angular")

@RenderSection("scripts", required: false)

</body>

</html>

in it I added a "Scripts/MyApp.js" file. So this file added into Script folder with the name of "MyApp.js".

(function () {

//Create a Module

var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing

//Create a Controller

app.controller('LoginController', function ($scope) { // here $scope is used for share data between view and controller

});

})();

Step 7

Now I add a New folder in Script folder with name "AngularController", out put is

Step 8

After Completing step 7 , I add a js file inside "AngularController" with name of "Login.js"

write the code in Login.js

angular.module('MyApp') //extending angular module from First Part

.controller('LoginController', function ($scope, LoginService) { //explained about controller in Login

//Default Variable

$scope.submitText = "Login";

$scope.submitted = false;

$scope.message = '';

$scope.isFormValid = false;

$scope.User = {

Username: '',

Password: ''

};

//Check form Validation // here f1 is our form name

$scope.$watch('f1.$valid', function (newValue) {

$scope.isFormValid = newValue;

});

//Save Data

$scope.SaveData = function (data) {

if ($scope.submitText == 'Login') {

$scope.submitted = true;

$scope.message = '';

if ($scope.isFormValid) {

$scope.submitText = 'Please Wait...';

$scope.User = data;

LoginService.SaveFormData($scope.User).then(function (d) {

if (d == 'Success') {

//have to clear form here

ClearForm();

window.location.href = "/Login/Index"; // page after successful login

}

if (d == 'Failed!') {

$scope.submitText = 'Login';

alert('wrong user id or password');

}

});

}

else {

$scope.message = 'Please fill required fields value';

}

//Clear Form (reset)

function ClearForm() {

$scope.User = {};

$scope.f1.$setPristine(); //here f1 our form name

$scope.submitted = false;

}

})

.factory('LoginService', function ($http, $q) { //explained about factory in Login

//here $q is a angularjs service with help us to run asynchronous function and return result when processing done

var fac = {};

fac.SaveFormData = function (data) {

var defer = $q.defer();

$http({

url: '/Login/Login', //get execute to checking username or password is valid or not.

method: 'POST',

data: JSON.stringify(data),

headers: { 'content-type': 'application/json' }

}).success(function (d) {

// Success callback

defer.resolve(d);

}).error(function (e) {

//Failed Callback

alert('Error!');

defer.reject(e);

});

return defer.promise;

}

return fac;

});

Step 9

After writing the "Login.js" , create a contoller in "Controllers" folder at solution explorer. Right click on "Controllers" folder at solution explorer

click on Controller a new window will be open, new rename it to "LoginController" and click on "Add" button.

Step 10

Right click on Index ActionResult method and click on "Add View.."

After clicking on Add View A new window will be open

now click on "ADD" Button.

After clicking on "Add" button "Index.cshtml" will be generate. Edit the code of "Index.cshtml"

ViewBag.Title = "Index";

}

<h2>Sucessd</h2>

Step 11

Now write click on Login ActionResult Add a view and write the code of that view

Login.Cshtnl

Layout = "~/Views/Shared/_Layout.cshtml";

ViewBag.Title = "Login";

}

<style>

input{

padding:5px;

border:1px solid #A5A5A5;

}

input.ng-dirty.ng-invalid {

border:1px solid red;

background-color:rgb(255, 244, 244);

}

.error {

color:red;

}

</style>

<h2>Login</h2>

<div style="color:red">{{message}}</div>

<table>

<tr>

<td>Username : </td>

<td>

<span class="error" ng-show="(f1.uUsername.$dirty || submitted) && f1.uUsername.$error.required">Username required!</span>

</td>

</tr>

<tr>

<td>Password : </td>

<td>

<span class="error" ng-show="(f1.uPassword.$dirty || submitted) && f1.uPassword.$error.required">Password required!</span>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</div>

@section scripts{

}

Step 12

Add a class in Modles folder withb the name of "Login.cs"

code of "Login.cs"

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

namespace LoginPageMVCWithAngularJS.Models

{

public class Login

{

public string UserName { get; set; }

public string Password { get; set; }

string connString = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString; // Read the connection string from the web.config file

public bool save(Login data)

{

bool flag = false;

SqlConnection con = new SqlConnection(connString);

con.Open();

SqlCommand cmd = new SqlCommand("Select count(*) from TblUser where UserName='" + data.UserName + "' and Password='" + data.Password + "'", con);

flag = Convert.ToBoolean(cmd.ExecuteScalar());

return flag;

}

Add Some code in "LoginController.cs"

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using LoginPageMVCWithAngularJS.Models;

namespace LoginPageMVCWithAngularJS.Controllers

{

public class LoginController : Controller

{

// GET: /Login/

public ActionResult Index()

{

return View();

}

public ActionResult Login()

{

return View();

}

[HttpPost]

public JsonResult Login(Login u)

{

string message = "";

vm.UserName = u.UserName;

vm.Password = u.Password;

bool i = vm.save(vm);

if (i)

{ message = "Success"; }

else

{

message = "Failed!";

}

return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

Step 13

Now Some changes made in "App_Start" folder files

"BundleConfig.cs"

using System.Web;

using System.Web.Optimization;

namespace LoginPageMVCWithAngularJS

{

public class BundleConfig

{

// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

public static void RegisterBundles(BundleCollection bundles)

{

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

"~/Scripts/jquery-{version}.js"));

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

"~/Scripts/angular.js",

"~/Scripts/angular-route.js"));

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

"~/Scripts/jquery-ui-{version}.js"));

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

"~/Scripts/jquery.unobtrusive*",

"~/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 StyleBundle("~/Content/css").Include("~/Content/site.css"));

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

"~/Content/themes/base/jquery.ui.core.css",

"~/Content/themes/base/jquery.ui.resizable.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.button.css",

"~/Content/themes/base/jquery.ui.dialog.css",

"~/Content/themes/base/jquery.ui.slider.css",

"~/Content/themes/base/jquery.ui.tabs.css",

"~/Content/themes/base/jquery.ui.datepicker.css",

"~/Content/themes/base/jquery.ui.progressbar.css",

"~/Content/themes/base/jquery.ui.theme.css"));

}

Now Edited in "RouteConfig.cs"

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Routing;

namespace LoginPageMVCWithAngularJS

{

public class RouteConfig

{

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

name: "Default",

url: "{controller}/{action}/{id}",

defaults: new { controller = "Login", action = "Login", id = UrlParameter.Optional }

);

}

Now run your application

Learn C# ASP.NET MVC WCF SQL Angular

Thursday, December 10, 2015

Create a Login Page in Angular Js with MVC