Travel Insurance Quote Sample One in MVC | C# Online Compiler

Travel Insurance Quote Sample One in MVC by jabbawocky10

using System;
using System.Linq;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
using System.Web.Mvc;

namespace TravelInsuranceQuoteApp.ViewModels
{
	public class QuoteViewModel
	{
		public long QuoteId { get; set; }
		
		[Required]
		[DisplayName("First Name")]
		public string FirstName { get; set; }
		
		[Required]
		[DisplayName("Last Name")]
		public string LastName { get; set; }

		[Required]
		[DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode=true)]
		[DisplayName("Date of Birth")]
		public DateTime? DateOfBirth { get; set; }
		
		[Range(2.5, 10)]
		[DisplayName("Optional Donation")]
		public decimal Donation { get; set; }
				
		[DisplayName("Country Of Residence")]
		public long CountryOfResidenceId { get; set; }
		
		public IEnumerable<SelectListItem> Countries 
		{ 
			get 
			{
				return new List<SelectListItem> 
				{
					new SelectListItem { Value = "10", Text = "Australia" },
					new SelectListItem { Value = "20", Text = "United Kingdom" },
					new SelectListItem { Value = "30", Text = "Germany" },
					new SelectListItem { Value = "40", Text = "France" }
				};
			}
		}
	}
	
	public class Country 
	{
		public long CountryId { get; set; }
		public string CountryName { get; set; }
	}
}

Model

​x
 
using System;
using System.Linq;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
using System.Web.Mvc;
​
namespace TravelInsuranceQuoteApp.ViewModels
{
    public class QuoteViewModel
    {
        public long QuoteId { get; set; }
        
        [Required]
        [DisplayName("First Name")]
        public string FirstName { get; set; }
        
        [Required]
        [DisplayName("Last Name")]
        public string LastName { get; set; }
​
        [Required]
        [DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode=true)]
        [DisplayName("Date of Birth")]
        public DateTime? DateOfBirth { get; set; }
        
        [Range(2.5, 10)]
        [DisplayName("Optional Donation")]
        public decimal Donation { get; set; }
                
        [DisplayName("Country Of Residence")]
        public long CountryOfResidenceId { get; set; }
        
        public IEnumerable<SelectListItem> Countries 
        { 
            get 
            {
                return new List<SelectListItem> 
                {
                    new SelectListItem { Value = "10", Text = "Australia" },
                    new SelectListItem { Value = "20", Text = "United Kingdom" },
                    new SelectListItem { Value = "30", Text = "Germany" },
                    new SelectListItem { Value = "40", Text = "France" }
                };
            }
        }
    }
    
    public class Country 
    {
        public long CountryId { get; set; }
        public string CountryName { get; set; }
    }
}

@using TravelInsuranceQuoteApp.ViewModels

@model QuoteViewModel

@{
	Layout = null;
}

<html>
	<head>
		<style>
			html {
				font-family: Verdana;
				font-size: 14px;
				
			}
			.input-group {
				margin-bottom: 15px;
			}
			.input-group label {
				display: block;
				margin-bottom: 5px;	
			}
			.input-group input[type="text"], .input-group input[type="number"], .input-group select {
				display: block;
				width: 180px;
				font-size: 14px;
				padding: 8px 4px;
			}
			button {
				height: 38px;
				border-radius: 4px;
				font-size: 16px;
			}
			.donation-thank-you-message {
				color: #4F4;
			}
			.ui-datepicker {
				background: #DDD;
				padding: 10px;
				border-radius: 4px;
				margin-top: 4px;
			}
			.field-validation-error {
				line-height: 18px;
				color: #F00;
			}
		</style>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	</head>
	<body>
		@using (Html.BeginForm("SubmitQuote", "Quote", FormMethod.Post)) {
		
			<div class="input-group first-name">
				@Html.LabelFor(m => m.FirstName)
				@Html.TextBoxFor(m => m.FirstName)
				@Html.ValidationMessageFor(m => m.FirstName)
			</div>
	
			<div class="input-group last-name">
				@Html.LabelFor(m => m.LastName)
				@Html.TextBoxFor(m => m.LastName)
				@Html.ValidationMessageFor(m => m.LastName)
			</div>

			<div class="input-group date-of-birth">
				@Html.LabelFor(m => m.DateOfBirth)
				@Html.TextBoxFor(m => m.DateOfBirth)
				@Html.ValidationMessageFor(m => m.DateOfBirth)
			</div>
				
			<div class="input-group donation-amount-container">
				@Html.LabelFor(m => m.Donation)
				@Html.TextBoxFor(m => m.Donation, new { @type = "number", @class = "donation-input" })
				@Html.ValidationMessageFor(m => m.Donation)
			</div>
			
			<div class="input-group country-of-residence">
				@Html.LabelFor(m => m.CountryOfResidenceId)
				@Html.DropDownListFor(m => m.CountryOfResidenceId, Model.Countries)
				@Html.ValidationMessageFor(m => m.CountryOfResidenceId)
			</div>
		
			<button type="submit">Save quote</button>
		}
		
		<script>			
			var 
				donationInput = document.querySelector(".donation-input"),
				firstRun = true,
				container = document.querySelector(".donation-amount-container"),
				thankYouDiv = document.createElement("div");
			
			donationInput.addEventListener("change", function() {
				var 
					self = this;
			
				$.ajax({
					url: '@Url.RouteUrl(new { action="GetThankYouMessage", controller="Quote"})',
					data: { donationAmount: self.value },
					dataType: "json",
					// contentType: "application/x-www-form-urlencoded",
					type: "GET",
					success: function(jqXHR, textStatus, errorThrown) {					
						if (firstRun) {
							container.appendChild(thankYouDiv);
							firstRun = false;
							thankYouDiv.className = thankYouDiv.className + " donation-thank-you-message";
						}
			
						thankYouDiv.innerHTML = jqXHR;
					},
					error: function(jqXHR, textStatus, errorThrown) {
						alert('error');
					}
				});
			}, false);
			
			
			$(".date-of-birth input[type='text']").datepicker({
				dateFormat: "dd-mm-yy"
			});
			
		</script>
	</body>
</html

View

 
@using TravelInsuranceQuoteApp.ViewModels
​
@model QuoteViewModel
​
@{
    Layout = null;
}
​
<html>
    <head>
        <style>
            html {
                font-family: Verdana;
                font-size: 14px;
                
            }
            .input-group {
                margin-bottom: 15px;
            }
            .input-group label {
                display: block;
                margin-bottom: 5px; 
            }
            .input-group input[type="text"], .input-group input[type="number"], .input-group select {
                display: block;
                width: 180px;
                font-size: 14px;
                padding: 8px 4px;
            }
            button {
                height: 38px;
                border-radius: 4px;
                font-size: 16px;
            }
            .donation-thank-you-message {
                color: #4F4;
            }
            .ui-datepicker {
                background: #DDD;
                padding: 10px;
                border-radius: 4px;
                margin-top: 4px;
            }
            .field-validation-error {
                line-height: 18px;
                color: #F00;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    </head>
    <body>
        @using (Html.BeginForm("SubmitQuote", "Quote", FormMethod.Post)) {
        
            <div class="input-group first-name">
                @Html.LabelFor(m => m.FirstName)
                @Html.TextBoxFor(m => m.FirstName)
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>
    
            <div class="input-group last-name">
                @Html.LabelFor(m => m.LastName)
                @Html.TextBoxFor(m => m.LastName)
                @Html.ValidationMessageFor(m => m.LastName)
            </div>
​
            <div class="input-group date-of-birth">
                @Html.LabelFor(m => m.DateOfBirth)
                @Html.TextBoxFor(m => m.DateOfBirth)
                @Html.ValidationMessageFor(m => m.DateOfBirth)
            </div>
                
            <div class="input-group donation-amount-container">
                @Html.LabelFor(m => m.Donation)
                @Html.TextBoxFor(m => m.Donation, new { @type = "number", @class = "donation-input" })
                @Html.ValidationMessageFor(m => m.Donation)
            </div>
            
            <div class="input-group country-of-residence">
                @Html.LabelFor(m => m.CountryOfResidenceId)
                @Html.DropDownListFor(m => m.CountryOfResidenceId, Model.Countries)
                @Html.ValidationMessageFor(m => m.CountryOfResidenceId)
            </div>
        
            <button type="submit">Save quote</button>
        }
        
        <script>            
            var 
                donationInput = document.querySelector(".donation-input"),
                firstRun = true,
                container = document.querySelector(".donation-amount-container"),
                thankYouDiv = document.createElement("div");
            
            donationInput.addEventListener("change", function() {
                var 
                    self = this;
            
                $.ajax({
                    url: '@Url.RouteUrl(new { action="GetThankYouMessage", controller="Quote"})',
                    data: { donationAmount: self.value },
                    dataType: "json",
                    // contentType: "application/x-www-form-urlencoded",
                    type: "GET",
                    success: function(jqXHR, textStatus, errorThrown) {                 
                        if (firstRun) {
                            container.appendChild(thankYouDiv);
                            firstRun = false;
                            thankYouDiv.className = thankYouDiv.className + " donation-thank-you-message";
                        }
            
                        thankYouDiv.innerHTML = jqXHR;
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('error');
                    }
                });
            }, false);
            
            
            $(".date-of-birth input[type='text']").datepicker({
                dateFormat: "dd-mm-yy"
            });
            
        </script>
    </body>
</html

using System;
using System.Web.Mvc;
using TravelInsuranceQuoteApp.ViewModels;

// Detect mouseup on donation and go to the server for a message to 
// thank the user for their intended donation - Use AJAX.
//
// Requires an event listener (use addEventListener('mouseup', fn, usecapture))
//
// Use $.ajax({})
//	

namespace TravelInsuranceQuoteApp.Controllers
{
	public class QuoteController : Controller
	{
		IDonationService _donationService;
		
		public QuoteController(IDonationService donationService)
		{
			_donationService = donationService;
		}
		
		public QuoteController()
			: this(new DonationService())
		{
		}
		
		[HttpGet]
		public ActionResult Index()
		{
			var quoteViewModel = new QuoteViewModel 
			{
				CountryOfResidenceId = 30
			};
			
			return View(quoteViewModel);
		}
		
		[HttpPost]
		public ActionResult SubmitQuote(QuoteViewModel model)
		{
			if (ModelState.IsValid && model.QuoteId == 0) 
			{
				return Redirect("Index");	
			}
			
			return View(model);
		}
		
		[HttpGet]
		public ActionResult GetThankYouMessage(decimal donationAmount)
		{
			var message = _donationService.GetThankYouMessage(donationAmount);
			return Json(message, JsonRequestBehavior.AllowGet);
		}
	}
	
	public interface IDonationService
	{
		string GetThankYouMessage(decimal donationAmount);
	}
	
	public class DonationService : IDonationService
	{
		public string GetThankYouMessage(decimal donationAmount)
		{
			if (donationAmount > 0 && donationAmount < 10)
			{
				return "Much appreciated";
			}
			if (donationAmount >= 10 && donationAmount < 100)
			{
				return "That is very generous";
			}
			if (donationAmount >= 100 && donationAmount < 1000)
			{
				return "You're awesome";
			}
			return "";
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using TravelInsuranceQuoteApp.ViewModels;
​
// Detect mouseup on donation and go to the server for a message to 
// thank the user for their intended donation - Use AJAX.
//
// Requires an event listener (use addEventListener('mouseup', fn, usecapture))
//
// Use $.ajax({})
//  
​
namespace TravelInsuranceQuoteApp.Controllers
{
    public class QuoteController : Controller
    {
        IDonationService _donationService;
        
        public QuoteController(IDonationService donationService)
        {
            _donationService = donationService;
        }
        
        public QuoteController()
            : this(new DonationService())
        {
        }
        
        [HttpGet]
        public ActionResult Index()
        {
            var quoteViewModel = new QuoteViewModel 
            {
                CountryOfResidenceId = 30
            };
            
            return View(quoteViewModel);
        }
        
        [HttpPost]
        public ActionResult SubmitQuote(QuoteViewModel model)
        {
            if (ModelState.IsValid && model.QuoteId == 0) 
            {
                return Redirect("Index");   
            }
            
            return View(model);
        }
        
        [HttpGet]
        public ActionResult GetThankYouMessage(decimal donationAmount)
        {
            var message = _donationService.GetThankYouMessage(donationAmount);
            return Json(message, JsonRequestBehavior.AllowGet);
        }
    }
    
    public interface IDonationService
    {
        string GetThankYouMessage(decimal donationAmount);
    }
    
    public class DonationService : IDonationService
    {
        public string GetThankYouMessage(decimal donationAmount)
        {
            if (donationAmount > 0 && donationAmount < 10)
            {
                return "Much appreciated";
            }
            if (donationAmount >= 10 && donationAmount < 100)
            {
                return "That is very generous";
            }
            if (donationAmount >= 100 && donationAmount < 1000)
            {
                return "You're awesome";
            }
            return "";
        }
    }
}

View in Full Screen

Item that only appeared once is: 8
Number of items in the original collection: 11
Number of items in the dictionary: 6

Last Run:	7:02:34 am
Compile:	0.009s
Execute:	0.05s
Memory:	3.18Mb
CPU:	0.059s

View IL Code