table and validation | C# Online Compiler

table and validation by Tridip

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

namespace HelloWorldMvcApp
{
	public class MainViewModel
    {
        public List<Student> Students { get; set; }
        public int SelectedState = 0;
        public int SelectedCity = 0;
    }

    public class Student
    {
        [Required]
        public int ID { get; set; }

        [Required]
        public string Name { get; set; }

        [Required]
        public int StateID { get; set; }

        [Required]
        public int CityID { get; set; }
        public List<States> States { get; set; }
        public List<Cities> Cities { get; set; }
    }

    public class States
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    public class Cities
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

Model

​x
 
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
​
namespace HelloWorldMvcApp
{
    public class MainViewModel
    {
        public List<Student> Students { get; set; }
        public int SelectedState = 0;
        public int SelectedCity = 0;
    }
​
    public class Student
    {
        [Required]
        public int ID { get; set; }
​
        [Required]
        public string Name { get; set; }
​
        [Required]
        public int StateID { get; set; }
​
        [Required]
        public int CityID { get; set; }
        public List<States> States { get; set; }
        public List<Cities> Cities { get; set; }
    }
​
    public class States
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
​
    public class Cities
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

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

		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.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>


@using (Html.BeginForm("Index", "Home",FormMethod.Post))
{ 
<div>
    <table>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>State</td>
            <td>City</td>
        </tr>
        @for (int i = 0; i < Model.Students.Count; i++)
        {
            <tr>
                <td>
                    @*<input type="text" value="@Model.Students[i].ID" />*@
                @Html.EditorFor(m=>m.Students[i].ID)
                @Html.ValidationMessageFor(m => m.Students[i].ID)
                </td>

                <td>
                @*<input type="text" value="@Model.Students[i].Name" />*@
                    @Html.EditorFor(m => m.Students[i].Name)
                    @Html.ValidationMessageFor(m => m.Students[i].Name)
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Students[i].StateID, new SelectList(Model.Students[i].States, "ID", "Name", Model.Students[i].StateID), "-- Select States--", new { @class = "edit-mode" })
                    @Html.ValidationMessageFor(m => m.Students[i].StateID)
                </td>
                <td>
                   @Html.DropDownListFor(m => m.Students[i].CityID, new SelectList(Model.Students[i].Cities, "ID", "Name", Model.Students[i].CityID), "--Select States--", new { @class = "edit-model" })
                    @Html.ValidationMessageFor(m => m.Students[i].CityID)
                </td>
            </tr>
        }
    </table>
</div>
 <p><input type="submit" value="Submit" /></p>
}

<style>
.hidden
{
	display:none;
}	
</style>
	
<script>
$("span[class='field-validation-error']").each(function () {

            $(this).addClass("hidden");//Add class hidden to hide  @@Html.ValidationMessageFor(model => model.xyz) if using bootstrap , else use css
            var inputID = $(this).attr("data-valmsg-for");//get the id of the input field for which this validation prompted
            var validationMessage = $(this).html();//Get validation message for input filed which is prompted          
            //$("#" + inputID).tooltip({ 'trigger': 'hover', 'title': validationMessage });//Trigger the tooltip now, if using bootstrap.

                      //******OR*******

            $("#" + inputID).attr("tooltip",validationMessage);
              });
</script>

View

 
@model HelloWorldMvcApp.MainViewModel
@{
    Layout = null;
}
​
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.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>
​
​
@using (Html.BeginForm("Index", "Home",FormMethod.Post))
{ 
<div>
    <table>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>State</td>
            <td>City</td>
        </tr>
        @for (int i = 0; i < Model.Students.Count; i++)
        {
            <tr>
                <td>
                    @*<input type="text" value="@Model.Students[i].ID" />*@
                @Html.EditorFor(m=>m.Students[i].ID)
                @Html.ValidationMessageFor(m => m.Students[i].ID)
                </td>
​
                <td>
                @*<input type="text" value="@Model.Students[i].Name" />*@
                    @Html.EditorFor(m => m.Students[i].Name)
                    @Html.ValidationMessageFor(m => m.Students[i].Name)
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Students[i].StateID, new SelectList(Model.Students[i].States, "ID", "Name", Model.Students[i].StateID), "-- Select States--", new { @class = "edit-mode" })
                    @Html.ValidationMessageFor(m => m.Students[i].StateID)
                </td>
                <td>
                   @Html.DropDownListFor(m => m.Students[i].CityID, new SelectList(Model.Students[i].Cities, "ID", "Name", Model.Students[i].CityID), "--Select States--", new { @class = "edit-model" })
                    @Html.ValidationMessageFor(m => m.Students[i].CityID)
                </td>
            </tr>
        }
    </table>
</div>
 <p><input type="submit" value="Submit" /></p>
}
​
<style>
.hidden
{
    display:none;
}   
</style>
    
<script>
$("span[class='field-validation-error']").each(function () {
​
            $(this).addClass("hidden");//Add class hidden to hide  @@Html.ValidationMessageFor(model => model.xyz) if using bootstrap , else use css
            var inputID = $(this).attr("data-valmsg-for");//get the id of the input field for which this validation prompted
            var validationMessage = $(this).html();//Get validation message for input filed which is prompted          
            //$("#" + inputID).tooltip({ 'trigger': 'hover', 'title': validationMessage });//Trigger the tooltip now, if using bootstrap.
​
                      //******OR*******
​
            $("#" + inputID).attr("tooltip",validationMessage);
              });
</script>

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

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
			public ActionResult Index()
        	{
            MainViewModel oVm = new MainViewModel()
            {
                Students = new List<Student>() {
                    new Student
                    {
                        ID=1,
                        Name="JoyDev",
                        StateID=1,
                        CityID=1,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }

                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Alipur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Asansol"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Andul"
                            }

                        }
                    },

//***********
                    new Student
                    {
                        ID=1,
                        Name="Mukti",
                        StateID=2,
                        CityID=1,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }

                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Janpur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Madhubani"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Kanti"
                            }

                        }
                    },
//***********
                    new Student
                    {
                        ID=1,
                        Name="Somnath",
                        StateID=3,
                        CityID=2,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }

                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Chandapur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Dhankauda"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Konarak"
                            }

                        }
                    }


                }

            };


            return View(oVm);
        }
		
	}
}

Controller

 
using HelloWorldMvcApp;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
            public ActionResult Index()
            {
            MainViewModel oVm = new MainViewModel()
            {
                Students = new List<Student>() {
                    new Student
                    {
                        ID=1,
                        Name="JoyDev",
                        StateID=1,
                        CityID=1,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }
​
                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Alipur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Asansol"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Andul"
                            }
​
                        }
                    },
​
//***********
                    new Student
                    {
                        ID=1,
                        Name="Mukti",
                        StateID=2,
                        CityID=1,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }
​
                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Janpur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Madhubani"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Kanti"
                            }
​
                        }
                    },
//***********
                    new Student
                    {
                        ID=1,
                        Name="Somnath",
                        StateID=3,
                        CityID=2,
                        States=new List<States>()
                        {
                            new States
                            {
                                ID=1,
                                Name="WestBengal",
                            },
                            new States
                            {
                                ID=2,
                                Name="Bihar",
                            },
                            new States
                            {
                                ID=3,
                                Name="Orrisa",
                            }
​
                        },
                        Cities=new List<Cities>()
                        {
                            new Cities
                            {
                                ID=1,
                                Name="Chandapur"
                            },
                            new Cities
                            {
                                ID=2,
                                Name="Dhankauda"
                            },
                            new Cities
                            {
                                ID=3,
                                Name="Konarak"
                            }
​
                        }
                    }
​
​
                }
​
            };
​
​
            return View(oVm);
        }
        
    }
}

View in Full Screen

Vad heter du?

Last Run:	1:41:31 pm
Compile:	0.122s
Execute:	0s
Memory:	32kb
CPU:	0s

View IL Code