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="如 [e-mail]" />
        <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="提交" />
         
        <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;
}

源码地址：

以上所述是小编给大家介绍的asp.net实现个人信息注册页面并跳转显示，希望对大家有所帮助