Step by step to create a beautiful news list (no refresh paging, Content preview) The second step _ basic Application

Source: Internet
Author: User
Tags access database connectionstrings
In the previous article, we conducted a requirement analysis as follows:

1. Dynamic News Listings (this is simple)

2. You can read the news list in pagination (this is not difficult)

3. Can read a news list without refreshing paging (this is a bit difficult)

4. Can preview the content of the news (this is also a little bit difficult)

5. Friendly interface (this is necessary)

According to the sequence of software engineering, we should develop software according to this order: feasibility analysis = = = "Requirements Analysis = = =" Design = = = "detailed design = = =" "Code = =" Test

Since we are only a small part of the project, it is a good habit to develop it in almost the same order. We put together the outline design and the detailed design.

Let's design the database by using an Access database and the fields are relatively simple. On a table tb_news, the database is named News.

Column

name type length

news_id long integral type 4

news_title text 255

news_content memory -

news_time Date/Time 8

news_readtimes long integral type 4

Of course, you can add fields or reduce fields according to your needs. Which news_content as long as possible, in line with the length of the news.

After the database design is finished, we can start coding. First build the ASP.net project (I prefer the Web application rather than the website) and name it mynewslist. As shown in the following illustration:


If you are using the VS2010 version, you will find that a lot of files will be generated, which are vs2010 with some style pages (master pages), somewhat similar to asp.net mvc. Here we do not need to delete them and rename some folders, the account folder, About.aspx, Default.aspx, Global.asax and Site.mater deleted, and the Scripts folder renamed to JS folder, styles renamed to CSS folder, which is more in line with our habits, of course, you can not change. and copy the news database files to the App_Data folder. (If you are a vs2008 or other version, do a similar operation) the final list is as follows:

OK, we've built the foundation, now we're going to build a house. Create the Newslist.aspx page, which is our news listing page.
Before editing newslist.aspx, let's configure the Web.config file to establish a connection to the database. Change the <connectionStrings/> to read:

Copy Code code as follows:

<connectionStrings>
<add name= "newsconnection" connectionstring= "provider=microsoft.jet.oledb.4.0; Data source=| Datadirectory|\news.mdb; " />
</connectionStrings>

We note: Data source=| Datadirectory|\news.mdb in the DataDirectory, which is why we want to copy the database files to the App_Data folder, so it is convenient to call the database, do not have to worry about the path of the problem.

After matching the Web.config file, we began to design the front desk. Newslist.aspx page foreground body code is as follows:
Copy Code code as follows:

<body>
<form id= "Form1" runat= "Server" >
<div>
<div id= "Tabledata" >
<table cellpadding= "5" cellspacing= "1" width= "90%" id= "producttable" align= "Center" >
<tr>
<th style= "width:60%" >
<a style= "Cursor:pointer;" > news title </a><span id= "ProductID" ></span>
</th>
<th style= "width:10%" >
<a style= "Cursor:pointer;" > Reading times </a><span id= "UnitPrice" ></span>
</th>
<th style= "width:30%" >
<a style= "Cursor:pointer;" > Published </a><span id= "discontinued" ></span>
</th>
</tr>
</table>
</div>
<div id= "pagination" class= "Digg" >
</div>
</div>
</form>
</body>

We see this as a table, but there is no binding or writing code in it, which is to be added later using AJAX. At the same time, we notice that there are some IDs
<span id= "ProductID" ></span> this is required for future use of JSON binding.

Now, let's write some background code and try to connect to the database. For the sake of simplicity, I wrote the code to connect the database to the newslist.aspx background code and NewsList.aspx.cs, in fact, in the actual project, we often put the database operation of the block, only provide interface.
The background code is as follows:
Copy Code code as follows:

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Using System.Data.OleDb;
Namespace Mynewslist
{
public partial class NewsList:System.Web.UI.Page
{
Database connection string
public static string connectionString = system.web.configuration.webconfigurationmanager.connectionstrings[" Newsconnection "]. ToString ();
public static OleDbConnection Conn;
protected void Page_Load (object sender, EventArgs e)
{
if (! Page.IsPostBack)
{
Testconnection ()//test Connection database
}
}
protected void Testconnection ()
{
conn = new OleDbConnection (connectionString);
Try
{
Conn. Open ();
IF (Conn. state = = System.Data.ConnectionState.Open)
{
Response.Write ("Database connection succeeded");
}
Else
{
Response.Write ("Connection status is off");
}
}
catch (Exception e)
{
Response.Write ("Connection failed, error reason:" +e.message);//If the connection fails, the error is displayed
}
Finally
{
Conn. Close ()//Be sure to turn off Conn in time.
}
}
}
}

When we ran the page and found "database connection succeeded", we started the code code below.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.