MVC ActionResult 應用及加入會員

7月 10, 2014

MVC ActionResult 應用及加入會員

ActionResult是個抽象類別，可以回傳View之外
還可以回傳不同的東西：

接著要做2件事

把之前做好的Vaild方法引進，導入亂數圖
試做Word下載

首先新增一個Controller叫ToolController，程式碼如下：

public ActionResult GetVaildPic()
{
    Vaild.VaildNum vm = new Vaild.VaildNum(8);
    Session["VaildAns"] = vm.VaildNumAnswer.ToLower();//存放亂數答案
    Bitmap bmp = vm.VaildNumImage;
    System.IO.MemoryStream ms = new System.IO.MemoryStream();//記憶體暫存區
    bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);//存入暫存區
    byte[] bb = ms.ToArray();//轉成byte陣列

    
    return File(bb, "image/jpeg");
    //回傳，後面接的是Content Type，就是告知瀏覽器現在是什麼類型的檔案
}

public ActionResult GetWordFile()
{
    string path = Server.MapPath("/images/文件.doc"); // images/文件.doc 伺服器上實體位置
    return File(path, "application/msword","文件.doc");
    
    //若是office2007之後
    //string path = Server.MapPath("/images/文件.docx"); // images/文件.doc 伺服器上實體位置
    //return File(path, "application/vnd.openxmlformats-officedocument.wordprocessingml.document","文件.docx");

}

比較特別的是ContentType，由於檔案各式各樣
我是直接參考網路上的資料，可以由此去
接著在首頁放如下列連結的網頁原始碼：

<p><a href="tool/GetWordFile">下載word!</a></p>
<p><a href="tool/GetVaildPic">查看亂數圖</a></p>

---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------

以上只是介紹可以利用ActionResult的特性
把所有工具程式碼都集中在一個Controller
接著才是重點，要把新增會員拉進系統，並驗證帳號重複及亂數圖

首先先在ToolController放進2個方法
用於驗證帳號重複及回應亂數圖的答案

//ajax回傳亂數答案
public string GetVaildAnswer()
{
    return Session["VaildAns"].ToString();
}
//ajax驗證帳戶重複
public string CheckAccountDuplicate(string nn)
{
    NWDB.NWDB mydb = new NWDB.NWDB();
    NWDB.IMember im = new NWDB.ImplImember(mydb.Connection);
    mydb.SetMember(im);

    if (mydb.CheckMemberDuplicate(nn))
        return "t";
    else
        return "f";
}

接著，把之前做的加入會員拉進MVC中
先新增一個NewMemberController，並加入View
View的程式碼將要對應的方法改一下，結果如下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddNewMember</title>
    <script src="/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        var address;

        $(document).ready(function () {
            
            //一開始Ajax載入驗證答案
            $.get("/Tool/GetVaildAnswer?tt=" + new Date().getTime(), null, function (xx) {
                $("#VaildAns").val(xx);
                //alert(xx);
            }, "text");

            //更換驗證圖
            $("#RefreshVaildImgBtn").click(function () {
                $("#VaildNumImg").attr("src", "/Tool/GetVaildPic?tt=" + new Date().getTime());
                $.get("/Tool/GetVaildAnswer?tt=" + new Date().getTime(), null, function (xx) {
                    $("#VaildAns").val(xx);
                    //alert(xx);
                }, "text");
            });
            

            //jQuery Ajax載入地址XML
            $.get("/Tools/Address.xml", null, LoadCounty,"xml");

            //縣市變更時，載入鄉鎮
            $("#County").change(LoadRegion);

            //檢查申請帳號重複
            $("#Account").blur(function () {
                if ($(this).val() == "") {
                    $("#AccountCheckResult").text("");
                    return;
                }
                var vv = $(this).val();                
                $.get("/Tool/CheckAccountDuplicate?nn="+vv,null,function(xx){
                    if (xx == "t")
                        $("#AccountCheckResult").text("帳號已被使用").css("color", "red");
                    else
                        $("#AccountCheckResult").text("帳號可以使用").css("color", "blue");
                });
            });


            $("#SubmitBtn").click(CheckForm);

        });

        //載入縣市
        function LoadCounty(xx) {
            address = xx;
            $(address).find("County").each(function () {
                var vv = $(this).attr("Name");
                var s = "<option value=\"" + vv + "\">" + vv + "</option>";
                $(s).appendTo("#County");
            });
        }
        //載入鄉鎮
        function LoadRegion() {

            $("#Region").empty();
            $("<option>--請選擇--</option>").appendTo("#Region");
            
            var cc = $("#County").val();
            if (cc == "--請選擇--") return;

            $(address).find("County[Name=\""+cc+"\"]").children().each(function () {
                var vv = $(this).attr("Name");
                var s = "<option value=\"" + vv + "\">" + vv + "</option>";
                $(s).appendTo("#Region");
            });
        }

        //檢驗表單
        function CheckForm()
        {
            var msg = "";
            var regx = "";
            
            regx = /^[A-Za-z]\w{1,20}$/;
            if ($("#Account").val().length == 0)
                msg += "* 請一定要填寫申請帳號！\n";
            else if (!regx.test($("#Account").val()))
                msg += "* 請填寫正確的帳號！\n";
            
            if ($("#Password").val().length == 0)
                msg += "* 請一定要填寫密碼！\n";

            if ($("#ConfirmPassword").val().length == 0)
                msg += "* 請再次輸入欲使用的密碼！\n";
            else if ($("#Password").val() != $("#ConfirmPassword").val())
                msg += "* 兩次輸入的密碼不相符！\n";
            
            var c1=$("#Sex_Male").prop("checked")?true:false;
            var c2=$("#Sex_Female").prop("checked")?true:false;
            if (!(c1 || c2))
                msg += "* 請選擇性別\n";     
            
            regx = /^\w+([-+.']\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            //@@是因為這是Rozor寫法
            if ($("#EMail").val().length == 0)
                msg += "* 請一定要填寫電子郵件\n";
            else if (!regx.test($("#EMail").val()))
                msg += "* 請填寫正確的電子郵件\n";
                        
            if ($("#AccountCheckResult").text() == "帳號已被使用")
                msg += "* 帳號已被使用，請另行選擇申請帳號\n";
            
            if ($("#VaildAns").val().toLowerCase() != $("#VaildAnsText").val().toLowerCase())
                msg += "* 驗證碼不正確\n";


            if (msg != "") {
                alert(msg);
                return false;
            }
            else
            {
                $("#form1").submit();                
            }
        }
    
        </script>
</head>  
<body>     
<h2>請填寫您的會員資料：</h2>
    <form id="form1" action="http://tw.yahoo.com" method="post">
    <table width="1000">
    <tr>
        <td width="450" valign="top">
        <table cellpadding="8" cellspacing="0" width="100%" border="0">
        <tr>
            <td align="right" class="TitleLabel">
                帳號：</td>
            <td width="300">
                <input id="Account" name="Account" type="text" />
                <span id="AccountCheckResult"></span>
            </td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                密碼：</td>
            <td><input id="Password" name="Password" type="password" /></td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                確認密碼：</td>
            <td><input id="ConfirmPassword" name="ConfirmPassword" type="password" /></td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                姓：</td>
            <td><input id="LastName" name="LastName" type="text" /></td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                名：</td>
            <td><input id="FirstName" name="FirstName" type="text" /></td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                性別：</td>
            <td>
                <input id="Sex_Male" name="Sex" type="radio" value="男" />男  
                <input id="Sex_Female" name="Sex" type="radio" value="女" />女</td>            
        </tr>        
        <tr>
            <td align="right" class="TitleLabel">
                生日：</td>
            <td><input id="Birth" name="Birth" type="text" />(yyyy/mm/dd)</td>            
        </tr>
    </table>
        </td>
        <td valign="top">
        <table cellpadding="8" cellspacing="0" width="100%" border="0">                
        <tr>
            <td align="right" class="TitleLabel">
                地址：</td>
            <td style=" line-height:24pt;">
                <b>縣市：</b><select id="County" name="County">
                    <option>--請選擇--</option>                    
                </select>  <b>鄉鎮市：</b><select id="Region" name="Region">
                    <option>--請選擇--</option>
                </select> <br />
                <b>地址：</b><input id="Address" name="Address" type="text" />
            </td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                學歷：</td>
            <td> 
                <select id="Edu" name="Edu">
                    <option>--請選擇--</option>
                    <option value="小學">小學</option>
                    <option value="國中">國中</option>
                    <option value="高中職">高中職</option>
                    <option value="大專">大專</option>
                    <option value="研究所">研究所</option>
                </select></td>            
        </tr>
        <tr>
            <td align="right" class="TitleLabel">
                電子郵件：</td>
            <td><input id="EMail" name="EMail" style="width: 300px" type="text" /></td>            
        </tr>
        <tr>
            <td align="right" valign="top" class="TitleLabel">
                驗證碼：</td>
            <td>
                <img id="VaildNumImg" src="/Tool/GetVaildPic" /> 
                <input id="RefreshVaildImgBtn" type="button" value="再換一張" /><br />
                <p><input id="VaildAnsText" type="text" /></p>
                <p><input id="VaildAns" type="hidden" /></p>
                </td>
        </tr>
        <tr>
            <td align="right">
                 </td>
            <td>
  <input id="SubmitBtn" type="button" value="加入會員" />
                <input id="Reset1" type="reset" value="重填" /></td>            
        </tr>
    </table>
        </td>
    </tr>    
    </table>
    
    <br />    
    <br />
    
    </form>
</body>
</html>

如此完成新增帳號的動作

搜尋此網誌

programming

MVC ActionResult 應用及加入會員

留言

張貼留言

熱門文章

SQL Server 伺服器角色/資料庫角色/權限給予

SQL Server FUNCTION的使用