脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → asp.net 页面跳转

ASP.NET实现个人信息注册页面并跳转显示

 更新时间：2016年11月24日 09:40:11   作者：许佳佳233  
这篇文章主要介绍了ASP.NET实现个人信息注册页面并跳转显示的相关资料,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下

题目

新建一个MVC项目，利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技术设计一个个人信息注册页面。当点击“提交”按钮时，跳转到新的页面显示录入信息。

基本要求：

用户名为6-10个小写字母（小写使用正则式验证，且用户名不能为“wustzz” –用Ajax技术来检测）；密码为6位数字，确认密码不一致时有提示；籍贯使用级联（jquery实现）；Email必须符合Email格式；手机是11位（假设规定以1569开头）；出生年月使用jQuery UI日历组件设置；图片要传递到新的页面显示。

这里写图片描述

实现效果

（源码在文章结尾）

这里写图片描述 

这里写图片描述

主要涉及知识点

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开头的数字" />
<span style="color:red;" id="tip_phone">*</span>
</th>
</tr>
<tr>
<th>专业擅长</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>业余爱好</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="提交" />
&nbsp;
<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>专业擅长</th>
<th>@Request["speciality"]</th>
</tr>
<tr>
<th>业余爱好</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位数字";
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开头的数字";
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实现个人信息注册页面并跳转显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • C# 根据ip获取城市等相关信息

    C# 根据ip获取城市等相关信息

    本文将实现：得到真实IP以及所在地详细信息/通过IP得到IP所在地省市/获取HTML源码信息,感兴趣的朋友不妨了解一下，或许对你巩固所学知识有所帮助
    2013-01-01
  • Asp.Net 网站优化系列之数据库优化分字诀上 分库

    Asp.Net 网站优化系列之数据库优化分字诀上 分库

    当我们的数据量很小的时候，我们会把用户表，博客表，论坛表，闪存表等等都砸在一个库里，我们的业务增长的很好，在不久之后我们尽力的优化了查询，但是效果依然不佳，这时候用分字诀的时机到了。
    2010-06-06
  • ASP.NET通用权限验证的实现代码思路

    ASP.NET通用权限验证的实现代码思路

    这篇文章主要介绍了ASP.NET通用权限验证的实现代码思路,需要的朋友可以参考下
    2015-12-12
  • asp.net 生成静态页时的进度条显示

    asp.net 生成静态页时的进度条显示

    本文侧重点在讲解生成静态页的“进度条”，所以将采用模拟的方法。生成静态时需要生成的文章必须非常多，否则进度条可能一闪而过，看不到效果。
    2009-05-05
  • .Net Core实现健康检查的示例代码

    .Net Core实现健康检查的示例代码

    这篇文章主要介绍了.Net Core实现健康检查的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • .NET中的HashSet及原理解析

    .NET中的HashSet及原理解析

    HashSet定义在System.Collections.Generic中，是一个不重复、无序的泛型集合，本文学习下HashSet的工作原理，对.NET中的HashSet相关知识感兴趣的朋友一起看看吧
    2022-03-03
  • .Net Core 2.2升级3.1的避坑指南(小结)

    .Net Core 2.2升级3.1的避坑指南(小结)

    这篇文章主要介绍了.Net Core 2.2升级3.1的避坑指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • .net core项目中常用的几款类库详解（值得收藏）

    .net core项目中常用的几款类库详解（值得收藏）

    这篇文章主要给大家介绍了关于.net core项目中常用的几款类库的相关资料，文章通过示例代码介绍的非常详细，对大家学习或者使用.net core具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • ASP.NET Core依赖注入系列教程之服务的注册与提供

    ASP.NET Core依赖注入系列教程之服务的注册与提供

    这篇文章主要给大家介绍了关于ASP.NET Core依赖注入系列教程之服务的注册与提供的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧
    2018-11-11
  • asp.net GridView模板列中实现选择行功能

    asp.net GridView模板列中实现选择行功能

    近来在项目中用到了GridView控件，用它实现添加、修改、删除、选择、显示复杂表头等功能
    2010-07-07

最新评论