在本文中,将探讨如何实现一个简单的投票系统,该系统可以轻松地集成到任何ASP.NET页面中。这个投票系统的主要特点包括:
在源代码中,在默认的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目录中)
代码由以下新文件组成:
文件位于解决方案中预期的位置,如下所示:
代码的大部分在模型中(应该是这样)。VoteDataModel对象包含一个答案列表(List<AnswerItem>)和IP地址(List<IpAddressItem>)。每个答案有一个AnswerItem,每个唯一的客户端IP地址添加一个条目。这就是确保用户只投票一次的方式。这并不完美 - 有关更多详细信息,请参见“要点”部分。
控制有三个div用于不同的视图:默认显示第一个。另外两个默认设置为display:none。根据按下的按钮或链接,其中一个设置为displayed,另外两个设置为display:none。
决定使用原生JavaScript进行AJAX调用,但可以使用jquery(或MicrosoftAjax.js文件)。选择这种方法是因为想尽可能灵活(和透明)。可能想将其更改为使用jquery - 特别是如果已经在现有页面上使用jquery。请注意,已经删除了未使用的脚本(jquery和MicrosoftAjax),否则它会使下载非常大!
VoteControl.css样式表中大多数元素都有类 - 希望名称相当直观。特别是,可能想更改颜色以适应网站的颜色方案 - 对于此,请注意正常和交替行可以(并且在示例中)着色不同。