Question

我正在编写一个ASP.NET页面，它从数据库中读取数据并需要在HTML表格中显示它。我不想使用gridView。

以下是我尝试使用c＃的代码：

    protected void Page_Load(object sender, EventArgs e)
    {
    DataTable dt = new DataTable();
        List<UserDetails> details = new List<UserDetails>();

        using (SqlConnection con = new SqlConnection("Data Source=.\SQLEXPRESS;Initial Catalog=Sample;Trusted_Connection=True;"))
        {
            using (SqlCommand cmd = new SqlCommand("select TOP 10 ImageFile,ProductName,Features from Product_category", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    UserDetails user = new UserDetails();
                    user.UserId = dtrow["ImageFile"].ToString();
                    user.UserName = dtrow["ProductName"].ToString();
                    user.Location = dtrow["Features"].ToString();
                    details.Add(user);
                }
            }
        }
        return details.ToArray();
    }
    public class UserDetails
    {
        public string UserId { get; set; }
        public string UserName { get; set; }
        public string Location { get; set; }
    }

这是我的HTML代码：

<table id="tbDetails" width="800" runat="server">
<tbody>
<tr><td><table><tr><td></td></tr><tr><td></td></tr></table></td><td><table><tr><td></td></tr></table></td></tr>
</tbody>
</table>

Answer 1

首先将代码放在一个返回字符串的私有方法中。方法：

public string getWhileLoopData()
{
 string htmlStr = "";
SqlConnection thisConnection = new SqlConnection(dbConnection);
        SqlCommand thisCommand = thisConnection.CreateCommand();
        thisCommand.CommandText = "SELECT * from Test";
        thisConnection.Open();
        SqlDataReader reader = thisCommand.ExecuteReader();

        while (reader.Read())
        {
            int id = reader.GetInt32(0);
            string Name = reader.GetString(1);
            string Pass = reader.GetString(2);
            htmlStr +="<tr><td>"+id+"</td><td>"+Name+"</td><td>"+Pass+"</td></tr>"                   
        }

        thisConnection.Close();
        return htmlStr;
}

您可以使用此代码：

<%=getWhileLoopData()%> tag in ASP.NET that is equal to <%Response.Write(getWhileData())%>

看起来应该是这样的：

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/test.master" CodeFile="test.aspx.cs" Inherits="test" %>

<asp:Content ID="BodyContent" runat="server"  ContentPlaceHolderID="ContentPlaceHolder">
    <table width="100%" align="center" cellpadding="2" cellspacing="2" border="0" bgcolor="#EAEAEA" >
        <tr align="left" style="background-color:#004080;color:White;" >
            <td> ID </td>                        
            <td> Name </td>            
            <td>Pass</td>                        
        </tr>

        <%=getWhileLoopData()%>

    </table>
</asp:Content>

还可以选择使用转发器控件并将数据从数据库绑定到项目模板

Answer 2

如果你想通过ajax调用，你可以参考你合适的jquery版本。在代码后面写webmethod。从Ajax中调用它并将列表详细信息绑定到表中。贝娄是代码。

default.aspx.cs中的

Web方法

 [WebMethod]
    public static List<UserDetails> GetDetails()
    {
        //Write your database logic here and add items in list
        List<UserDetails> details = new List<UserDetails>();
        details.Add(new UserDetails() { Location="aaaa", UserId="adv", UserName="fdfds"  });
        details.Add(new UserDetails() { Location = "bbbb", UserId = "hhhh", UserName = "aaaafds" });
        return details;
    }

在aspx中

Jquery AJAX调用

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function () {
     var row = "";
     $.ajax({
         type: "POST",
         url: "Default.aspx/GetDetails",
         data: "{}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (msg) {
             $.each(msg.d, function (index, obj) {
                 row += "<tr><td>" + obj.UserId + "</td><td>" + obj.UserName + "</td><td>" + obj.Location + "</td></tr>";
             });

             $("#tbDetails tbody").append(row);
         }
   });
 });
</script>

    <table id="tbDetails" width="800" runat="server" clientidmode="Static">
   <tbody>
    <tr><td>Userid</td><td>UserName</td><td>Location</td></tr>
    </tbody>
    </table>

希望这会对你有所帮助。

Answer 3

      public string wogrid()
        {
        string htmlStr = "";
    SqlCommand cmd = con.CreateCommand();
    cmd.CommandText = "SELECT * from employees";
    con.Open();
    SqlDataReader reader = cmd.ExecuteReader();

    while (reader.Read())
    {
        int empID = reader.GetInt32(0);
        string empName = reader.GetString(1);
        int age = reader.GetInt32(2);
        string location = reader.GetString(3);
        int salary = reader.GetInt32(4);
        htmlStr += "<tr><td>" + empID + "</td>" + "<td>" + empName + "</td>" + "<td>" + age + "</td>" + "<td>" + location + "</td>" + "<td>" + salary + "</td></tr>";                
    }

    con.Close();
    return htmlStr;
    }

}

        /*****source code must me like ******/


        <table width="100%" align="center" cellpadding="2" cellspacing="2" border="0"    bgcolor="#EAEAEA" >
        <tr align="center" style="background-color:#004080;color:White;" >
        <td width="20%"> empID </td>                        
        <td width="20%"> empName </td>            
        <td width="20%">age</td>  
        <td width="20%">location</td>
        <td width="20%">salary</td>                      
      ![enter image description here][1]   </tr>

    <%=wogrid()%>

</table>

Answer 4

var app = angular.module("app", []);

app.controller("mainCtrl", ['$scope', function($scope){

  $scope.alpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p","q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

  $scope.tags = ["apple", "dog", "cat", "dad", "baby", "zoo", "love", "hate", "rat", "room", "home", "age", "bad"];

}]);

如何在asp.net中的HTML表格中显示数据

4 个答案: