Sunday, January 22, 2017

Part 29 - Client side validation using jquery in asp.net mvc





#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; }
    }
}
  
#Layout Page (_Layout.cshtml)

 
<!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>

 # View Page (Login.cshtml)

 
@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>&para; Have faith in us, We will give you full satisfaction by providing best service. &para;</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

By at
Labels: , , , ,

3 comments:

Rakesh Sharma said...

i think u are missing some thing here because validation work fine but colour of the text box and error message is not showing . pls recheck code one

April 15, 2017 at 7:59 AM
rmouniak said...

I like your blog, I read this blog please update more content on hacking,
Nice post,and good information Thanks for sharing
further check it once at .NET Online Course

October 9, 2018 at 9:16 PM
Janu said...


Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery





June 12, 2020 at 8:54 AM

Post a Comment

Subscribe to: Post Comments (Atom)