asp.net Table code behind

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

If you're just starting to learn ASP.NET, why are you choosing Web Forms? Why not MVC? Web Forms is a dying platform. It's bloated, slow, difficult to work with, and not supported in ASP.NET Core. — mason
– mason, Commented Mar 31, 2017 at 20:41
You should check whether row.Author and row.Title are empty, because if you just add the button object as a string it will output the object and its namespace - namely "System.Web.UI.WebControls.LinkButton". — Thrawn
– Thrawn, Commented Mar 31, 2017 at 20:45
@user6824563 I'm sure how table relates to search feature. Could you elaborate more? — Win
– Win, Commented Mar 31, 2017 at 21:17
It's only Bootstrap and JQuery using the function searchable. $('#table').searchable where my table id="table" — user6824563
– user6824563, Commented Mar 31, 2017 at 21:28

Win · Accepted Answer · 2017-03-31 21:14:21Z

3

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

edited Mar 31, 2017 at 21:14

answered Mar 31, 2017 at 20:57

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mason Over a year ago

If I were you, I'd demo the strongly typed model binding just to get him started on the right foot instead of magic strings ;)

Win Over a year ago

Thanks! I haven't written new ASP.NET Web Forms for years already. I miss those good old days.

user6824563 Over a year ago

Thank you, but I used html tags because I have a JavaScript to handle my search input box. I edited my code

Lorien · Accepted Answer · 2017-03-31 20:58:14Z

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>

answered Mar 31, 2017 at 20:58

Lorien

1602 silver badges8 bronze badges

Collectives™ on Stack Overflow

asp.net Table code behind

2 Answers 2

Code Behind

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Code Behind

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related