#Expected Output format:
Note : Please create an Image folder inside Content folder and put some images .Please replace the current image file with you image file.
#Login View Model (LoginViewModel.cs)
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace MVCTutorial.Models
{
public class LoginViewModel
{
[Required(ErrorMessage = "Please enter email")]
[RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" + @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" + @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", ErrorMessage = "Email is not valid")]
public string EmailId { get; set; }
[Required(ErrorMessage = "Please enter password")]
public string Password { get; set; }
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/Test/Index">
<img alt="Brand" src="~/Content/Images/logo.png" height="20" width="20">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" id="myTab">
<li role="presentation"><a href="#music" aria-controls="music" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-music"> </span> Music & Dance</a></li>
<li class="divider"></li>
<li role="presentation"><a href="#training" aria-controls="training" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"> </span> Summar Training</a></li>
<li class="divider"></li>
<li role="presentation"><a href="#website" aria-controls="website" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-cloud"> </span> Website Building</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Career</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
@if (Session["UserId"] != null) {
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Welcome :@Session["UserName"] </a></li>
<li><a href="/Test/Logout">Logout</a></li>
</ul>
}
else {
<ul class="nav navbar-nav navbar-right">
<li><a href="/Test/Login">Login</a></li>
<li><a href="/Test/Registration">Register</a></li>
</ul>
}
}
</div>
</div>
</nav>
<div class="panel-body">
@RenderBody()
</div>
<div class="well" style="background-color:#000000;color:wheat;margin-bottom:0px">
<div class="col-lg-4" style="margin-left:20px">
<h3><span class="glyphicon glyphicon-map-marker"></span> Address</h3>
<ul class="list-group list-unstyled">
<li>Technotips Ltd.</li>
<li>xyz Industrial Area</li>
<li>Phase-2,New Delhi-52</li>
</ul>
</div>
<div class="col-lg-4">
<h3><span class="glyphicon glyphicon-cog"></span> Our Services</h3>
<ul class="list-group list-unstyled">
<li><span class="glyphicon glyphicon-music"></span> <a href="#">Musical & Dance Traning</a> </li>
<li><span class="glyphicon glyphicon-book"></span> <a href="#">Training in Asp.Net,Java,android etc.</a></li>
<li><span class="glyphicon glyphicon-globe"></span> <a href="#">Web designing -corporate & Domestic</a> </li>
</ul>
</div>
<div class="col-lg-3">
<h3><span class="glyphicon glyphicon-briefcase"></span> Career</h3>
<ul class="list-group list-unstyled">
<li><span class="glyphicon glyphicon-music"></span> <a href="#">Musical & Dance</a> </li>
<li><span class="glyphicon glyphicon-book"></span> <a href="#">Summar training</a></li>
<li><span class="glyphicon glyphicon-globe"></span> <a href="#">Website Designing</a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
@model MVCTutorial.Models.LoginViewModel
@{
ViewBag.Title = "Login";
}
<div class="panel panel-body">
<div class="col-md-3">
<div class="thumbnail">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Director Message</h3>
</div>
</div>
<img src="~/Content/Images/director1.jpg" alt="..." style="margin-top:-20px">
<div class="caption">
<h3>Ashish Tiwary</h3>
<p>¶ Have faith in us, We will give you full satisfaction by providing best service. ¶</p>
<p><a href="#" class="btn btn-primary" role="button">See more</a> </p>
</div>
</div>
</div>
<div class="col-md-9">
<form id="myForm">
<div class="form-group">
<div class="col-md-12">
<h4>Login Here</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.TextBoxFor(m => m.EmailId, new { @class = "form-control", @placeholder = "EmailId" })
@Html.ValidationMessageFor(m => m.EmailId, "")
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Password" })
@Html.ValidationMessageFor(m => m.Password, "")
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<a href="#" class="btn btn-primary " onclick="LoginUser()">Login</a>
</div>
</div>
</form>
</div>
</div>
<script>
var LoginUser = function () {
debugger
var data = $("#myForm").serialize();
if (!$("#myForm").valid())
{
return false;
}
// Ajax call here
}
</script>
All Code Factory
- Part 11- Insert data into database
- Part 12- Server side and clientside validation
- Part 13- Insert data into multiple tables
- Part 14- Insert data into database using JQuery
- Part 15- How to create Bootstrap Popup
- Part 16- Delete operation in Asp.net MVC
- Part 17- What is Partial View in Asp.net MVC
- Part 18- How to call Partial View using JQuery
- Part 19- Difference between Html.Partial() and Html.RenderPartial()
- Part 20- AddEdit Record using Partial View
- Part 21- Layout View in Asp.net MVC
- Part 22- Style.Render and Script.Render
- Part 23 - RenderBody, RenderSection and RenderPage.
- Part 24- Divide Page into several component using Bootstrap
- Part 25- Refresh Entity framework after any modification in database table
- Part 26- Set foreign key relationnship in database tables
- Part 27- Create Rgistration Page
- Part 28- Create Login Page
- Part 29- Client Side Validation using JQuery
- Part 30- How to return multiple Model to a View (Interview)
- Part 31- How to create Dynamic Menu using Partial View
- Part 32- Preview Image Before Uploading
- Part 33- Upload and Display Image using JQuery
- Part 34-Upload Image to SQL Server and Display
- Part 35- Download Image from URL and Upload to SQL Server
- Part 36- Cascading DropdownList
- Part 37- Implement Search Functionality
- Part 38- Attribute Routing in MVC
- Part 39- How to display multiple checkbox checked data
- Part 40- How to send multiple checkbox checked value to Server
- Part 41- How to create responsive sortable Image Gallery
- Part 42 - How to implement JQuery Autocomplete Textbox
- Part 43 - How to send Emails in Asp.net MVC
- Part 44 - Integrate JQuery DataTables plugin
- Part 45 - Display record from database using JQuery Datatable
- Part 46- Add Edit Record using JQuery DataTable
- Part 47 - JQuery DataTables Server -side Processing
- Part 48 - JQuery server side processing -Search functionality
- Part 49 - Pagination using Skip and Take method
- Part 50 - Refresh DataTable After Performing Any Action
- Part 51 - Send OTP ( One Time Password ) to any mobile device
- Part 52 - How to use AutoMapper in Asp.net MVC
- Part 53 - How to use AutoMapper ForMember Method
- Part 54 - Repository Pattern - 1 - Adding Business Layer
- Part 55 - Repository Pattern - 2 - Adding Domain Layer
- Part 56 - Repository Pattern - 3 - Dependency Injection
- Part 57- Repository Pattern- 4 - Adding Data Access Layer
- Part 58 - Repository Pattern - 5 - Setting Up Generic Repository
- Part 59 - Display Record using repository pattern
- Part 60 - Add Edit Record using Repository Pattern
