@model HelloWorldMvcApp.QuestionListViewModel
<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())
foreach (var group in Model.QuestionList.GroupBy(x => x.AreaName))
var questionList = group.ToList();
for (int i = 0; i < questionList.Count(); i++)
@Html.DisplayFor(x => questionList[i].Question)
@Html.HiddenFor(x => questionList[i].StnAssureQuestionId)
@Html.DropDownListFor(model => questionList[i].Score, new SelectList(questionList[i].Scores, "ScoreId", "ScoreNum", questionList[i].Score), "Please Select", new { @class = "form-control", style="padding:0;"})
@Html.ValidationMessageFor(model => questionList[i].Score, "", new { @class = "text-danger" })
@Html.EditorFor(x => questionList[i].Comments, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => questionList[i].Comments, "", new { @class = "text-danger" })
<button type="button" class="btn btn-success submit">Ask</button>
<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>
<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">