asp.net show data from database into html form having bootstrap

Question

I might not be precise about the question. Cause I just started learning ASP.NET. Previously i worked with WinForms Application and learn a lot of c# code.

Now what i want to do is show some data from my SQL server database into my cshtml form.

First Question is that either i need to show data into cshtml or an aspx page? What is the difference in both?

Second question is i have this specific area of form which result is shown in this image.

and the bootstrap code is here.

<div class="media packagesList">
                                <a class="media-left fancybox-pop" href="img/packages/package-list-01.png">
                                    <img class="media-object" src="img/packages/package-list-01.png" alt="Image">
                                </a>
                                <div class="media-body">
                                    <div class="bodyLeft">
                                        <h4 class="media-heading"><a href="single-package-right-sidebar.html">Suspendisse Tour</a></h4>
                                        <div class="countryRating">
                                            <span>Asia</span>
                                            <ul class="list-inline rating">
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            </ul>
                                        </div>
                                        <p>Integer purus ex, dictum nec elementum eu, tristique vel lectus. Donec rutrum lectus et pharetra egestas.</p>
                                        <ul class="list-inline detailsBtn">
                                            <li><span class="textInfo"><i class="fa fa-calendar" aria-hidden="true"></i> 27 jan, 2016</span></li>
                                            <li><span class="textInfo"><i class="fa fa-clock-o" aria-hidden="true"></i> 5 days</span></li>
                                        </ul>
                                    </div>
                                    <div class="bodyRight">
                                        <div class="bookingDetails">
                                            <h2>$499</h2>
                                            <p>Per Person</p>
                                            <a href="single-package-right-sidebar.html" class="btn buttonTransparent clearfix">Details</a>
                                            <a class="btn buttonTransparent" data-toggle="modal" href='.html'>Inquiry</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

How can i show the following from my database table? 1. An image saved in my website image folder(path is saved in db). 2. a tour heading (SUSPENDISSE TOUR) 3. tour location (Asia Here) 4. tour little description (Integer purus ex, dictum nec .....) 5. tour date (27 JAN, 2016) 6. Total Days (5 DAYS) 7. Cost Per Person ($499)

Please help me understand this. I have shown my code. I tried using

@{
var db = Database.Open("ProTrekkers");
var selectQueryString = "SELECT * FROM pt_Tours_Index_Master";

}

but its giving me error that Database doesn't exist in the current context.

score 0 · Accepted Answer · edited May 23 '17 at 12:25

First Question is that either i need to show data into cshtml or an aspx page? What is the difference in both?

Check this out: What, why or when it is better to choose cshtml vs aspx?

How can i show the following from my database table? ...

You could add asp elements into your bootstrap code (image, label, etc.) in your aspx:

<body>
<form id="form1" runat="server">
<div class="media packagesList">
                            <a class="media-left fancybox-pop" href="img/packages/package-list-01.png">
                                <asp:Image ID="Image1" runat="server" CssClass="media-object" />
                            </a>
                            <div class="media-body">
                                <div class="bodyLeft">
                                    <asp:Label ID="lblHeading" runat="server" CssClass="media-heading"></asp:Label>
                                    <div class="countryRating">
                                        <span><asp:Label ID="lblLocation" runat="server"></asp:Label></span>
                                        <ul class="list-inline rating">
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        </ul>
                                    </div>
                                    <span><asp:Label ID="lblDescription" runat="server"></asp:Label></span>
                                    <ul class="list-inline detailsBtn">
                                        <li><span class="textInfo"><i class="fa fa-calendar" aria-hidden="true"></i> <asp:Label ID="lblDate" runat="server"></asp:Label></span></li>
                                        <li><span class="textInfo"><i class="fa fa-clock-o" aria-hidden="true"></i> <asp:Label ID="lblDays" runat="server"></asp:Label></span></li>
                                    </ul>
                                </div>
                                <div class="bodyRight">
                                    <div class="bookingDetails">
                                        <h2><asp:Label ID="lblPrice" runat="server"></asp:Label></h2>
                                        <p>Per Person</p>
                                        <a href="single-package-right-sidebar.html" class="btn buttonTransparent clearfix">Details</a>
                                        <a class="btn buttonTransparent" data-toggle="modal" href='.html'>Inquiry</a>
                                    </div>
                                </div>
                            </div>
                        </div>
</form>
</body>

Use something like this in Code behind to get your data from the database:

List<string> myData = new List<string>();

        using (SqlConnection connection = new SqlConnection("Your connection string"))
        {
            string query = "SELECT imgPath, heading, ... FROM pt_Tours_Index_Master";
            SqlCommand command = new SqlCommand(query, connection);
            connection.Open();
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                    myData.Add(reader.GetString(0));
                    myData.Add(reader.GetString(1));
                    myData.Add(reader.GetString(2));
                    myData.Add(reader.GetString(3));
            }
            connection.Close();
        }

Now you can assign the values to the specific asp elements like this:

imgThumbnail.ImageUrl = myData[0];
lblHeading.Text = myData[1];
...

If you want to have it more dynamic, you could also use DataTable instead of List and then retrieve the values within a foreach loop

I am stuck again. Now the Error is "Unable to cast object of type 'System.DateTime' to type 'System.String'" and its on the DateLine which is myData.Add(reader.GetString(3)); now what should i do?? — adil sharif, Sep 19 '16 at 14:57
@adilsharif try this: myData.Add(reader.GetDateTime(columnIndex)).ToString("dd/mm/yyyy"); **note:** You have to change the date format according to the format of your data in your database. For instance: when the data is stored like "12/24/2016" you have to use "mm/dd/yyyy", etc... — Patrick L, Sep 19 '16 at 15:27
Thanks Alot sir, Now i completed my work. Now all my tour basic details are showing from my Database. Worked Very Well. — adil sharif, Sep 19 '16 at 19:20
Can you please guide me for the dynamic data ????? Now this is difficult to understand. — adil sharif, Sep 19 '16 at 19:23
@adilsharif Instead of list you could [fill your data into a datatable](http://stackoverflow.com/questions/4089471/how-do-i-fill-a-datatable-using-datareader) and [retrieve the data afterwards using a foreach loop](http://stackoverflow.com/questions/7939146/how-to-foreach-a-column-in-a-datatable-using-c) — Patrick L, Sep 19 '16 at 21:14
Hi, I know i am bothering you alot. I understand the Data Table as i used it before. But What i dont understand is how to repeat the loop until the last tour. I have a specific query which only select tour from DB which are masked 'Y' in active column. Now please explain to me what to write inside the foreach datacolumn braces? — adil sharif, Sep 20 '16 at 16:49

asp.net show data from database into html form having bootstrap

1 Answers1