@ModelType HourOfCode.Models.ReportCardViewModel
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
.field-validation-error {
background-color: #336699;
<div class="col-md-10 col-md-offset-2">
@Using (Html.BeginForm("Index", "Home", FormMethod.Post, New With {.class = "form-horizontal"}))
@For i = 0 To Model.ReportCardMarks.Count - 1
@<div class="form-group">
@Html.LabelFor(Function(Model) Model.ReportCardMarks(index).Mark, Model.ReportCardMarks(index).CourseName, New With {.Class = "col-sm-2 control-label"})
@Html.TextBoxFor(Function(Model) Model.ReportCardMarks(index).Mark, new With { .class = "form-control"})
@Html.ValidationMessageFor(Function(Model) Model.ReportCardMarks(index).Mark)
@Html.HiddenFor(Function(Model) Model.ReportCardMarks(index).CourseName)
@<button class="submit" type="button">Calculate GPA</button>
<div Class="alert alert-success fade">
<span id = "gpa" ></span>
<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) {
var msg = "Your GPA is: " + txt;
$('.alert').addClass('in');
$('.alert').removeClass('in');
$('#Question').change(closeAlert);
$('#Question').keyup(closeAlert);
$('.submit').click(function(e){
url: '@Url.RouteUrl(new With { .Action="CalculateGPA", .Controller="Home"})',
data: $("form").serialize(),
//contentType: "application/json; charset=utf-8",
success: function(resp) {