[修练营 jQuery]使用contactable达到在页面上寄送feedback mail给管理者

[修练营 jQuery]使用contactable达到在页面上寄送feedback mail给管理者

前言

我们常常有个需求，是类似提供客服信箱的功能，让使用者可以很方便的将宝贵的意见feedback给站方管理者。

最常看到的就是，在menu或是页面的footer上，加上一个客服信箱的连结，
或是自己写一个表单，可以帮忙寄送相关资讯给站方。

没错，现在jQuery也有类似这样的plug-in，而且真的相当漂亮，还搭配动画让页面表现的更生动。

这边我要介绍的plug-in叫做“contactable”，目的就是在页面上安插一个表单，类似用书签夹着的效果，
点一下就会像把书签抽出来的效果，这边就可以安插自己想要的表单，来做表单送出的动作。

而我这边表单的动作是寄送mail给管理者。

Solution

原文网址参考：Contactable – A jQuery Plugin
原文demo页面：http://www.theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/contactable/?

由于原本的sample code是使用jQuery的ajax功能，调用php来寄送mail，
我这边要改写成ASP.NET的方式来处理。

简单归纳一下，在这篇文章里面，预计使用到的观念

1. jQuery plug-in的使用与修改
2. 透过jQuery与ajax，调用Web Service
3. 在ASP.NET里面寄送Mail
4. javascript调用webservice的method，之间传递的消息为JSON格式，使用序列化与反序列化来将字符串对象化。
5. Server端反序列化JSON后，使用Dictionary来查Key-Value
6. jQuery Validate(用来处理表单验证，这边只要看的懂code在干嘛，会修改限制条件即可)

这些东西，说真的有点不好意思，我一个都没写过，所以这一篇文章当时练习得有点痛苦，
加上CSS的效果在FireFox与IE效果还不一样，整个过程跟滚天堂路差不多。

这边也附上几个我参考的文章供大家参考一下：

• jQuery plug-in： Contactable – A jQuery Plugin
• Web Service的建立方式：[AjaxControlToolkit]AutoCompleteExtender-无脑开发自动完成
• 用ASP.NET寄送Mail(这边的例子是Gmail)：ASP.NET 使用 GMail 寄信并读取信件范本(Template.htm)寄送邮件 (Gmail Send Mail ASP.NET)
• jQuery使用ajax方式调用Web Service的method：jQuery ajax Call .net 开发 的WebService
• 序列化字符串，使用JSON来传递消息：JSON对象传递

小的这边，主要就是把这几个东西组合在一起而已，接下来让我们一起来玩耍吧。

Play it

首先我们可以先到原文网页去下载我们需要的sample code与需要的文件，下载网址：http://www.theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/contactable/contactable.zip

先在我们的网站，建一个images的folder，里面放着ajax-loader.gif与contact.png(feedback的那张图)，这样等等css里面路径就不用改啦。

接着我们需要的文件有：

1. contactable.css
2. jquery.contactable.js
3. jquery.validate.pack.js

有了这三个档，基本上就完成一半了。这边先介绍一下各个档客制化时，可能需要修改的部分。

contactable.css

我们把重头戏jquery.contactable.js放在最后面，我们先来看.aspx长怎样，这边因为要使用序列化，所以引用了ScriptManager

为了证明我的书签即使出现滚动，也都可以固定在一样的位置(类似ajax control toolkit的always visible extender)，
所以我很无聊的在pageload里面，印出来0~149，让我的页面变长有滚动。

.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        string a = string.Empty;
        for (int i = 0; i < 150; i  )
        {
            a  = i.ToString()   "
";
        }
        this.Label1.Text = a;
    }

好，接着是我们要透过Web Service来送mail的method。这边新增了一个mail.asmx，我们把method叫做SendFeedbackMailbyJson()。

最后，我们就是要来修改jquery.contactable.js，透过jQuery调用我们写好的Web service。

这边只解释一下重要的区块，也就是之后客制化比较需要动到的地方。

首先是表单的部分，这里是用hard-code写死的html画出一张form：

动画参数调整的部分，我在这就不提了，反正看到一堆数字，就是可以调整的部分。

接着是validate与ajax调用Web Service寄送Mail的部分：

其实要改的部分很少，只有调用web service的部分要改一下，
还有使用JSON的方式传递数据，跟sample code上的不一样。

我们来看一下画面，一开始的画面，我把页面scroll bar拉到中间：

当我们点了Feedback的按钮时(它真的长的很像书签啊.....)，就会像把表单拉出来一样。

当我们输入的值格式不符合时，按下SEND按钮，画面会变成这样(一看这么漂亮的颜色，就知道CSS不是我设计的 )：

寄送成功的结果：

最后我们来去看看Mail有没收进来：

结论

透过这个WorkShop，让我练习到很多很基本又很有用的技巧，

也希望可以对大家有帮助，In 91 it !!

Sample Code：contactable.rar

或许您会对下列培训课程感兴趣：

1. 2019/7/27(六)~2019/7/28(日)：演化式设计：测试驱动开发与持续重构 第六梯次（中国台北）
2. 2019/8/16(五)~2019/8/18(日)：【C#进阶设计-从重构学会高易用性与高弹性API设计】第二梯次（中国台北）
3. 2019/9/21(六)~2019/9/22(日)：Clean Coder：DI 与 AOP 进阶实战 第二梯次（中国台北）
4. 2019/10/19(六)：【针对遗留代码加入单元测试的艺术】第七梯次（中国台北）
5. 2019/10/20(日)：【极速开发】第八梯次（中国台北）

想收到第一手公开培训课程资讯，或想询问企业内训、顾问、教练、咨询服务的，请洽 Facebook 粉丝专页：91敏捷开发之路。

原文:大专栏  [修练营 jQuery]使用contactable达到在页面上寄送feedback mail给管理者