ASP.NET實現(xiàn)個人信息注冊頁面并跳轉顯示
更新時間：2016年11月24日 09:40:11 作者：許佳佳233
這篇文章主要介紹了ASP.NET實現(xiàn)個人信息注冊頁面并跳轉顯示的相關資料,本文圖文并茂給大家介紹的非常詳細，需要的朋友可以參考下
題目
新建一個MVC項目，利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技術設計一個個人信息注冊頁面。當點擊“提交”按鈕時，跳轉到新的頁面顯示錄入信息。
基本要求：
用戶名為6-10個小寫字母（小寫使用正則式驗證，且用戶名不能為“wustzz” –用Ajax技術來檢測）；密碼為6位數(shù)字，確認密碼不一致時有提示；籍貫使用級聯(lián)（jquery實現(xiàn)）；Email必須符合Email格式；手機是11位（假設規(guī)定以1569開頭）；出生年月使用jQuery UI日歷組件設置；圖片要傳遞到新的頁面顯示。
實現(xiàn)效果
（源碼在文章結尾）
主要涉及知識點
1、基本的html界面編程
2、JavaScript語言
3、jQuery、jQuery UI的使用
4、ASP.NET Request相關操作
5、了解ASP.Net WEB MVC下的目錄結構以及基礎編程
代碼
ProjectController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ProjectOne.Controllers
{
public class ProjectController : Controller
{
// GET: Project
public ActionResult Index()
{
return View();
}
public ActionResult Show()
{
//獲取圖片文件
HttpPostedFileBase file = Request.Files["filename"];
if(file != null)
{
//將圖片存儲在/Content/UpLoad/目錄下，名字為111.png
var fileName = Request.MapPath("~/Content/UpLoad/") + "111.png";
file.SaveAs(fileName);
}
return View();
}
}
}
Index.cshtml
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/my_script.js"></script>
<script src="~/jquery-ui-1.11.1.custom/external/jquery/jquery.js"></script>
<script>
$(document).ready(function () {
$("#native_place").change(function () {
switch ($("#native_place").val()) {
case "江蘇":
$("#major").empty();
$("#major").append("<option value=''></option>");
$("#major").append("<option value='江陰'>江陰</option>");
$("#major").append("<option value='無錫'>無錫</option>");
$("#major").append("<option value='常州'>常州</option>");
break;
case "湖北":
$("#major").empty();
$("#major").append("<option value=''></option>");
$("#major").append("<option value='武漢'>武漢</option>");
$("#major").append("<option value='武昌'>武昌</option>");
$("#major").append("<option value='荊州'>荊州</option>");
break;
}
});
});
</script>
@section scripts{
<script src="~/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<link href="~/jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#birthday").datepicker({
dateFormat: "yy-mm-dd",
inline: true
});
});
</script>
}
<h2 style="color:red;font-family:楷體;font-size:30px;">請輸入個人詳細信息</h2>
<form onsubmit="return checkAll()" action="~/Project/Show" method="post" enctype="multipart/form-data">
<table>
<tr>
<th>用戶名</th>
<th>
<input type="text" onblur="checkName()" name="username" id="username" />
<span style="color:red;" id="tip_name">*</span>
</th>
</tr>
<tr>
<th>密碼</th>
<th>
<input type="text" onblur="checkPassword()" name="psd" id="psd" />
<span style="color:red;" id="tip_psd">*</span>
</th>
</tr>
<tr>
<th>確認密碼</th>
<th>
<input type="text" onblur="checkPasswordAgain()" name="psd_again" id="psd_again" />
<span style="color:red;" id="tip_psd_again">*</span>
</th>
</tr>
<tr>
<th>性別</th>
<th>
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" />女
</th>
</tr>
<tr>
<th>籍貫</th>
<th>
<select id="native_place" name="native_place">
<option value=""></option>
<option value="江蘇">江蘇</option>
<option value="湖北">湖北</option>
</select>
<select id="major" name="major"></select>
</th>
</tr>
<tr>
<th>Email</th>
<th>
<input type="text" onblur="checkEmail()" id="email" name="email" value="如 xujiajia@qq.com" />
<span style="color:red;" id="tip_email">*</span>
</th>
</tr>
<tr>
<th>手機號</th>
<th>
<input type="text" onblur="checkPhone()" id="phone" name="phone" value="手機是11位以1569開頭的數(shù)字" />
<span style="color:red;" id="tip_phone">*</span>
</th>
</tr>
<tr>
<th>專業(yè)擅長</th>
<th>
<select name="speciality" multiple="multiple">
<option value="Windows編程">Windows編程</option>
<option value="單片機編程">單片機編程</option>
<option value="ASP.NET編程">ASP.NET編程</option>
<option value="J2EE編程">J2EE編程</option>
<option value="JAVA編程">JAVA編程</option>
</select>
</th>
</tr>
<tr>
<th>業(yè)余愛好</th>
<th>
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="唱歌" />唱歌
<input type="checkbox" name="hobby" value="其他" />其他
</th>
</tr>
<tr>
<th>個人照片</th>
<th>
<input type="file" id="filename" name="filename" />
</th>
</tr>
<tr>
<th>出生年月</th>
<th>
<input type="text" id="birthday" name="birthday" readonly="readonly" />
</th>
</tr>
<tr>
<th>備注信息</th>
<th>
<textarea name="more_info" cols="40" rows="8">
可以補充一下
</textarea>
</th>
</tr>
<tr>
<th></th>
<th>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</th>
</tr>
</table>
</form>
Show.cshtml
@{
ViewBag.Title = "Show";
}
<h2 style="color:red;font-family:楷體;font-size:30px;">個人信息展示</h2>
<table>
<tr>
<th>用戶名</th>
<th>@Request["username"]</th>
</tr>
<tr>
<th>密碼</th>
<th>@Request["psd"]</th>
</tr>
<tr>
<th>確認密碼</th>
<th>@Request["psd_again"]</th>
</tr>
<tr>
<th>性別</th>
<th>@Request["gender"]</th>
</tr>
<tr>
<th>籍貫</th>
<th>@Request["native_place"]</th>
<th>@Request["major"]</th>
</tr>
<tr>
<th>Email</th>
<th>@Request["email"]</th>
</tr>
<tr>
<th>手機號</th>
<th>@Request["phone"]</th>
</tr>
<tr>
<th>專業(yè)擅長</th>
<th>@Request["speciality"]</th>
</tr>
<tr>
<th>業(yè)余愛好</th>
<th>@Request["hobby"]</th>
</tr>
<tr>
<th>個人照片</th>
<th><img id="img" src="~/Content/UpLoad/111.png" alt="" /></th>
</tr>
<tr>
<th>出生年月</th>
<th>@Request["birthday"]</th>
</tr>
<tr>
<th>備注信息</th>
<th>@Request["more_info"]</th>
</tr>
</table>
my_script.js
function checkName() {
var u = document.getElementById("username");
var t = document.getElementById("tip_name");
var reg = /^[a-z]{6,10}$/;
if (!reg.test(u.value)) {
t.innerHTML = "用戶名為6-10個小寫字母";
return false;
} else {
if (u.value == "wustzz") {
t.innerHTML = "用戶名不可以為wustzz";
return false;
}
t.innerHTML = "用戶名填寫正確";
return true;
}
}
function checkPassword() {
var p = document.getElementById("psd");
var t = document.getElementById("tip_psd");
var reg = /^\d{6}$/;
if (!reg.test(p.value)) {
t.innerHTML = "密碼為6位數(shù)字";
return false;
} else {
t.innerHTML = "密碼填寫正確";
return true;
}
}
function checkPasswordAgain() {
var p1 = document.getElementById("psd");
var p2 = document.getElementById("psd_again");
var t = document.getElementById("tip_psd_again");
if (p1.value != p2.value) {
t.innerHTML = "密碼前后不一致"
return false;
} else {
t.innerHTML = "密碼確認一致";
return true;
}
}
function checkEmail() {
var e = document.getElementById("email");
var t = document.getElementById("tip_email");
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (!reg.test(e.value)) {
t.innerHTML = "必須填寫Email格式";
return false;
} else {
t.innerHTML = "Email填寫正確";
return true;
}
}
function checkPhone() {
var p = document.getElementById("phone");
var t = document.getElementById("tip_phone");
var reg = /^1569\d{7}$/;
if (!reg.test(p.value)) {
t.innerHTML = "手機是11位以1569開頭的數(shù)字";
return false;
} else {
t.innerHTML = "填寫手機正確";
return true;
}
}
function checkAll() {
if (checkName() && checkPassword() && checkPasswordAgain() &&
checkEmail() && checkPhone()) {
return true;
}
return false;
}
源碼地址：
http://xiazai.jb51.net/201611/yuanma/ProjectOne
以上所述是小編給大家介紹的ASP.NET實現(xiàn)個人信息注冊頁面并跳轉顯示，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文將實現(xiàn)：得到真實IP以及所在地詳細信息/通過IP得到IP所在地省市/獲取HTML源碼信息,感興趣的朋友不妨了解一下，或許對你鞏固所學知識有所幫助2013-01-01
Asp.Net 網(wǎng)站優(yōu)化系列之數(shù)據(jù)庫優(yōu)化分字訣上 分庫
當我們的數(shù)據(jù)量很小的時候，我們會把用戶表，博客表，論壇表，閃存表等等都砸在一個庫里，我們的業(yè)務增長的很好，在不久之后我們盡力的優(yōu)化了查詢，但是效果依然不佳，這時候用分字訣的時機到了。2010-06-06
這篇文章主要介紹了ASP.NET通用權限驗證的實現(xiàn)代碼思路,需要的朋友可以參考下2015-12-12
本文側重點在講解生成靜態(tài)頁的“進度條”，所以將采用模擬的方法。生成靜態(tài)時需要生成的文章必須非常多，否則進度條可能一閃而過，看不到效果。2009-05-05
這篇文章主要介紹了.Net Core實現(xiàn)健康檢查的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
HashSet定義在System.Collections.Generic中，是一個不重復、無序的泛型集合，本文學習下HashSet的工作原理，對.NET中的HashSet相關知識感興趣的朋友一起看看吧2022-03-03
這篇文章主要介紹了.Net Core 2.2升級3.1的避坑指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要給大家介紹了關于.net core項目中常用的幾款類庫的相關資料，文章通過示例代碼介紹的非常詳細，對大家學習或者使用.net core具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
這篇文章主要給大家介紹了關于ASP.NET Core依賴注入系列教程之服務的注冊與提供的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧2018-11-11
asp.net GridView模板列中實現(xiàn)選擇行功能
近來在項目中用到了GridView控件，用它實現(xiàn)添加、修改、刪除、選擇、顯示復雜表頭等功能2010-07-07