Kendo Data in C# Code

[jp2code]

I'm new at my company, but a 50-year old seasoned C# Windows Forms developer.

 

I have been assigned to create an ASP.NET MVC Report for a web page using MVC 4.

 

Say I have a school database. I can pull a list of student in the C# code easily using SqlCommand and manipulate it in any way ...in the C# code. All of the examples show how to do this in javascript - which I am an idiot with. My new company is paying me to develop, not to spend days trying to figure out javascript.

 

On the MVC Report, they want 4 tabs:

1) All Students (Default View),

2) Elementary School Students (grades 1 - 5),

3) Middle School Students (grades 6 - 8), and

4) High School Students (grades 9 - 12).

 

Each tab will display similar information. There will be 4 pie charts at the top with a grid of all the data at the bottom. For the pie charts:

1) Top 10 Most Taken Classes,

2) Top 10 GPA Students,

3) Top 10 Students with Days Missed, and

4) Top 10 Classes with Highest Grades.

 

Once the data is collected one time, it would be simple to show this data in different tabs using a Windows Forms application.

 

How would I do this in ASP.NET MVC where all of the code examples show everything done from the RAZR @Html.Kendo() prompt?

 

Is there a way to use my C# skills for this, or does Kendo only work from javascript?

 

```` c#

        private readonly String _CONNECTIONSTRING = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
        private readonly String _GETSTUDENTINFO = "SELECT STUDENTID, FIRSTNAME, LASTNAME, GRADELEVEL, CLASSNAME, CLASSGPA, ABSENTCOUNT FROM JOHNSONISD.STUDENTTABLE;";

        private List<Student> studentList;

        public void Test() {
            studentList = GetStudents();
            var elementaryStudents = studentList.Where(x => x.GradeLevel < 6);
            var middleSchoolStudents = studentList.Where(x => 5 < x.GradeLevel && x.GradeLevel < 9);
            var highSchoolStudents = studentList.Where(x => 8 < x.GradeLevel);
        }

        private List<Student> GetStudents() {
            var result = new List<Student>();
            var table = new DataTable();
            using (var da = new SqlDataAdapter(_GETSTUDENTINFO, new SqlConnection(_CONNECTIONSTRING))) {
                da.Fill(table);
            }
            foreach (DataRow row in table.Rows) {
                var studentId = String.Format("{0}", row["STUDENTID"]);
                var firstName = String.Format("{0}", row["FIRSTNAME"]);
                var lastName = String.Format("{0}", row["LASTNAME"]);
                var strLevel = String.Format("{0}", row["GRADELEVEL"]);
                int gradeLevel;
                int.TryParse(strLevel, out gradeLevel);
                var className = String.Format("{0}", row["CLASSNAME"]);
                var strGpa = String.Format("{0}", row["CLASSGPA"]);
                double classGpa;
                double.TryParse(strGpa, out classGpa);
                var strabsent = String.Format("{0}", row["ABSENTCOUNT"]);
                int absentCount;
                int.TryParse(strabsent, out absentCount);
                var student = new Student() {
                    StudentId = studentId,
                    FirstName = firstName,
                    LastName = lastName,
                    GradeLevel = gradeLevel,
                    ClassName = className,
                    ClassGpa = classGpa,
                    AbsentCount = absentCount,
                };
                result.Add(student);
            }
            return result;
        }

        public class Student {
            public String StudentId { get; set; }
            public String FirstName { get; set; }
            public String LastName { get; set; }
            public int GradeLevel { get; set; }
            public String ClassName { get; set; }
            public double ClassGpa { get; set; }
            public int AbsentCount { get; set; }
        }
````

[Ivan Danchev]

Hello,

The components in UI for ASP.NET MVC are declared using Razor syntax. This allows you to configure a component, including bind it to data, without using JavaScript. You would use JavaScript, if you need to use the component's client-side API, or handle an event.

Here's an exemplary declaration of a TabStrip, with a Grid nested in its first tab:

@(Html.Kendo().TabStrip()
	.Name("tabstrip")
	.Items(items =>
	{
		items.Add().Text("Tab1").Selected(true).Content(@<text>
			<h3>Grid:</h3>
			@(Html.Kendo().Grid<TelerikMvcApp129.Models.OrderViewModel>()
				.Name("grid1")
				.Columns(columns =>
				{
							columns.Bound(p => p.OrderID).Filterable(false);
							columns.Bound(p => p.Freight);
							columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
							columns.Bound(p => p.ShipName);
							columns.Bound(p => p.ShipCity);
						})
				.Pageable()
				.Sortable()
				.Scrollable()
				.Filterable()
				.HtmlAttributes(new { style = "height:550px;" })
				.DataSource(dataSource => dataSource
					.Ajax()
					.PageSize(20)
					.Read(read => read.Action("Orders_Read", "Home"))
				)
			)
		</text>);
		items.Add().Text("Tab2");
		items.Add().Text("Tab3");
	})
)

As you can see, the Grid is configured to use remote binding:

.Read(read => read.Action("Orders_Read", "Home"))

On loading the page, the Grid will call the Orders_Read action in the Home controller. So this is the way to populate it with data from the server.

In a similar fashion, you can add Html or other components (e.g., charts) to the tabs.

Regards,
Ivan Danchev
Progress Telerik