用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

时间:2023-01-07 14:22:34

前面介绍了微活动《大转盘》 和 《刮刮卡》,这次介绍下微投票,微投票分二种,一种是文本投票, 一种是图片投票。

 

下面介绍文本投票的详细步骤:

1. 新建文本投票活动

 

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

 

  • 代码实现:
<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. 设置投票的选项

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

  • 代码实现:
<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. 设置完成后出现在列表里

用c#开发微信 (17) 微活动 3 投票活动 (文本投票) 

4. 把上面生成的外链代码发送给微信用户

用户收到投票的消息,点击进入后就可以投票了

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

代码实现:

  • 前台显示
<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();

        }

 

 

投票成功后提示

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

 

  • 投票成功
<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;

            }

        }

    }

 

因为前面设置的是投票完成后才可以看到投票结果,所以这里投完票后会显示投票的结果

 

 

 

 

用c#开发微信 (17) 微活动 3 投票活动 (文本投票)

 

 

  • 计算投票数比例
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;

 

 

        }

 

 

 

 

 

 

 

 

用c#开发微信 系列汇总