asp.net后面的表代码

Question

I started learning asp.net. I'm having problem to create a table in the code behind. I load data from my database and I want to display it in the table and also have a link to another page.

Here is my aspx code:

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3>Search Books</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-lg-offset-4">
                <input type="search" id="search" value="" class="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table" id="table">
                    <thead>
                        <tr>
                            <th>Author</th>
                            <th>Title</th>
                        </tr>
                    </thead>
                    <tbody>
                        <%=getWhileLoopData()%>
                    </tbody>
                </table>
                <hr />
            </div>
        </div>
    </div>

My cs code:

public string getWhileLoopData()
{
    string htmlStr = "";
    var query = (from b in db.Books
                 where b.Available == true
                 orderby b.DataInserted descending
                 select b).Take(10);

    foreach (var row in query)
    {
        LinkButton btn = new LinkButton();
        btn.ID = "openBook" + row.Id;
        btn.CommandArgument = row.Id.ToString();
        btn.Command += Load_Book;
        btn.Text = "Open Book";
        htmlStr += "<tr><td>" + row.Author + "</td><td>" + row.Title + "</td><td>" + btn + "</td>";
    }

    return htmlStr;
}

private void Load_Book(object sender, CommandEventArgs e)
{
    Response.Redirect("Book.aspx?Id=" + e.CommandArgument);
}

JavaScript to handle search option:

$(function () {
$('#table').searchable({
    striped: true,
    oddRow: { 'background-color': '#f5f5f5' },
    evenRow: { 'background-color': '#fff' },
    searchType: 'fuzzy'
});

$('#searchable-container').searchable({
    searchField: '#container-search',
    selector: '.row',
    childSelector: '.col-xs-4',
    show: function (elem) {
        elem.slideDown(100);
    },
    hide: function (elem) {
        elem.slideUp(100);
    }
})

});

Almost everything works fine. But the Linkbutton only display a string "System.Web.UI.WebControls.LinkButton". Does anyone know what I am doing wrong? Is it the best way to implement?

Thanks

Answer 1

We don't normally create html tags from code behind in ASP.Net Web Form; it could be very fragile and hard to maintain. Instead, we use data controls such as GridView, ListView.

For example,

<asp:GridView runat="server" ID="BookGridView" AutoGenerateColumns="False"
    ItemType="DemoWebForm.Book">
    <Columns>
        <asp:BoundField DataField="Author" HeaderText="Author" />
        <asp:BoundField DataField="Title" HeaderText="Title" />

        <%-- Use HyperLinkField if you do not need to postback to server --%>
        <asp:HyperLinkField DataNavigateUrlFields="Id" 
            DataNavigateUrlFormatString="Book.aspx?Id={0}" 
            Text="Open Book" HeaderText="Redirect to New Page" />

        <asp:TemplateField HeaderText="Post Back and Redirect">
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="OpenBookLinkButton" Text="Open Book" 
                    OnCommand="Load_Book" CommandArgument="<%#: Item.Id %>">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code Behind

namespace DemoWebForm
{
    public class Book
    {
        public int Id { get; set; }
        public string Author { get; set; }
        public string Title { get; set; }
    }

    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BookGridView.DataSource = new List<Book>
                {
                    new Book {Id = 1, Author = "One", Title = "One Hundred"},
                    new Book {Id = 2, Author = "Two", Title = "Two Hundreds"},
                    new Book {Id = 3, Author = "Three", Title = "Three Hundreds"},
                };
                BookGridView.DataBind();
            }
        }

        protected void Load_Book(object sender, CommandEventArgs e)
        {
            Response.Redirect("Book.aspx?Id=" + e.CommandArgument);
        }
    }
}

Answer 2

I recommend following all the comment sugestion but as for why your link button end up display: System.Web.UI.WebControls.LinkButton is because when concatening it with a string it's like invoking .ToString() on it and that return a string containing the object type. if you want to keep following your route you'll need to include actual html tag in your string to display your link button like

<button></button> 

or

<input type="button"></input> 

or event a simple link:

<a href="#">click me</a>