Solved

Creating HTML Table for ASP.NET MVC and Adding data to it

Posted on 2011-09-30
3
309 Views
Last Modified: 2012-06-27
Hi

Can you please suggest me how to create HTML Table and Assign the data to it by looping.
0
Comment
Question by:praveen1981
3 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36890289
0
 
LVL 9

Accepted Solution

by:
richard_hughes earned 500 total points
ID: 36890634
Hello praveen1981

In MVC 2 in C# 3.5, try the attached code:

You can see that there is a model called TableData. In the controller, this model is created as a list and then passed into the 'Table' view. Inside the view, we loop through each of the TableData items and then render them into the HTML.

Notice though, the first line in the view:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IList<MvcApplication1.Models.TableData>>" %>

The view inherits an IList<MvcApplication1.Models.TableData> This is important as we want a list of TableData, rather than just a single item.

Thanks,

Richard Hughes
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
	[HandleError]
	public class HomeController : Controller
	{
		public ActionResult Index()
		{
			ViewData["Message"] = "Welcome to ASP.NET MVC!";

			return View();
		}

		public ActionResult About()
		{
			return View();
		}

		public ActionResult Table()
		{
			var rows = new List<TableData>()
			{
				new TableData()
				{
					Id = 1,
					Name = "Bob Jones",
					IsActive = true,
				},
				new TableData()
				{
					Id = 2,
					Name = "John Barker",
					IsActive = false,
				},
				new TableData()
				{
					Id = 3,
					Name = "Jane Smith",
					IsActive = true,
				},
				new TableData()
				{
					Id = 4,
					Name = "Barry Wattson",
					IsActive = true,
				},
			};

			return this.View(rows);
		}
	}
}

Open in new window

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

namespace MvcApplication1.Models
{
	public class TableData
	{
		public int Id { get; set; }
		public string Name { get; set; }
		public bool IsActive { get; set; }
	}
}

Open in new window

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IList<MvcApplication1.Models.TableData>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	ViewPage1
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <table>
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Is Active</th>
			</tr>
		</thead>
		<% foreach (var row in this.Model)
		   { %>
		   <tr>
				<td><%: row.Id %></td>
				<td><%: row.Name %></td>
				<td><%: row.IsActive %></td>
		   </tr>
		<% } %>
	</table>

</asp:Content>

Open in new window

0
 

Author Closing Comment

by:praveen1981
ID: 36915811
yes, it solved
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now