در این مقاله قصد داریم اطلاعات جدول را در فرمت های مختلف نمایش دهیم در این مقاله 3 روش یکی به صورت foreach یکی دیگر به صورت webgrid یکی دیگر به صورت json نمایش دهیم.

3 روش نمایش اطلاعات جدول:

1-استفاده از دستور foreach

2-استفاده از webgrid

3-استفاده از jquery

ابتدا یک پروژه ی empty از نوع mvc ایجاد نمایید.

حالا یک controller جدید ایجاد نمایید:

یک mvc5 controller empty انتخاب نمایید:

حالا نام controller مورد نظر را می نویسیم:

روی action name مورد نظر راست کلیک نمایید و یک view اضافه نمایید:

حالا داخل پوشه ی model یک کلاس به صورت زیر ایجاد نمایید:

class Employee  
{  
  
    public int EmployeeId { get; set; }  
  
    public string FirstName { get; set; }  
  
    public string LastName { get; set; }  
  
    public string Email { get; set; }  
  
    public int Salary { get; set; }  
  
    public string Company { get; set; }  
  
    public string Dept { get; set; }  
  
} 

داخل controller home قطعه کد زیر را بنویسید:

public class HomeController : Controller  
{  
    private List<Employee> emp;  
    public HomeController()  
    {  
        emp = new List<Employee>()  
        {  
            new Employee()  
            { EmployeeId =1,FirstName="Rakesh",LastName="Kalluri", Email="raki.kalluri@gmail.com", Salary=30000, Company="Summit", Dept="IT" },  
            new Employee()  
            { EmployeeId =2,FirstName="Naresh",LastName="C", Email="Naresh.C@gmail.com", Salary=50000, Company="IBM", Dept="IT" },  
            new Employee()  
            { EmployeeId =3,FirstName="Madhu",LastName="K", Email="Madhu.K@gmail.com", Salary=20000, Company="HCl", Dept="IT" },  
            new Employee()  
            { EmployeeId =4,FirstName="Ali",LastName="MD", Email="Ali.MD@gmail.com", Salary=26700, Company="Tech Mahindra", Dept="BPO" },  
            new Employee()  
            { EmployeeId =5,FirstName="Chithu",LastName="Raju", Email="Chithu.Raju@gmail.com", Salary=25000, Company="Dell", Dept="BPO" },  
            new Employee()  
            { EmployeeId =6,FirstName="Nani",LastName="Kumar", Email="Nani.Kumar@gmail.com", Salary=24500, Company="Infosys", Dept="BPO" },  
  
        };  
    }  
    public ActionResult Index()  
    {  
  
        return View(emp);  
    }

نمایش داده های جدول با استفاده از فرمت foreach به صورت زیر خواهد بود:

@model System.Collections.Generic.IEnumerable<WebApplication1.Models.Employee>

@{
    ViewBag.Title = "Index";
}
<div dir="rtl"><b>نمایش جدول با foreach</b><br /></div>
<div dir="rtl">
    <a href="http://barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        <table class="table table-bordered table-responsive table-hover">
            <tr>
                <th>شماره کارمندی </th>
                <th>نام کارمند </th>
                <th>نام خانوادگی </th>
                <th>ایمیل</th>
                <th>حقوق</th>
                <th>کشور</th>
                <th>بخش</th>
            </tr>
            @foreach (var d in Model)
            {
                <tr>
                    <td>@d.EmployeeId</td>
                    <td>@d.FirstName</td>
                    <td>@d.LastName</td>
                    <td>@d.Email</td>
                    <td>@d.Salary</td>
                    <td>@d.Company</td>
                    <td>@d.Dept</td>

                </tr>
            }
        </table>
</div>

خروجی به صورت زیر خواهد بود:

نمایش نوع جدول با استفاده از webgrid:

حالا یک actionmethod به صورت زیر ایجاد نمایید:

public ActionResult WebGrid()  
{  
    return View(emp);  
  
} 

برای view هم از کدهای زیر استفاده می نماییم:

@model IEnumerable<WebApplication1.Models.Employee>

@{
    ViewBag.Title = "WebGrid";
}
<div dir="rtl"><b>نمایش جدول با استفاده از webgrid</b><br /></div>
<div dir="rtl">
    <a href="http://barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
       @{ var grid = new WebGrid(Model, canPage: false);}
        <div>

            @grid.GetHtml(tableStyle: "table table-bordered table-responsive table-hover",
    columns: grid.Columns(
                 grid.Column("EmployeeId", "Employee Id"),
                  grid.Column("FirstName", "First Name"),
                  grid.Column("LastName", "Last Name"),
                  grid.Column("Email", "Email"),
                  grid.Column("Salary", "Salary"),
                  grid.Column("Company", "Company"),
                  grid.Column("Dept", "Department") 
    )
    )
        </div>

</div>

داخل فایل routeconfig هم باید نام action را بنویسید:

خروجی به صورت زیر می باشد:

نمایش اطلاعات جدول با استفاده از فرمت نمایشی jsonview:

متدهای زیر را داخل یک controller جدید ایجاد نمایید به صورت زیر:

    public ActionResult JsonView()  
    {  
        return View();  
    }  
      
    public JsonResult EmployeeData()  
    {  
        return Json(emp, JsonRequestBehavior.AllowGet);  
    }  

داخل view مورد نظر هم کد های زیر را بنویسید:

@{
    ViewBag.Title = "JsonView";
}

<div dir="rtl"><b>نمایش داده مورد نظر با استفاده از json</b><br /></div>

<div dir="rtl">
    <a href="http://barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        <table dir="rtl" class="table table-bordered table-responsive table-hover" id="tblEmployee">
            <tr>
                <th>Employee Id </th>
                <th>First Name </th>
                <th>Last Name </th>
                <th>Email</th>
                <th>Salary</th>
                <th>Company</th>
                <th>Department</th>
            </tr>

        </table>
</div>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">


    $(document).ready(function () {
        GetEmployeeData();
    });
    function GetEmployeeData() {
        $.get('/Home/EmployeeData', {}, function (data) {
            var tblEmployee = $("#tblEmployee");
            $.each(data, function (index, item) {
                var tr = $("<tr></tr>");
                tr.html(("<td>"+item.EmployeeId+"</td>")
                + " " + ("<td>" + item.FirstName + "</td>")
                + " " + ("<td>" + item.LastName + "</td>")
                + " " + ("<td>" + item.Email + "</td>")
                + " " + ("<td>" + item.Salary + "</td>")
                + " " + ("<td>" + item.Company + "</td>")
                + " " + ("<td>" + item.Dept + "</td>"));
                tblEmployee.append(tr);
            });
        });
    } 

    </script>

داخل routeconfig هم باید نام action  مورد نظر خود را بنویسید:

خروجی به صورت زیر خواهد بود: