Question

我正在使用Visual Studio 2017构建响应式Web应用程序，并且我想使用后面的C＃代码从我的SQL数据库中填充<tbody>中的数据，该怎么办？

<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);
    }
}

最后，在Views \ Users文件夹中创建一个Index.cshtml视图，如下所示：

@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>

然后，您可以运行应用程序并从http://localhost/Users查看html页面。

有关使用ASP.NET MVC的更多详细教程。请访问https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started。

如何用thead和tbody用来自SQL数据库的数据填充HTML5表？

1 个答案: