view model example | C# Online Compiler

view model example by Anonymous

using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class QuestionViewModel
	{
		public List<Question> Questions {get; set;}
	}
	
	
	public class Question
	{
		public int QuestionID {get; set;}
		public string QuestionText {get; set;}
		public string Answer {get; set;}
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class QuestionViewModel
    {
        public List<Question> Questions {get; set;}
    }
    
    
    public class Question
    {
        public int QuestionID {get; set;}
        public string QuestionText {get; set;}
        public string Answer {get; set;}
    }
}

@model HelloWorldMvcApp.QuestionViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		
	</head>
	
	<body>
		<div class="container">
			<div class="form-group">
				<div class="col-sm-8">
					<ul class="list-group questions">
                    @for(int i = 0; i < Model.Questions.Count; i++)
                    {
                        <li id="question_@Model.Questions[i].QuestionID" class="@(i > 0 ? "hidden" : "") list-group-item list-group-item-heading list-group-item-warning">
							@Model.Questions[i].QuestionText
                            <input type="text" />
                            @if (i < Model.Questions.Count - 1)
                            {
                                <button class="nextQuestion">Next Question</button>
                            }
                        </li>
                    }
                    
                </ul>
                <button id="submitAnswers">Submit Answers</button>
				</div>
        	</div>
		</div>

		<!-- JS includes -->
		<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>
    $(document).ready(function ()
    {

        $('.nextQuestion').on('click', function ()
        {
            $(this).closest('li').addClass('hidden').next('li').removeClass('hidden');
        });

        $('#submitAnswers').on('click', function()
        {
            var answers = []
            $('input').each(function ()
            {
                answers.push($(this).val());
            });
            $.ajax({
                type: 'POST',
                url: '/testing/saveAnsers',
                traditional: true,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(answers),
                success: function ()
                {
                },
                error: function ()
                {


                }
            });
        });
    });
</script>
	</body>
</html>

View

 
@model HelloWorldMvcApp.QuestionViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        
    </head>
    
    <body>
        <div class="container">
            <div class="form-group">
                <div class="col-sm-8">
                    <ul class="list-group questions">
                    @for(int i = 0; i < Model.Questions.Count; i++)
                    {
                        <li id="question_@Model.Questions[i].QuestionID" class="@(i > 0 ? "hidden" : "") list-group-item list-group-item-heading list-group-item-warning">
                            @Model.Questions[i].QuestionText
                            <input type="text" />
                            @if (i < Model.Questions.Count - 1)
                            {
                                <button class="nextQuestion">Next Question</button>
                            }
                        </li>
                    }
                    
                </ul>
                <button id="submitAnswers">Submit Answers</button>
                </div>
            </div>
        </div>
​
        <!-- JS includes -->
        <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>
    $(document).ready(function ()
    {
​
        $('.nextQuestion').on('click', function ()
        {
            $(this).closest('li').addClass('hidden').next('li').removeClass('hidden');
        });
​
        $('#submitAnswers').on('click', function()
        {
            var answers = []
            $('input').each(function ()
            {
                answers.push($(this).val());
            });
            $.ajax({
                type: 'POST',
                url: '/testing/saveAnsers',
                traditional: true,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(answers),
                success: function ()
                {
                },
                error: function ()
                {
​
​
                }
            });
        });
    });
</script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		


		[HttpGet]
		public ActionResult Index()
		{				
			var vm = new QuestionViewModel()
			{
				Questions = new List<Question>()
				{ 
					new Question()
					{
						QuestionID = 1,
						QuestionText = "What is your name?"
					}, 
					new Question()
					{
						QuestionID = 2,
						QuestionText = "What is your favorite color?"
					},
					new Question()
					{
						QuestionID = 3,
						QuestionText = "What is the air speed velocity of an unlaiden swallow?"
					}
				}
			};
			
										
			return View(vm);
		}

	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        
​
​
        [HttpGet]
        public ActionResult Index()
        {               
            var vm = new QuestionViewModel()
            {
                Questions = new List<Question>()
                { 
                    new Question()
                    {
                        QuestionID = 1,
                        QuestionText = "What is your name?"
                    }, 
                    new Question()
                    {
                        QuestionID = 2,
                        QuestionText = "What is your favorite color?"
                    },
                    new Question()
                    {
                        QuestionID = 3,
                        QuestionText = "What is the air speed velocity of an unlaiden swallow?"
                    }
                }
            };
            
                                        
            return View(vm);
        }
​
    }
}

View in Full Screen

provenance is: WRONG_Name.Method_Name

Last Run:	8:56:08 am
Compile:	0.006s
Execute:	0.05s
Memory:	2.72Mb
CPU:	0.056s

View IL Code