How to display records in Rows in ASP.NET MVC5

Question

Dear all,

 

   Compliment of the season, I am prety new to ASP.NET MVC but when through some tutorials and i am able to get my fingers on it step by step.

 I have some issue with the displaying my records in rows  below is my code from the Index.cshtml

@model System.Data.DataTable
@{
    ViewBag.Title = "Index";
}

<table class="table table-bordered table-striped table-responsive">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Other Name</th>
        <th>Email</th>
        <th>Address</th>
        <th>B Month</th>
        <th>Martal Status</th>
        <th>Member Status</th>
        <th>
            Edit
        </th>
        <th>
            Delete
        </th>


    </tr>
    <tr>

        @for (int i = 0; i < Model.Rows.Count; i++)
        {
            <td>@Model.Rows[i][1]</td>
            <td>@Model.Rows[i][2]</td>
            <td>@Model.Rows[i][3]</td>
            <td>@Model.Rows[i][4]</td>
            <td>@Model.Rows[i][5]</td>
            <td>@Model.Rows[i][6]</td>
            <td>@Model.Rows[i][7]</td>
            <td>@Model.Rows[i][8]</td>
            <td><a class="btn btn-primary" href="@Url.Action("Edit", "Member", new {@id=@Model.Rows[i][0] })" >Edit</a></td>
            <td><a class="btn btn-danger" href="@Url.Action("Delete", "Member", new {@id=@Model.Rows[i][0] })">Delete</a></td>
        }
    </tr>

</table>

<a href="@Url.Action("Create","Member")" class="btn btn-sm btn-primary">Add Member</a>

@*<button id="my-button" onclick="location.href='@Url.Action("YourActionName", "YourControllerName")'">Submit</button>*@

 my Model code is as follows (I am not using Entity Frame work)

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace HIGHGROUNDMCV.Models
{
  public   class MembersModel
    {
        public int ID { get; set; }
      [DisplayName("First Name")]
        public string FName { get; set; }
      [DisplayName("Last Name")]
        public string  LName { get; set; }
      [DisplayName("Other Name")]
        public string  OName { get; set; }
        public string  Email { get; set; }
        public string  Address { get; set; }
      [DisplayName("Month of Birth")]
        public int MOB { get; set; }
      [DisplayName("Marital Status")]
        public string  MStatus { get; set; }
      [DisplayName("Member Status")]
        public string  MembStatus { get; set; }
    }
}

then the result i am getting is as follows 

 

 

 I want the records to show in rows all show in a single row, please what am i doing wrong.

 

thank you for your help 

 

 

Answer 1

Hi,

 

Your problem is not complex it is very easy. You want to print the data row by row but in your screen shot data is printed in same for solve this problem use <tr> tag inside the for loop like. Keeping mind read my comments and use my below code

<table class="table table-bordered table-striped table-responsive">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Other Name</th>
<th>Email</th>
<th>Address</th>
<th>B Month</th>
<th>Martal Status</th>
<th>Member Status</th>
<th>
Edit
</th>
<th>
Delete
</th>
</tr>
--<tr>---Remove it from here and use it inside for loop
@for (int i = 0; i < Model.Rows.Count; i++)
{
<tr>--use here
<td>@Model.Rows[i][1]</td>
<td>@Model.Rows[i][2]</td>
<td>@Model.Rows[i][3]</td>
<td>@Model.Rows[i][4]</td>
<td>@Model.Rows[i][5]</td>
<td>@Model.Rows[i][6]</td>
<td>@Model.Rows[i][7]</td>
<td>@Model.Rows[i][8]</td>
<td><a class="btn btn-primary" href="@Url.Action("Edit", "Member", new {@id=@Model.Rows[i][0] })" >Edit</a></td>
<td><a class="btn btn-danger" href="@Url.Action("Delete", "Member", new {@id=@Model.Rows[i][0] })">Delete</a></td>
<tr>---use here
}
----</tr> Remove it from here and use it inside for loop
</table>

Answer 2

Please move your <tr> inside loop like this...

 

 

@foreach (DataRow item in Model.Rows)
{
    <tr>
        <td>@Convert.ToString(item[1])</td>
        <td>@Convert.ToString(item[2])</td>
        <td>@Convert.ToString(item[3])</td>
        <td>@Convert.ToString(item[4])</td>
        <td>@Convert.ToString(item[5])</td>
        <td>@Convert.ToString(item[6])</td>
        <td>@Convert.ToString(item[7])</td>
        <td>@Convert.ToString(item[8])</td>
        <td><a class="btn btn-primary" href="@Url.Action("Edit", "Member", new {@id=Convert.ToString(item[0]) })">Edit</a></td>
        <td><a class="btn btn-danger" href="@Url.Action("Delete", "Member", new {@id=Convert.ToString(item[3]) })">Delete</a></td>
    </tr>
}

Answer 3

Thanks,

 

    I have give designed code . you have to set only color. Paste it in html file and run it and set the color by your choice.

 

 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<table style="width:80%">

<tr style="height:60px; background-color:magenta">

<td colspan="2">Setup For Composite Rates</td>

</tr>

<p>

</p>

<tr>

<td>

Category :

</td>

<td>

<select>

<option>INTERNAL DOOR</option>

<option>EXTERNAL DOOR</option>

</select>

</td>

</tr>

<tr>

<td>

Sub Category :

</td>

<td>

<select>

<option>Write your text</option>

<option>Another Text</option>

</select>

</td>

</tr>

<tr style="height:20px"><td colspan="2"></td></tr>

<tr>

<td>Description :<input type="text" /></td>

<td>Unit : <input type="text" /> &nbsp;&nbsp;&nbsp; Price : <input type="text" /> </td>

</tr>

<p></p>

<tr><td><i><b>Batch file Upload :</b></i></td><td></td></tr>

<tr>

<td>

<input type="file" /></td>

<td></td>

<tr>

<td><input type="button" class="btn-danger" value="Upload BulkCopy"/></td>

</tr>

</table>

</div>

</body>

</html>

 

Answer 4

Many Thanks Amit Kumar it works fine.

 

I want to ask how is it posible to design my user interface so that i can have some label and textbox  in one row of a table, just the way we design it on ASP.NET

 Some thing like the one below:

 

 Thank you once again