C# Online Compiler | .NET Fiddle

<no name> by Anonymous

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		[Required]
		[MinLength(4)]
		[MaxLength(100)]
		
		
		
		public string Username { get; set; }

		
		public string Password { get; set; }
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        [Required]
        [MinLength(4)]
        [MaxLength(100)]
        
        
        
        public string Username { get; set; }
​
        
        public string Password { get; set; }
    }
}

@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login Page</title>

    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <style type="text/css">
        .field-validation-error {
            color: #ff0000;
        }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Registration Page</h1>

            @using (Html.BeginForm())
            {
                <div class="form-group">
                    @Html.LabelFor(m => m.Username)
                    @Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(model => model.Password, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Username)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>

                <button type="button" class="btn btn-success submit">Login</button>
            }

            
            <div id="agent-ui" style="display:none;">
                <h2>Agent UI</h2>
                <table>
                    <tr>
                        <th>LOBBY</th>
                        <th>GATES</th>
                        <th>PNR</th>
                        <th>AVAIL</th>
                        <th>PBT</th>
                    </tr>
                    
                    
                </table>
            </div>

            <br /><br />
            <div class="alert alert-warning fade">
                <img src="http://entechprod.blob.core.windows.net/dotnetfiddle/morpheus.jpg" style="max-width:100%;" /><br /><br />
                <strong><span class="alert-content"></span></strong>
            </div>
        </div>
    </div>

   
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

    <script type="text/javascript">
        function openAlert(txt) {
            $('.alert-content').text(txt);
            $('.alert').addClass('in');
        }

        function closeAlert() {
            $('.alert').removeClass('in');
        }

        $(function () {
            $('.submit').click(function () {
                if ($('form').valid()) {
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Login", controller="Home"})',
                        data: {
                            Username: $('#Username').val(),
                            Password: $('#Password').val()
                        },
                        type: 'POST',
                        dataType: 'json',
                        success: function (resp) {
                            if (resp.success) {
                                
                                $('#agent-ui').show();
                                openAlert("Login successfully");
                            } else {
                                
                                closeAlert();
                                openAlert("Login failed!");
                            }
                        },
                        error: function () {
                            openAlert("An error occurred.");
                        }
                    });
                } else {
                    closeAlert();
                }
            });
        });
    </script>

</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login Page</title>
​
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
​
    <style type="text/css">
        .field-validation-error {
            color: #ff0000;
        }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
</head>
​
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Registration Page</h1>
​
            @using (Html.BeginForm())
            {
                <div class="form-group">
                    @Html.LabelFor(m => m.Username)
                    @Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(model => model.Password, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Username)
                    @Html.ValidationMessageFor(model => model.Password)
                </div>
​
                <button type="button" class="btn btn-success submit">Login</button>
            }
​
            
            <div id="agent-ui" style="display:none;">
                <h2>Agent UI</h2>
                <table>
                    <tr>
                        <th>LOBBY</th>
                        <th>GATES</th>
                        <th>PNR</th>
                        <th>AVAIL</th>
                        <th>PBT</th>
                    </tr>
                    
                    
                </table>
            </div>
​
            <br /><br />
            <div class="alert alert-warning fade">
                <img src="http://entechprod.blob.core.windows.net/dotnetfiddle/morpheus.jpg" style="max-width:100%;" /><br /><br />
                <strong><span class="alert-content"></span></strong>
            </div>
        </div>
    </div>
​
   
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
​
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
​
    <script type="text/javascript">
        function openAlert(txt) {
            $('.alert-content').text(txt);
            $('.alert').addClass('in');
        }
​
        function closeAlert() {
            $('.alert').removeClass('in');
        }
​
        $(function () {
            $('.submit').click(function () {
                if ($('form').valid()) {
                    $.ajax({
                        url: '@Url.RouteUrl(new{ action="Login", controller="Home"})',
                        data: {
                            Username: $('#Username').val(),
                            Password: $('#Password').val()
                        },
                        type: 'POST',
                        dataType: 'json',
                        success: function (resp) {
                            if (resp.success) {
                                
                                $('#agent-ui').show();
                                openAlert("Login successfully");
                            } else {
                                
                                closeAlert();
                                openAlert("Login failed!");
                            }
                        },
                        error: function () {
                            openAlert("An error occurred.");
                        }
                    });
                } else {
                    closeAlert();
                }
            });
        });
    </script>
​
</body>
</html>
​

using System;
using System.Web.Mvc;
using HelloWorldMvcApp;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
       
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }

        
        [HttpPost]
        public JsonResult Login(SampleViewModel model)
        {
            var sampleUsername = "test";
            var samplePassword = "test";

            if (ModelState.IsValid)
            {
                if (sampleUsername == model.Username && samplePassword == model.Password)
                {
                   
                    return Json(new { success = true });
                }
                else
                {
                    
                    return Json(new { success = false });
                }
            }

            
            return Json(new { success = false });
        }
    }
}

Controller

 
using System;
using System.Web.Mvc;
using HelloWorldMvcApp;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
       
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
​
        
        [HttpPost]
        public JsonResult Login(SampleViewModel model)
        {
            var sampleUsername = "test";
            var samplePassword = "test";
​
            if (ModelState.IsValid)
            {
                if (sampleUsername == model.Username && samplePassword == model.Password)
                {
                   
                    return Json(new { success = true });
                }
                else
                {
                    
                    return Json(new { success = false });
                }
            }
​
            
            return Json(new { success = false });
        }
    }
}
​

View in Full Screen

0
1
3
6
10
15
21
28
36
45
55
66
78
91
105

Last Run:	4:36:22 pm
Compile:	0.204s
Execute:	0s
Memory:	8kb
CPU:	0.031s

View IL Code