前面介绍了微活动《大转盘》 和 《刮刮卡》，这次介绍下微投票，微投票分二种，一种是文本投票， 一种是图片投票。
下面介绍文本投票的详细步骤：
1. 新建文本投票活动
- 代码实现：
<div class="tab-content" >
<dl>
<dt>投票标题：</dt>
<dd>
<asp:TextBox runat="server" ID="title" CssClass="input normal" datatype="*1-100" sucmsg=" " nullmsg=" "></asp:TextBox>
<span class="Validform_checktip">*</span>
</dd>
</dl>
<dl>
<dt >投票图片：</dt>
<dd>
<asp:TextBox runat="server" CssClass="input normal upload-path" ID="votepic"></asp:TextBox>
<div class="upload-box upload-img"></div>
</dd>
</dl>
<dl>
<dt>
图片显示：
</dt>
<dd>
<div class="rule-multi-radio">
<asp:RadioButtonList ID="picdisplay" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Value="True" Selected="True">显示在投票页面</asp:ListItem>
<asp:ListItem Value="False" >不显示在投票页面</asp:ListItem>
</asp:RadioButtonList>
</div>
</dd>
</dl>
<dl>
<dt>投票说明：</dt>
<dd>
<textarea name="txtactContent" rows="2" cols="20" id="txtactContent" class="input" runat="server"></textarea>
<span class="Validform_checktip"></span>
</dd>
</dl>
<dl>
<dt>单选/多选：</dt>
<dd>
<div class="rule-multi-radio">
<asp:RadioButtonList ID="Radio" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Value="True" Selected="True">单选</asp:ListItem>
<asp:ListItem Value="False" >多选</asp:ListItem>
</asp:RadioButtonList>
</div>
</dd>
</dl>
<dl>
<dt>截止时间：</dt>
<dd>
<div class="input-date">
<asp:TextBox runat="server" ID="begindate" CssClass="input date" onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})" datatype="*1-50" errormsg="请选择正确的日期" sucmsg=" " nullmsg=" "></asp:TextBox>
</div>
到
<div class="input-date">
<asp:TextBox runat="server" ID="enddate" CssClass="input date" onfocus="WdatePicker({dateFmt:‘yyyy-MM-dd HH:mm:ss‘})" datatype="*1-50" errormsg="请选择正确的日期" sucmsg=" " nullmsg=" "></asp:TextBox>
</div>
<span class="Validform_checktip">*</span>
</dd>
</dl>
<dl>
<dt>投票结果：</dt>
<dd>
<div class="rule-multi-radio">
<asp:RadioButtonList ID="resultShowtype" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Value="1" Selected="True" >投票前可见</asp:ListItem>
<asp:ListItem Value="2" >投票后可见</asp:ListItem>
<asp:ListItem Value="3" >投票结束可见</asp:ListItem>
</asp:RadioButtonList>
</div>
</dd>
</dl>
<dl style="display:none">
<dt>投票后参加活动：</dt>
<dd>
<asp:TextBox runat="server" CssClass="input normal upload-path" ID="actUrl"></asp:TextBox>
</dd>
</dl>
</div>
2. 设置投票的选项
- 代码实现：
<div class="tab-content" style="display: none">
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle1" runat="server" CssClass="input " datatype="*1-100" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid1" runat="server" CssClass="input small" datatype="n" sucmsg=" " Text="" nullmsg=" " />
<span class="Validform_checktip">*必填项</span>
</dd>
</dl>
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle2" runat="server" CssClass="input " datatype="*1-20" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid2" runat="server" CssClass="input small " datatype="n" sucmsg=" " Text="" nullmsg=" " />
<span class="Validform_checktip">*必填项</span>
</dd>
</dl>
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle3" runat="server" CssClass="input " datatype="*0-100" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid3" runat="server" CssClass="input small" datatype="/^\d*$/" sucmsg=" " Text="" />
</dd>
</dl>
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle4" runat="server" CssClass="input " datatype="*0-100" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid4" runat="server" CssClass="input small" datatype="/^\d*$/" sucmsg=" " Text="" />
</dd>
</dl>
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle5" runat="server" CssClass="input " datatype="*0-100" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid5" runat="server" CssClass="input small" datatype="/^\d*$/" sucmsg=" " Text="" />
</dd>
</dl>
<dl>
<dt>选项标题</dt>
<dd>选项标题：<asp:TextBox ID="xuanxtitle6" runat="server" CssClass="input " datatype="*0-100" sucmsg=" " Text="" />
排序：<asp:TextBox ID="Sortid6" runat="server" CssClass="input small" datatype="/^\d*$/" sucmsg=" " Text="" />
</dd>
</dl>
</div>
3. 设置完成后出现在列表里
4. 把上面生成的外链代码发送给微信用户
用户收到投票的消息，点击进入后就可以投票了
代码实现：
- 前台显示
<div class="vote">
<form class="form" target="_top" runat="server" enctype="multipart/form-data">
<div class="votecontent">
<h2><%=baseinfo.title %></h2>
<span class="date"><%=baseinfo.creatDate.Value.ToString("yyyy-MM-dd") %></span>
<p class="content" id="content"><%=baseinfo.votecontent %></p>
<script src="js/play.js" type="text/javascript"></script>
<p class="modus">单选投票，<span class="number">共有<%=toupNum %>参与投票</span></p>
<ul class="list" id="list">
<asp:Literal ID="litChooes" runat="server"></asp:Literal>
<asp:Literal ID="litMessageList" runat="server" EnableViewState="false"></asp:Literal>
</ul>
<asp:Literal ID="litSubmitBtn" runat="server" EnableViewState="false"></asp:Literal>
<input class="pxbtn" name="button" runat="server" type="button" id="btnSubmit" value="确认提交">
</div>
</form>
</div>
- 后台绑定数据：
public void BindData(int wid, int aid, string openid)
{
//基本表信息
BLL.wx_vote_base baseBll = new BLL.wx_vote_base();
List<Model.wx_vote_base> mlist = baseBll.GetModelList(string.Format(" id={0} and wid={1} ", aid, wid));
if (mlist.Count <= 0 || mlist == null)
{
return;
}
baseinfo = mlist[0];
//投票选项字符串设置
BLL.wx_vote_item itemBll = new BLL.wx_vote_item();
IList<Model.wx_vote_item> itemlist = itemBll.GetModelList("baseid=" + baseinfo.id);
if (itemlist == null || itemlist.Count <= 0)
{
return;
}
ItemListStr(itemlist, openid);
}
public void ItemListStr(IList<Model.wx_vote_item> itemlist, string openid)
{
toupNum = itemlist.Sum(i => i.tpTimes == null ? 0 : i.tpTimes).Value;
BLL.wx_vote_result retBll = new BLL.wx_vote_result();
IList<Model.wx_vote_result> retList = retBll.GetModelList("baseid=" + baseinfo.id);
//投票总数
// int ttCount = retList == null ? 0 : retList.Count;
//toupNum = retBll.GetVotedPersonNum(baseinfo.id);
int itemCount = 0;
float bfb = 0;
hasVoted = false;
bool showReult = false;
//判断这个人是否已经投票了
IList<Model.wx_vote_result> myretList = (from r in retList where r.openId == openid select r).ToArray<Model.wx_vote_result>();
if (myretList != null && myretList.Count > 0)
{
hasVoted = true;
}
//判断是否显示结果
if (baseinfo.resultShowtype == 1)
{
showReult = true;
}
else if (baseinfo.resultShowtype == 2 && hasVoted)
{
showReult = true;
}
else if (baseinfo.resultShowtype == 3 && baseinfo.endTime <= DateTime.Now)
{
showReult = true;
}
StringBuilder sb = new StringBuilder();
StringBuilder choose = new StringBuilder();
Model.wx_vote_item item = new Model.wx_vote_item();
for (int i = 0; i < itemlist.Count; i++)
{
item = itemlist[i];
itemCount = item.tpTimes == null ? 0 : item.tpTimes.Value;
bfb = computeBL(toupNum, itemCount);
sb.Append("<li>");
if (showReult)//投票了
{
sb.Append(" <label for=\"square-checkbox-" + i + "\">");
if (!showReult || (baseinfo.resultShowtype == 1 && !hasVoted))
{
sb.Append("<input class=\"ckbx\" tabindex=\"9\" name=\"id[]\" value=\"" + (i + 1) + "\" type=\"radio\" id=\"square-checkbox-" + i + "\">");
}
sb.Append(" <span>" + item.title + "</span>");
sb.Append(" </label>");
sb.Append(" <div id=\"voteshow" + i + "\" class=\"votebar\">");
sb.Append(" <div class=\"pbg\">");
sb.Append(" <div style=\"width: " + bfb + "%; background-color:" + bkColor(i) + "\" class=\"pbr\"></div>");
sb.Append(" </div>");
sb.Append(" <span class=\"percentage\" style=\"color: " + bkColor(i) + "\">" + bfb + "%<span class=\"user\">(" + itemCount + ")</span></span>");
sb.Append(" </div>");
}
else
{
sb.Append(" <label for=\"square-checkbox-" + i + "\">");
if (!showReult || (baseinfo.resultShowtype == 1 && !hasVoted))
{
sb.Append(" <input class=\"ckbx\" tabindex=\"9\" name=\"id[]\" value=\"" + (i + 1) + "\" type=\"" + chektype() + "\" id=\"square-checkbox-" + i + "\">");
}
sb.Append(" <span>" + item.title + "</span>");
sb.Append(" </label>");
}
sb.Append(" </li>");
}
if (hasVoted)
this.btnSubmit.Visible = false;
if (baseinfo.resultShowtype == 3 && baseinfo.endTime > DateTime.Now && hasVoted)
{
Response.Redirect("tp_result.aspx");
}
litMessageList.Text = sb.ToString();
}
投票成功后提示
- 投票成功
<script>
$(document).ready(function () {
$(".ckbx").click(function () {
var i = 0;
var aa = document.getElementsByName(‘id[]‘);
var mnum = aa.length;
j = 0;
for (i = 0; i < mnum; i++) {
if (aa[i].checked) {
j++;
}
}
if (j > 2) {
$(this).attr("checked", false);
}
});
});
$(document).ready(function () {
var isradio = $(‘input:radio[class="ckbx"]:checked‘).val();
$("#btnSubmit").click(function () {
var wid = $.query.get("wid");
var openid = $.query.get("openid");
var aid = $.query.get("aid");
var selectItemid = "";
if (isradio == "true") {
var list = $(‘input:radio[class="ckbx"]:checked‘).val();
if (list == null) {
alert("请选中一个!");
return false;
}
else {
selectItemid = list;
}
}
else {
$(‘input[class="ckbx"]:checked‘).each(function () {
selectItemid += $(this).val() + ‘,‘;
});
if (selectItemid == "") {
alert("请选中一个!");
return;
}
if (selectItemid.length > 0) {
selectItemid = selectItemid.substring(0, selectItemid.length - 1);
}
}
var submitData = {
wid: wid,
openid: openid,
baseid: aid,
itemid: selectItemid,
isradio: isradio,
myact: "commit"
};
$.post(‘vote.ashx‘, submitData,
function (data) {
if (data.ret == "ok") {
alert(data.content);
window.location.href = location.href;
} else { alert(data.content); }
},
"json")
});
});
</script>
- 插入DB：
public class vote : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string _action = MyCommFun.QueryString("myact");
string openid = MyCommFun.RequestOpenid(); //得到微信用户的openid
Dictionary<string, string> jsonDict = new Dictionary<string, string>();
if (_action == "commit")
{ //提交投票
int wid = MyCommFun.RequestInt("wid");
int baseid = MyCommFun.RequestInt("baseid");
string itemid = HttpContext.Current.Request["itemid"].ToString();
BLL.wx_vote_result resultBll = new BLL.wx_vote_result();
Model.wx_vote_result result = new Model.wx_vote_result();
BLL.wx_vote_item iBll = new BLL.wx_vote_item();
if (MyCommFun.QueryString("isradio") == "true")
{
result.baseid = baseid;
result.itemid = Convert.ToInt32(itemid);
result.openId = openid;
result.createDate = DateTime.Now;
resultBll.Add(result);
iBll.Update(result.itemid.Value, result.baseid.Value);
}
else
{
string[] sArray = itemid.Split(‘,‘);
for (int i = 0; i < sArray.Length; i++)
{
result.baseid = baseid;
result.itemid = Convert.ToInt32(sArray[i]);
result.openId = openid;
result.createDate = DateTime.Now;
resultBll.Add(result);
iBll.Update(result.itemid.Value, result.baseid.Value);
}
}
//AddAdminLog(MXEnums.ActionEnum.Add.ToString(), ""); //记录日志
jsonDict.Add("ret", "ok");
jsonDict.Add("content", "投票成功");
context.Response.Write(MyCommFun.getJsonStr(jsonDict));
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
因为前面设置的是投票完成后才可以看到投票结果，所以这里投完票后会显示投票的结果
- 计算投票数比例
protected float computeBL(int ttCount, int itemCount)
{
if (ttCount == 0)
{
return (float)0.00;
}
float ret = (itemCount * 100.0f) / ttCount;
ret = (float)Math.Round(ret, 2);
return ret;
}