asp classic with java script loop | C# Online Compiler

asp classic with java script loop by YuleTide Camel

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class Group
	{
		public int Id{get;set;}
		public string Name{get;set;} 
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class Group
    {
        public int Id{get;set;}
        public string Name{get;set;} 
    }
}

@model IEnumerable<HelloWorldMvcApp.Group>
@{
	Layout = null;
}

<html>
	<head>

		<title>Bootstrap 101 Template</title>

	</head>
	
	<body>
		@foreach(var group in Model)
		{
			<input 
				class="clsFormButton groupButton" 
				type="button" 
				value="@group.Name" 
				style="width: 100px" 
				data-name="@group.Name" 
		        data-id="@group.Id" 
				/>
		}
		
		<script type="text/javascript">
			function button_click_handler(event){
			  var button = event.srcElement;
			  
			  var id = button.getAttribute("data-id");
			  var name = button.getAttribute("data-name");
			  
			  alert("DEBUG: clicked on - id=" + id + "   name=" + name);
			
			}
			
			
			function page_load(){
			  var groupButtons = document.getElementsByClassName('groupButton');
			  for(var i =0;i<groupButtons.length;i++){
			    var button = groupButtons[i];
				button.addEventListener('click',button_click_handler);
               }
			}
			
			document.addEventListener('DOMContentLoaded', page_load);
			
		</script>
	</body>
</html>

View

 
@model IEnumerable<HelloWorldMvcApp.Group>
@{
    Layout = null;
}
​
<html>
    <head>
​
        <title>Bootstrap 101 Template</title>
​
    </head>
    
    <body>
        @foreach(var group in Model)
        {
            <input 
                class="clsFormButton groupButton" 
                type="button" 
                value="@group.Name" 
                style="width: 100px" 
                data-name="@group.Name" 
                data-id="@group.Id" 
                />
        }
        
        <script type="text/javascript">
            function button_click_handler(event){
              var button = event.srcElement;
              
              var id = button.getAttribute("data-id");
              var name = button.getAttribute("data-name");
              
              alert("DEBUG: clicked on - id=" + id + "   name=" + name);
            
            }
            
            
            function page_load(){
              var groupButtons = document.getElementsByClassName('groupButton');
              for(var i =0;i<groupButtons.length;i++){
                var button = groupButtons[i];
                button.addEventListener('click',button_click_handler);
               }
            }
            
            document.addEventListener('DOMContentLoaded', page_load);
            
        </script>
    </body>
</html>
​

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

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			var groups = new List<Group>()
			{
				new Group{Id=0,Name="group 1"},
				new Group{Id=1,Name="group 2"},
				new Group{Id=3,Name="group 3"},
			};
			return View(groups);
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var groups = new List<Group>()
            {
                new Group{Id=0,Name="group 1"},
                new Group{Id=1,Name="group 2"},
                new Group{Id=3,Name="group 3"},
            };
            return View(groups);
        }
    }
}

View in Full Screen

View IL Code