@model HelloWorldMvcApp.SampleViewModel
<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, .input-validation-error {
<h1>Hello Candidate!</h1>
Please complete next task:
<li>We will be developing very simple question app</li>
<li>Our app will allow user to enter a question and will provide random answer</li>
<li>Implement a model class, model should contain Question and Answer string fields</li>
<li>Model should support validation rules for Question property, use attributes</li>
<li>Add form with a label and text input controls, that will be a question input</li>
<li>Bind controls to model's Question property</li>
<li>Add Http helper to add validation message for model's Question property</li>
<li>Add some CSS styling to show model validation error in red color</li>
<li>Page layout should use bootstrap column model, label and text input should be grouped, use bootstrap classes</li>
<li>Add "Ask" button to make AJAX call</li>
<li>Implement JQuery AJAX call, it should call controller method and pass test input value as a parameter, use POST method</li>
<li>Implement server method in controller to handle AJAX call, method should accept Question parameter</li>
<li>Server method should return random answer, use simple list of strings as answers, method should return result as Json</li>
<li>To display result use "alert alert-warning" element</li>
<li>Element contains a picture and "alert-content" span, use it to show answer text</li>
<li>Implement some JavaScript code to show and hide answer block, use bootstrap "fade in" class to show answer block</li>
@using (Html.BeginForm("Test", "Home", FormMethod.Post, new { @class= "formToSubmit" })) {
<div class="form-group row">
@Html.LabelFor(m => m.Question)
@Html.TextBoxFor(m => m.Question, new { @class = "question" })
@Html.ValidationMessageFor(m => m.Question)
<input id="submit" type="submit" value="Submit" />
<input id="submit" type="button" onclick="show()" value="Show" />
<div id="displayResponse" class="alert alert-warning fade">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/7/74/20090513055947%21Ambox_warning_yellow.svg/120px-Ambox_warning_yellow.svg.png" alt="some picture here" />
<span class="alert-content"></span>
<input id="submit" type="button" onclick="hide();" value="Hide" />
<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">
$(".formToSubmit").submit(function (event) {
if ($(".formToSubmit").valid())
let dataInJson = JSON.stringify({ "question": $(".question")[0].value });
url: '@Url.RouteUrl(new {action="Test", controller="Home"})',
contentType: 'application/json; charset=utf-8',
}).done(function (response)
$('#displayResponse .alert-content').html("The response is: <b>" + response + "</b>")
$('#displayResponse').removeClass('in');
//$('#displayResponse').fadeOut(500);
$('#displayResponse').addClass('in');
//$('#displayResponse').fadeIn(500);