View without using razor syntax. How to bind model?

Tanvi Jain

I want to build view using html/javascript/jquery and do not want to use razor syntax. How do I bind my model ? How do I iterate list in view to display rows?

Controller

public ActionResult Index()
{
List employeeList = new List();
string CS = ConfigurationManager.ConnectionStrings["mvcappDbConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("SELECT * FROM Employee", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
var employee = new Employee();
employee.EmployeeID = Convert.ToInt32(rdr["EmployeeID"]);
employee.LastName = rdr["LastName"].ToString();
employee.FirstName = rdr["FirstName"].ToString();
employeeList.Add(employee);
}
}
return View(employeeList);

View:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IEnumerable
Employee list
"width:50%">
Empployee ID
Lastname
Firstname
@*@foreach (var e in Model)
{
@e.EmployeeID
@e.LastName
@e.FirstName
}*@

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
when you don't want to use the Model then there is no point to make the view strongly typed, instead use the Ajax function inside a ready function so that the request fires as soon as the view launches.

Step 1. Modify the Action as
public ActionResult Index()
{
return View();
}
public ActionResult GetEmployees()
{
List employeeList = new List();
string CS = ConfigurationManager.ConnectionStrings["mvcappDbConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("SELECT * FROM Employee", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
var employee = new Employee();
employee.EmployeeID = Convert.ToInt32(rdr["EmployeeID"]);
employee.LastName = rdr["LastName"].ToString();
employee.FirstName = rdr["FirstName"].ToString();
employeeList.Add(employee);
}
return Json(employeeList ,JsonRequestBehaviour.AllowGet);
}
Step 2. Modify the index view and use Ajax as shown below.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}



Employee list


"width:50%" id="myTable">

Empployee ID
Lastname
Firstname
This is 100% working code, just copy paste and run.
Rijwan Ansari5y ago
Hi,

You can use ajax and bind with html something like this.
Sample:
class="table table-bordered table-condensed table-hover table-striped">


        Id
        Name
        City
        Address




controller code:
ublic JsonResult EmpDetails()
    {
        //Creating List
        List < Employee > ObjEmp = new List < Employee > ()
        {
            //Adding records to list
            new Employee
            {
                Id = 1, Name = "Vithal Wadje", City = "Latur", Address = "Kabansangvi"
            },
            new Employee
            {
                Id = 2, Name = "Sudhir Wadje", City = "Mumbai", Address = "Kurla"
            }
        };
        //return list as Json
        return Json(ObjEmp, JsonRequestBehavior.AllowGet);
    }
Check this for example:
https://www.c-sharpcorner.com/UploadFile/0c1bb2/bind-html-table-using-json-data-in-Asp-Net-mvc/