投票系统实现指南

在本文中,将探讨如何实现一个简单的投票系统,该系统可以轻松地集成到任何ASP.NET页面中。这个投票系统的主要特点包括:

  • 易于在任何视图中包含
  • 问题、答案和投票存储在XML文件中(每个投票控制一个文件)
  • 可配置样式
  • 使用AJAX调用更新结果
  • 所有投票控制共用一个JavaScript和样式表

如何使用代码

在源代码中,在默认的Index.aspx页面中添加了两个投票控制。这些是通过在视图中使用以下代码包含的:

<%
VoteDataModel petModel = (VoteDataModel)ViewData[VoteDataModel.GetViewDataName(
"Pet"
)];
petModel.ControlWidth =
200;
Html.RenderPartial(
"VoteControl", petModel);
%>

在上面的代码中,指定了投票控制的名称(Pet)和宽度(200)。为了使这工作,需要在视图的顶部,紧接页面指令之后添加以下行:

<%@
Import Namespace="VoteControl.Models"
%>

此外,由于使用了默认的主页面,必须在主页面的head部分添加样式表和JavaScript包含:

<link
href="~/Content/VoteControl.css"
rel="stylesheet"
type="text/css"
/>
<script
src='<%=
Url.Content("~/Scripts/VoteControl.js") %>'
type="text/javascript">
</script>

将这些添加在包含Site.css之后。如果不使用主页面,这些行将直接包含在页面上。

控制器中的模型构建

在控制器中,必须构建模型并使用以下代码将其传递给视图:

VoteDataModel model =
new VoteDataModel(
"Pet", Request.PhysicalApplicationPath +
"App_Data\\"
);
model.Open();
ViewData[model.ViewDataName] = model;

整个页面(对两个投票都进行了投票)看起来像这样:

命名约定

投票控制的名称在VoteDataModel构造函数中指定。这必须是唯一的,并在各种方式中使用,例如XML文件名 - NamePoll.xml(存储在app_data目录中)

实现

代码由以下新文件组成:

  • 模型 - VoteModel.cs
  • 控制器 - VoteController.cs
  • 部分视图 - VoteControl.ascx
  • 脚本 - VoteControl.js
  • 样式表 - VoteControl.css
  • App_Data - 包含投票控制数据的XML文件

文件位于解决方案中预期的位置,如下所示:

幕后

代码的大部分在模型中(应该是这样)。VoteDataModel对象包含一个答案列表(List<AnswerItem>)和IP地址(List<IpAddressItem>)。每个答案有一个AnswerItem,每个唯一的客户端IP地址添加一个条目。这就是确保用户只投票一次的方式。这并不完美 - 有关更多详细信息,请参见“要点”部分。

部分视图HTML

控制有三个div用于不同的视图:默认显示第一个。另外两个默认设置为display:none。根据按下的按钮或链接,其中一个设置为displayed,另外两个设置为display:none。

JavaScript

决定使用原生JavaScript进行AJAX调用,但可以使用jquery(或MicrosoftAjax.js文件)。选择这种方法是因为想尽可能灵活(和透明)。可能想将其更改为使用jquery - 特别是如果已经在现有页面上使用jquery。请注意,已经删除了未使用的脚本(jquery和MicrosoftAjax),否则它会使下载非常大!

样式表

VoteControl.css样式表中大多数元素都有类 - 希望名称相当直观。特别是,可能想更改颜色以适应网站的颜色方案 - 对于此,请注意正常和交替行可以(并且在示例中)着色不同。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485