View without using razor syntax. How to bind model?

Question

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 var Employees = @Html.Raw(Json.Encode(@Model)); alert(Employees); for ( var i = 0; i alert(Employees[i].Lastname); alert(Employees[i].Firstname); } "width:50%" > Empployee ID Lastname Firstname @*@foreach ( var e in Model) { @e.EmployeeID @e.LastName @e.FirstName }*@

Sachin Singh · 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 $( function () { $.ajax({ type: "get" , url: "/ControllerName/GetEmployees" , dataType: "json" , contentType: "application/json;charset=utf-8" , traditional: true , cache: false , success: function (data) { $(data).each( function (i, y) { var tr = document.createElement( "tr" ); $(tr).append( " " + y.Id + " " ).append( " " + y.FirstName + " " ).append( " " + y.LastName+ " " ); $( "#myTable" ).append(tr); }); } }) }) This is 100% working code, just copy paste and run.

Rijwan Ansari · Answer

Hi, You can use ajax and bind with html something like this. Sample: $(document).ready(function () { //Call EmpDetails jsonResult Method $.getJSON( "Home/EmpDetails" , function (json) { var tr; //Append each row to html table for (var i = 0; i tr = $( ' ' ); tr.append( " " + json[i].Id + " " ); tr.append( " " + json[i].Name + " " ); tr.append( " " + json[i].City + " " ); tr.append( " " + json[i].Address + " " ); $( 'table' ).append(tr); } }); }); class = "table table-bordered table-condensed table-hover table-striped" > Id Name City Address controller code: ublic JsonResult EmpDetails() { //Creating List List ObjEmp = new List () { //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/

View without using razor syntax. How to bind model?

Answers (2)