@model HelloWorldMvcApp.AggregatedUsageVM
<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 {
<div class="col-md-6 col-md-offset-3">
@using (Html.BeginForm())
@Html.CheckBoxFor(m => m.HasHQSA, new { id = "" })
@Html.LabelFor(m => m.HasHQSA)
@Html.ValidationMessageFor(m => m.HasHQSA)
<h4>@Html.DisplayNameFor(m => m.SelectedCommodity)</h4>
@foreach(var commodity in Model.CommodityOptions)
@Html.RadioButtonFor(m => m.SelectedCommodity, commodity.ID, new { id = "" })
<span>@commodity.Name</span>
@Html.ValidationMessageFor(m => m.SelectedCommodity)
<div class="form-group durations">
<h4>@Html.DisplayNameFor(m => m.SelectedDuration)</h4>
@foreach(var duration in Model.DurationOptions)
@Html.RadioButtonFor(m => m.SelectedDuration, duration.ID, new { id = "", @class = "duration" })
<span>@duration.Name</span>
@Html.ValidationMessageFor(m => m.SelectedDuration)
var isHidden = Model.SelectedDuration != 4;
<div class="form-group customduration" hidden="@isHidden">
@Html.LabelFor(m => m.StartDate)
@Html.TextBoxFor(m => m.StartDate, new { id = "", @class = "form-control" })
@Html.ValidationMessageFor(m => m.StartDate)
@Html.LabelFor(m => m.EndDate)
@Html.TextBoxFor(m => m.EndDate, new { id = "", @class = "form-control" })
@Html.ValidationMessageFor(m => m.EndDate)
<button type="submit" class="btn btn-success submit">Generate Report</button>
<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">
$('.duration').click(function() {
var container = $(this).closest('.durations').next('.customduration');