[Fork] SPAForm | C# Online Compiler

[Fork] SPAForm by AbhiFly

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		public string firstName
		{
			get;
			set;
		}

		public string lastName
		{
			get;
			set;
		}

		public string street
		{
			get;
			set;
		}

		public string city
		{
			get;
			set;
		}

		public string state
		{
			get;
			set;
		}

		public int zipCode
		{
			get;
			set;
		}

		public string email
		{
			get;
			set;
		}

		public DateTime DateofBirth
		{
			get;
			set;
		}

		
		public string OptInQuestion
		{
			get;
			set;
		}

		//See here for list of answers
		public string Answer
		{
			get;
			set;
		}
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public string firstName
        {
            get;
            set;
        }
​
        public string lastName
        {
            get;
            set;
        }
​
        public string street
        {
            get;
            set;
        }
​
        public string city
        {
            get;
            set;
        }
​
        public string state
        {
            get;
            set;
        }
​
        public int zipCode
        {
            get;
            set;
        }
​
        public string email
        {
            get;
            set;
        }
​
        public DateTime DateofBirth
        {
            get;
            set;
        }
​
        
        public string OptInQuestion
        {
            get;
            set;
        }
​
        //See here for list of answers
        public string Answer
        {
            get;
            set;
        }
    }
}

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

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<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>Material Design UI</title>

		<!-- CSS Includes -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css">
		
		<style type="text/css">
ng-scope{
	
}

.ng-binding{
	
}

.ng-pristine{
	
}

.ng-dirty{
	
}
			

input.ng-dirty.ng-valid{
	background
}

.ng-valid

.ng-valid-required

.ng-valid-minlength

.ng-pristine

input.ng-invalid{
	border:1px solid red;
}


* { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */
body 				 { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container 		{ 
  font-family:'Roboto';
  width:600px; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
}
h2 		 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
.description 	{ text-align:center; }

									  
a  { color:#53B2C8; }

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

			</style>
	</head>
	
	<body ng-controller="entriesController" class="container" >					  
		<div >
  
			<h2>Vacation Sweepstakes Form<small>Register Now!</small></h2>
													  
			  <p class="description">
				Sign Up to the raffle to win a free trip to the Bahamas
			  </p>
													  
			  <form name="signUpForm" novalidate ng-submit="submitForm();">
												  
				<div class="group">
					
					<input type="text" name="firstName" ng:model="registrationForm.firstName" required ng-minlength="2"></input>
				<!--
					{{firstName}}
					<span ng:show="registrationForm.firstName.$error.REQUIRED">Missing first name!</span>
					<span ng-show="registrationForm.firstName.$dirty && registrationForm.firstName.$error.minlength">First Name is too short!</span>
				 -->
					<span class="highlight"></span>
									  
					
									  
				  <label>First Name</label>
				</div>
				  
				<div class="group">      
				  <input type="text" name="lastName" ng:model="registrationForm.lastName" required></input>
				 <!--{{lastName}}-->
					
					<span class="highlight"></span>
			
				  <label>Last Name</label>
				</div>
			
				<div class="group">      
				  <input type="text" name="street" ng:model="registrationForm.street" required></input>
					<!--{{street}}-->
					
				  <span class="highlight"></span>
			
				  <label>Street Address</label>
				</div>
					
				<div class="group">      
				  <input type="text" name="city" ng:model="registrationForm.city" required></input>
				  
					<!--{{city}}-->
					<span class="highlight"></span>
			
				  <label>City</label>
				</div>
					
				<div class="group">      
				  <input type="text" name="state" ng:model="registrationForm.state" ng:pattern="state" size="2" required></input>
				<!--{{state}}
					
					 <span class="error" ng:show="registrationForm.state.$error.PATTERN">
					   Invalid state!</span>
					
					-->
					<span class="highlight" ></span>
			
				  <label>State</label>
												  
				</div>
					
				<div class="group">      
				  <input type="text" name="zipCode" ng:model="registrationForm.zipCode" ng:pattern="zip" size="5" required></input>
				  <!--{{zipCode}}-->
					<span class="highlight"></span>
				 <!--
					
					 <span class="error" ng:show="registrationForm.zip.$error.REQUIRED">
					   Missing zip!</span>
					 <span class="error" ng:show="registrationForm.zip.$error.PATTERN">
					   Invalid zip!</span>	
		-->
				  <label>Zip Code</label>
				</div>
					
					
				<div class="group">      
				  <input type="text" name="email" ng:model="registrationForm.email" required></input>
				  <!--{{email}}-->
					<span class="highlight"></span>
			
				  <label>Email Address</label>
				</div>
				
				<div class="group">      
				  Date of Birth<input type="date" name="dob" ng:model="registrationForm.dob" required></input>
				  <!--{{dob}}-->
					<span class="highlight"></span>
			
				  <label></label>
				</div>
					
				<div class="group">      
				  <input type="text" name="optInQuestion" ng:model="registrationForm.optInQuestion" required></input>
				  <span class="highlight"></span>
			
				  <label>Opt In Question</label>
					</div>
					<div class="group">
					<input type="text" name="optInQuestion" ng:model="registrationForm.optInAnswer" required>
						<span class="highlight"></span>
						<label>Opt In Answer</label>
						</div>
				</div>

			  </form>
					  
<button class="btn right" type="submit" ng-click="createEntry">Submit</button>
			

</div>

		
		
		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css"></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">

<!--
angular.module('myApp', []).
   directive('tabs',function () {
      return {
         restrict: 'E',
         transclude: true,
         scope: {},
         controller: function ($scope, $element) {
            var panes = $scope.panes = [];

            $scope.select = function (pane) {
               angular.forEach(panes, function (pane) {
                  pane.selected = false;
               });
               pane.selected = true;
            }

            this.addPane = function (pane) {
               if (panes.length == 0) $scope.select(pane);
               panes.push(pane);
            }
         },
         template: '<div class="tabbable">' +
            '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
            '</ul>' +
            '<div class="tab-content" ng-transclude></div>' +
            '</div>',
         replace: true
      };
   }).
   directive('pane', function () {
      return {
         require: '^tabs',
         restrict: 'E',
         transclude: true,
         scope: { title: '@' },
         link: function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
         },
         template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
            '</div>',
         replace: true
      };
   });
			
		</script>
-->		
			'use strict';
									  
			angular.module('myApp', []);
									  
			  function entriesController($scope) {
				 
			$scope.registrationForm = {
	
			firstName,
			lastName,
			email,
			street,
			city,
			state,
			zipCode,
			dob,
			optInQuestion,
			optInAnswer
			}
			
			$scope.submitForm = function () {
			
				if (form.$valid){ window.alert('created') }
		
				else { window.alert('failed' ) }
				  }
			  }
			
			app.service("entriesService", function ($http, $q)
			{
				var deferred = $q.defer();
			$http.get('entries.json').then(function (data)
			{
				deferred.resolve(data);
			});
			
			this.getEntries = function ()
			{
				return deferred.promise;
			}
			})
			.controller("entriesController", function($scope, entriesService)
			{
				var promise = entriesService.getEntries();
			promise.then(function (data)
			{
				$scope.entryCollection = data;
				console.log($scope.entryCollection);
			});
			})
			
			$scope.currentEntry = $scope.entryList[0];

   // expose a callable method to the view
   $scope.selectEntry = function (entry) {
      $scope.currentEntry = entry;
   }
									  
		</script>
		
		
	</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<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>Material Design UI</title>
​
        <!-- CSS Includes -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css">
        
        <style type="text/css">
ng-scope{
    
}
​
.ng-binding{
    
}
​
.ng-pristine{
    
}
​
.ng-dirty{
    
}
            
​
input.ng-dirty.ng-valid{
    background
}
​
.ng-valid
​
.ng-valid-required
​
.ng-valid-minlength
​
.ng-pristine
​
input.ng-invalid{
    border:1px solid red;
}
​
​
* { box-sizing:border-box; }
​
/* basic stylings ------------------------------------------ */
body                 { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container      { 
  font-family:'Roboto';
  width:600px; 
  margin:30px auto 0; 
  display:block; 
  background:#FFF;
  padding:10px 50px 50px;
}
h2       { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
.description    { text-align:center; }
​
                                      
a  { color:#53B2C8; }
​
/* form starting stylings ------------------------------- */
.group            { 
  position:relative; 
  margin-bottom:45px; 
}
input               {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus         { outline:none; }
​
/* LABEL ======================================= */
label                {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
​
/* active state */
input:focus ~ label, input:valid ~ label        {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}
​
/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:300px; }
.bar:before, .bar:after     {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}
​
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}
​
/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}
​
/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}
​
            </style>
    </head>
    
    <body ng-controller="entriesController" class="container" >                   
        <div >
  
            <h2>Vacation Sweepstakes Form<small>Register Now!</small></h2>
                                                      
              <p class="description">
                Sign Up to the raffle to win a free trip to the Bahamas
              </p>
                                                      
              <form name="signUpForm" novalidate ng-submit="submitForm();">
                                                  
                <div class="group">
                    
                    <input type="text" name="firstName" ng:model="registrationForm.firstName" required ng-minlength="2"></input>
                <!--
                    {{firstName}}
                    <span ng:show="registrationForm.firstName.$error.REQUIRED">Missing first name!</span>
                    <span ng-show="registrationForm.firstName.$dirty && registrationForm.firstName.$error.minlength">First Name is too short!</span>
                 -->
                    <span class="highlight"></span>
                                      
                    
                                      
                  <label>First Name</label>
                </div>
                  
                <div class="group">      
                  <input type="text" name="lastName" ng:model="registrationForm.lastName" required></input>
                 <!--{{lastName}}-->
                    
                    <span class="highlight"></span>
            
                  <label>Last Name</label>
                </div>
            
                <div class="group">      
                  <input type="text" name="street" ng:model="registrationForm.street" required></input>
                    <!--{{street}}-->
                    
                  <span class="highlight"></span>
            
                  <label>Street Address</label>
                </div>
                    
                <div class="group">      
                  <input type="text" name="city" ng:model="registrationForm.city" required></input>
                  
                    <!--{{city}}-->
                    <span class="highlight"></span>
            
                  <label>City</label>
                </div>
                    
                <div class="group">      
                  <input type="text" name="state" ng:model="registrationForm.state" ng:pattern="state" size="2" required></input>
                <!--{{state}}
                    
                     <span class="error" ng:show="registrationForm.state.$error.PATTERN">
                       Invalid state!</span>
                    
                    -->
                    <span class="highlight" ></span>
            
                  <label>State</label>
                                                  
                </div>
                    
                <div class="group">      
                  <input type="text" name="zipCode" ng:model="registrationForm.zipCode" ng:pattern="zip" size="5" required></input>
                  <!--{{zipCode}}-->
                    <span class="highlight"></span>
                 <!--
                    
                     <span class="error" ng:show="registrationForm.zip.$error.REQUIRED">
                       Missing zip!</span>
                     <span class="error" ng:show="registrationForm.zip.$error.PATTERN">
                       Invalid zip!</span>  
        -->
                  <label>Zip Code</label>
                </div>
                    
                    
                <div class="group">      
                  <input type="text" name="email" ng:model="registrationForm.email" required></input>
                  <!--{{email}}-->
                    <span class="highlight"></span>
            
                  <label>Email Address</label>
                </div>
                
                <div class="group">      
                  Date of Birth<input type="date" name="dob" ng:model="registrationForm.dob" required></input>
                  <!--{{dob}}-->
                    <span class="highlight"></span>
            
                  <label></label>
                </div>
                    
                <div class="group">      
                  <input type="text" name="optInQuestion" ng:model="registrationForm.optInQuestion" required></input>
                  <span class="highlight"></span>
            
                  <label>Opt In Question</label>
                    </div>
                    <div class="group">
                    <input type="text" name="optInQuestion" ng:model="registrationForm.optInAnswer" required>
                        <span class="highlight"></span>
                        <label>Opt In Answer</label>
                        </div>
                </div>
​
              </form>
                      
<button class="btn right" type="submit" ng-click="createEntry">Submit</button>
            
​
</div>
​
        
        
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css"></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">
​
<!--
angular.module('myApp', []).
   directive('tabs',function () {
      return {
         restrict: 'E',
         transclude: true,
         scope: {},
         controller: function ($scope, $element) {
            var panes = $scope.panes = [];
​
            $scope.select = function (pane) {
               angular.forEach(panes, function (pane) {
                  pane.selected = false;
               });
               pane.selected = true;
            }
​
            this.addPane = function (pane) {
               if (panes.length == 0) $scope.select(pane);
               panes.push(pane);
            }
         },
         template: '<div class="tabbable">' +
            '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
            '</ul>' +
            '<div class="tab-content" ng-transclude></div>' +
            '</div>',
         replace: true
      };
   }).
   directive('pane', function () {
      return {
         require: '^tabs',
         restrict: 'E',
         transclude: true,
         scope: { title: '@' },
         link: function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
         },
         template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
            '</div>',
         replace: true
      };
   });
            
        </script>
-->     
            'use strict';
                                      
            angular.module('myApp', []);
                                      
              function entriesController($scope) {
                 
            $scope.registrationForm = {
    
            firstName,
            lastName,
            email,
            street,
            city,
            state,
            zipCode,
            dob,
            optInQuestion,
            optInAnswer
            }
            
            $scope.submitForm = function () {
            
                if (form.$valid){ window.alert('created') }
        
                else { window.alert('failed' ) }
                  }
              }
            
            app.service("entriesService", function ($http, $q)
            {
                var deferred = $q.defer();
            $http.get('entries.json').then(function (data)
            {
                deferred.resolve(data);
            });
            
            this.getEntries = function ()
            {
                return deferred.promise;
            }
            })
            .controller("entriesController", function($scope, entriesService)
            {
                var promise = entriesService.getEntries();
            promise.then(function (data)
            {
                $scope.entryCollection = data;
                console.log($scope.entryCollection);
            });
            })
            
            $scope.currentEntry = $scope.entryList[0];
​
   // expose a callable method to the view
   $scope.selectEntry = function (entry) {
      $scope.currentEntry = entry;
   }
                                      
        </script>
        
        
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

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

		[HttpPost]
		public JsonResult GetAnswer(string question)
		{
			int index = _rnd.Next(_db.Count);
			var answer = _db[index];
			return Json(answer);
		}

		private static Random _rnd = new Random();
		private static List<string> _db = new List<string>
		{
		"Abhi", "Ray", "151 Holmes Terrace", "Moorestown", "NJ", "08057", "abhiraynj@gmail.com", "5/21/90", "favorite bball player?"
		}

		;
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
​
        [HttpPost]
        public JsonResult GetAnswer(string question)
        {
            int index = _rnd.Next(_db.Count);
            var answer = _db[index];
            return Json(answer);
        }
​
        private static Random _rnd = new Random();
        private static List<string> _db = new List<string>
        {
        "Abhi", "Ray", "151 Holmes Terrace", "Moorestown", "NJ", "08057", "abhiraynj@gmail.com", "5/21/90", "favorite bball player?"
        }
​
        ;
    }
}

View in Full Screen

View IL Code