[修练营 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的方式来处理。

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

jQuery plug-in的使用与修改
透过jQuery与ajax，调用Web Service
在ASP.NET里面寄送Mail
javascript调用webservice的method，之间传递的消息为JSON格式，使用序列化与反序列化来将字符串对象化。
Server端反序列化JSON后，使用Dictionary来查Key-Value
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里面路径就不用改啦。

接着我们需要的文件有：

contactable.css
jquery.contactable.js
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 ";
        }
        this.Label1.Text = a;
    }

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