MVC ActionResult 應用及加入會員
ActionResult是個抽象類別，可以回傳View之外
還可以回傳不同的東西：
接著要做2件事
我是直接參考網路上的資料，可以由此去
接著在首頁放如下列連結的網頁原始碼：
---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
以上只是介紹可以利用ActionResult的特性
把所有工具程式碼都集中在一個Controller
接著才是重點，要把新增會員拉進系統，並驗證帳號重複及亂數圖
首先先在ToolController放進2個方法
用於驗證帳號重複及回應亂數圖的答案
接著，把之前做的加入會員拉進MVC中
先新增一個NewMemberController，並加入View
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>
如此完成新增帳號的動作
留言
張貼留言