Как заполнить таблицу HTML5 thead, а tbody данными из базы данных sql?

Question

Я использую Visual Studio 2017 для создания адаптивного веб-приложения и Я хочу заполнить данные в <tbody> из моей базы данных SQL, используя код C #, так как я могу это сделать?

<table id="exTable" runat="server" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th width="100px" nowrap>ID</th>
            <th width="200px" nowrap>First name</th>
            <th width="200px" nowrap>Last name</th>
            <th width="200px" nowrap>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd gradeX">
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td>4</td>
            <td>X</td>
        </tr>
    </tbody>
</table>

Ниже приведен код, который я использую для рисования таблицы с использованием кода C # позади

ObjectResult or = t.std_users();

HtmlTableRow row;

foreach (std_users_Result u in or)
{
    //if (u.UserID != null)
    //    var_userID = u.UserID.ToString();
    if (u.UserName != null)
        var_userName = u.UserName.ToString();

    if (u.userTitle != null)
        var_userTitle = u.userTitle.ToString();

    if (u.userImagePath != null)
        var_imageUrl = u.userImagePath.ToString();

    if (u.Mobile != null)
        var_mobile = u.Mobile.ToString();

    if (u.LoginName != null)
        var_loginName = u.LoginName.ToString();

    if (u.Password != null)
        var_Password = u.Password.ToString();

    if (u.IsActive != null)
        var_isActive = u.IsActive.ToString();

    row = new HtmlTableRow();
    row.Attributes.Add("class", "gradeA");

    row.Cells.Add(new HtmlTableCell(var_userID));
    row.Cells.Add(new HtmlTableCell(var_userName));
    row.Cells.Add(new HtmlTableCell(var_userTitle));
    row.Cells.Add(new HtmlTableCell(var_imageUrl));
    row.Cells.Add(new HtmlTableCell(var_mobile));
    row.Cells.Add(new HtmlTableCell(var_loginName));
    row.Cells.Add(new HtmlTableCell(var_Password));
    row.Cells.Add(new HtmlTableCell(var_isActive));

    usertable.Rows.Add(row);
}

Answer 1

Это очень легко сделать с ASP.NET MVC. Сначала создайте класс Model, который содержит все свойства, которые вы хотите отобразить в html-таблице, как показано ниже.

public class UserModel
{
    public List<User> Users { get; set; }
}

public class User
{
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PostCode { get; set; }
    public string Country { get; set; }
}

Затем создайте контроллер, как показано ниже:

public class UsersController : Controller
{
    // GET: Users
    public ActionResult Index()
    {
        var model = new UserModel();
        model.Users = new List<User>();

        // model.Users should be retrieved from t.std_users()
        model.Users.Add(new Models.User
        {
            ID = 1,
            FirstName = "James",
            LastName = "Brown",
            PostCode = "1111",
            Country = "USA"
        });
        return View(model);
    }
}

Наконец, создайте представление Index.cshtml в папке Views \ Users, как показано ниже:

@model MVC5.Models.UserModel

@{
    ViewBag.Title = "Index";
}

<h2>User list</h2>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th width="100px" nowrap>ID</th>
            <th width="200px" nowrap>First name</th>
            <th width="200px" nowrap>Last name</th>
            <th width="200px" nowrap>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model.Users)
        {
        <tr class="odd gradeX">
            <td>
                @user.ID
            </td>
            <td>
                @user.FirstName
            </td>
            <td>
                @user.LastName
            </td>
            <td>
                @user.PostCode
            </td>
            <td>@user.Country</td>
        </tr>
        }
    </tbody>
</table>

Затем вы можете запустить ваше приложение и просмотреть html-страницу с http://localhost/Users.

Более подробное руководство по использованию ASP.NET MVC. Пожалуйста, посетите https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started.