使用ASP.NET MVC2构建简单的Twitter客户端

• 下载演示项目 - 352.27 KB

ASP.NET MVC2概述

本教程不针对特定版本的ASP.NET MVC框架，但学完之后，您将能够选择任何版本，只会有一些非关键的差异。

ASP.NET MVC2是一个遵循MVC模式的开源Web应用程序框架，基于ASP.NET构建。

Model-View-Controller快速浏览

MVC被归类为一种架构模式，其概念称为“关注点分离”或“角色分离”，这意味着将您的应用程序拆分为不同的模块，每个模块负责相关的事物。

就ASP而言；您有负责数据存储和检索的模块，其他模块负责以格式化方式显示您的数据，最后一个模块负责操作数据并对其应用任何逻辑或您想要的任何东西。

在接下来的三个小节中，我们将讨论MVC的每个组件。

模型

模型是应用程序的主要组件，通常是数据库中存储和检索的内容，在我们的应用程序中，它将是推文信息和文本。

View

视图是以格式化形式呈现给用户的数据。在这里，它将是HTML页面。

控制器

控制器是响应所有用户请求、决定适当响应的组件；这可能是渲染视图、重定向到其他URI或许多其他事情。

优点和缺点

优点

它有很多优点，但这些是最显著的

• 完全控制HTML、CSS和JavaScript代码，帮助您编写干净、符合标准的标记
• 它具有可扩展性，这意味着您可以使用默认组件，或重新配置它，甚至使用另一个组件
• HTTP友好，它让您完全控制浏览器和服务器之间传递的请求
• MVC的可测试性使得通过测试控制器方法来单元测试页面特有的逻辑变得简单

缺点

与它的优点相比，它并没有太多的缺点

• WebForms中缺乏拖放组件，尽管JQuery和其他JavaScript库克服了这个问题
• 它不像WebForms那样容易，您应该理解每个组件单独和它们作为一个整体的角色。

让我们开始构建应用程序

在介绍了这些之后，让我们看看所有这些如何融入到一个真实的应用程序中，比如一个Twitter客户端，它将具有显示时间线、发推文和将推文存储到本地数据库等简单功能。

步骤1：创建ASP.NET MVC项目

启动Visual Studio 2010并转到文件 > 新建 > 项目，选择ASP.NET MVC 2 Web应用程序并将其重命名为SimpleTwitterClient，然后按确定。接下来，它会询问您是否要为应用程序创建单元测试项目，选择否并按确定。我们不打算创建此项目，因为它不是本教程的目的的一部分。

步骤2：项目中的所有这些文件夹和文件是什么？

约定优于配置（也称为按约定编码）是一种软件设计范例，旨在减少开发人员需要做出的决策数量，从而获得简单性，但不一定失去灵活性。

-维基百科

此模板非常有用，可以为您节省一些时间来启动任何应用程序。此模板的另一个重要之处在于其所谓的“约定优于配置”，如上所述，以下是此概念在项目和MVC中的一些亮点。每个控制器必须以“Controller”结尾，页面名称必须与Action相同（我们稍后会定义Action），并且必须位于与控制器名称匹配的文件夹中。当然，您可以使用路由对象自定义此设置（我们很快就会看到），否则您的应用程序将无法工作。

以下是文件夹及其用途

• App_Data: 包含所有数据库实例
• Content: 包含CSS文件和相关资源
• Controller: 包含所有控制器类
• Model: 包含所有模型类
• Views: 包含所有页面
• 所有其他文件夹和文件与WebForms中的相同

步骤3：编辑项目文件夹和文件

删除以下文件夹和文件：/Views/Account/、/Views/Shared/、/Modules/AccountModules.cs、
/Controller/AccountController.cs、/Content/Site.css和/Home/about.aspx。我们将在接下来的过程中添加和编辑剩余的文件。

因此，项目将如下图所示

步骤4：模型

首先：这里与我们相关的数据是什么？是推文，更具体地说是推文的文本、发布者头像及其姓名。

其次：我们将处理什么数据库？是两个不同的数据库，第一个是Twitter数据库，我们将通过Twitterizer包装器处理它。请在此处下载最新版本2.3.3 Binaries以在应用程序中使用它。

所以我们将在接下来的几步中看到如何使用Twitterizer，但现在我们将创建本地数据库及其访问类。

步骤5：为存储的推文创建数据库

右键单击App_Data文件夹，菜单将如下所示出现，然后转到添加/新建项...，然后出现另一个框，选择SQL Server数据库并将其重命名为StoredTweets，然后按确定。

步骤6：向数据库添加表

右键单击“表”文件夹，菜单将如下图所示出现，然后转到“添加新表”，然后SQL表将打开，然后按照下图中的样式写入列名和数据类型。

步骤7：设置表的主键

右键单击第一列并选择设置主键，然后转到列属性并将属性(Is Identity)从否更改为是，然后按Ctrl+S，下面的框将出现，将表重命名为Tweet并按确定。

步骤8：创建StoredTweet数据库的模型

右键单击“模型”文件夹，菜单将如下所示出现，然后转到“添加/新建项...”，然后出现另一个框，从中选择“ADO.NET实体数据模型”，并将其重命名为“TweetModel”，然后按确定。

步骤9：配置模型

第一个框将出现，选择从数据库生成并按下一步，然后再次按下一步而不更改任何内容，第三个框将出现，选择表，然后按完成。

步骤10：创建Twitter应用程序

在此步骤中，我们将在Twitter开发者网站上创建Twitter应用程序，点击创建应用，然后像下图一样填写应用程序详细信息，完成协议和验证码，然后点击创建。

您将直接进入设置页面，在页面底部，您将找到OAuth设置，如图像所示，请注意；您需要在几个步骤之后将Customer key和Customer secret复制到OAuth action中。

我们这里使用的是Twitter提供的单用户OAuth，它允许您从应用程序控制面板中的应用程序详细信息页面检索单个访问令牌（包括`oauth_token_secret`）。阅读更多。

在发布此教程之前，我已删除了该应用程序。所以，请创建您的应用程序并获取您的令牌。

步骤11：将Twitterizer添加到项目

右键单击References文件夹，菜单将如下所示出现，转到Add Reference...，然后出现另一个框，转到您下载的Twitterizer文件夹，从中选择Twiterizer2.dll并按确定，然后转到HomeController，并在下面的图片中最后两行导入Twitterizer类和模型类，以便稍后使用。

步骤12：视图

现在我们将编写视图并展示如何格式化它。如前所述，视图名称必须与动作名称相同。

要添加新视图，右键单击/Views/Home文件夹，菜单将如下所示出现，然后转到添加/视图...，然后此框将打开，取消选择选择主页，然后将视图重命名为StoredTweets并按添加。

步骤13：添加样式图片

这里我们将添加一些图片用于CSS，我们使用页面中的嵌入样式。

步骤14：索引视图

以下代码是视图的重要部分，页面的其余部分只是普通的HTML和CSS。

您可以在第3行看到ViewData["pic1"]，这是一个用于在视图和控制器之间交换数据的dictionary对象。这里我们用它来获取用户推文图片的地址。与ViewData["name1"]获取姓名类似，最后一个ViewData["text1"]用于获取推文文本。此处使用的try-catch是为了防止Replace方法返回null时发生的异常，因为“#”在作为查询字符串传递给store动作时会引起一些问题，如第18行所示，在该行中我们将选定的推文传递给store动作以将其存储在数据库中。

 <div class="tweet">
                <img class="pic" alt="pic" src="<%: ViewData["pic1"] %>" 
			height="48px" width="48px" />
                <h1 class="name">
                    <%: ViewData["name1"]%>
                </h1>
                <% try %>
                <%    {	        %>
                <p id="P2">
                    <%:	 ViewData["text1"].ToString().Replace("=", "#")%>
                </p>
                <%    }%>
                <%    catch%>
                <%	    {%>
                <p id="P1">
                    <%: ViewData["text1"]%>
                </p>
                <%    }  %>
                <a href="https://codeproject.org.cn/Timeline/Store?name=
		<%: ViewData["name1"]%>&text=<%: ViewData["text1"]%>
		&pic=<%: ViewData["pic1"] %>">
                    <img class="store" src="../../Content/store.png" alt="store" 
			height="30px" width="30px" />
                </a>
            </div>

步骤15：StoredTweets视图

此代码与上面一个非常相似，除了此处使用的`for`循环，它用于遍历`ViewData`对象中的所有推文并实时写入它们。

<div class="tweet">
            <% for (int i = 0; i < int.Parse(ViewData["count"].ToString()); i++)
               { %>
            <img class="pic" alt="pic" 
		src="<%: ViewData["user_pic" + i]%>" height="48px" width="48px" />
            <h1 class="name">
                <%: ViewData["user_name"+i]%>
            </h1>
            <% try %>
            <%   {  %>
            <p id="P2">
            <%:	    ViewData["text" + i].ToString().Replace("=", "#")%>
            </p>
            <hr />
            <%    }%>
            <%    catch%>
            <%	    {%>
             <p id="P1">
            <%:   ViewData["text" + i]%>
            </p>
            <hr />
            <%    } %>
            <%} %>
        </div>

步骤16：控制器

为了简单起见，这里我们只使用一个控制器。

每个控制器必须至少有一个`public`方法，返回`ActionResult`类型或任何其他派生类型。这个带有此签名的、称为动作的方法负责响应用户，动作可以通过多种方式响应，例如渲染视图、重定向到另一个URI，甚至返回一个JSON对象。

步骤17：OAuth动作

此操作的目的是创建令牌对象。在第3行，我们创建`OAuthTokens`对象，然后在接下来的几行中，我们用适当的值设置对象变量，然后返回该对象。

public static OAuthTokens OAuth()
        {
            OAuthTokens tokens = new OAuthTokens();
            tokens.AccessToken = "149986120-UrYpRgSJigTAOTvaUlQq1syEd0TmUs5DEN6mcaKz";
            tokens.AccessTokenSecret = "XxUuIvn9sg19a6URSvS1Xdzelq1MyMdMu1bikZb6VoM";
            tokens.ConsumerKey = "iclRhUctHXh6uQe6o1HEQ";
            tokens.ConsumerSecret = "61JALtKUSmiaPn899fVJum6rpT9IQ3sYKZy6o";
            return tokens;
        }

步骤18：索引动作

此动作是主要的动作，因为它返回时间线视图。在第3行，我们使用`OAuth`方法初始化令牌对象，然后创建`TwitterResponse`来表示时间线，通过使用`HomeTimeLine`方法初始化它。`HomeTimeLine`方法接受两个参数，第一个是令牌，另一个是`TimelineOptions`。它是可选的，您可以删除它，但我们在这里使用它来确保从Twitter提取的推文数量适合视图。

public ActionResult Index()
        { 
	    OAuthTokens tokens = OAuth();
            TwitterResponse<twitterstatuscollection /> timeline = TwitterTimeline.HomeTimeline
		(tokens, new TimelineOptions() { Page = 4, Count = 15 });
            int count = 0;
            foreach (var tweet in timeline.ResponseObject)
            {
                ViewData["text" + count] = tweet.Text.Replace('#', '=');
                ViewData["name" + count] = tweet.User.Name;
                ViewData["pic" + count] = tweet.User.ProfileImageLocation;
                count++;
            }
            return View();
        }

步骤19：存储动作

我们使用此方法将选定的推文存储在数据库中，在第3行中，我们使用我们在前几步中创建的实体模型创建一个对象来表示数据库，第二个对象表示存储推文的表，然后将参数分配给表示表中列的属性。请注意，动作的参数作为查询字符串在索引视图中传递（前几步），然后将此新表数据添加到数据库并使用`SaveChanges`方法保存，最后再次重定向到`index`方法。

public RedirectResult Store(string name, string text, string pic)
        {
            favorit_tweets_dbEntities tweets_db = new favorit_tweets_dbEntities();
            
            tweet new_stored_tweet = new tweet();
            
            new_stored_tweet.tweet_text = text;
            new_stored_tweet.tweet_user_name = name;
            new_stored_tweet.tweet_user_pic = pic;
            
            tweets_db.AddTotweets(new_stored_tweet);
            tweets_db.SaveChanges();
            return Redirect("/Timeline/index");
        }

步骤20：StoredTweets动作

这里我们做的和`index`动作一样，但是这里我们从本地数据库检索数据，然后将其逐个添加到`ViewData`对象中，以便传递给`StoredTweets`视图，然后通过调用不带任何参数的`View`方法来渲染`StoredTweets`视图。

public ActionResult StoredTweets()
        {
            favorit_tweets_dbEntities tweets_db = new favorit_tweets_dbEntities();
            int count = tweets_db.tweets.ToList().Count;
            for (int i = 0; i < count; i++)
            {
                ViewData["user_name" + i] = tweets_db.tweets.ToList()[i].tweet_user_name;
                ViewData["user_pic" + i] = tweets_db.tweets.ToList()[i].tweet_user_pic;
                ViewData["text" + i] = tweets_db.tweets.ToList()[i].tweet_text;
            }
            ViewData["count"] = count;
            return View();
        }

步骤21：推文动作

最后，我们只是从`Querystring`中获取推文文本作为参数，并将其与令牌一起传递给`Update`方法，然后重定向到索引页面。

public ActionResult tweet(string status)
        {
	    OAuthTokens tokens = OAuth();
            TwitterResponse<twitterstatus /> new_tweet = TwitterStatus.Update(tokens, status);
            return Redirect("/timeline/index");
        }

结论

好的，我们用这个简单的应用程序涵盖了MVC的许多重要方面，例如控制器动作如何与视图协同工作以及它们如何与模型交互，并且我们涵盖了`Twitterizer`和`OAuth`过程的一些类。

感谢您的阅读，希望您今天学到了一些新知识。