利用ASP.NET实现一个个人信息注册页面-创新互联

本文章向大家介绍利用ASP.NET实现一个个人信息注册页面的基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

ASP.NET 是什么

ASP.NET 是开源，跨平台，高性能，轻量级的 Web 应用构建框架，常用于通过 HTML、CSS、JavaScript 以及服务器脚本来构建网页和网站。

题目

新建一个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";
}



@section scripts{


  
}
请输入个人详细信息

  
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
    
      
      
    
  
用户名

        
        *
      
密码

        
        *
      
确认密码

        
        *
      
性别

         男
        女
      
籍贯

        
          
          江苏
          湖北
        
        
      
Email

        
        *
      
手机号

        
        *
      
专业擅长

        
          Windows编程
          单片机编程
          ASP.NET编程
          J2EE编程
          JAVA编程
        
      
业余爱好

        足球
        篮球
        排球
        唱歌
        其他
      
个人照片

        
      
出生年月

        
      
备注信息

        
          可以补充一下
        
      

        
         
        
      

Show.cshtml

@{
  ViewBag.Title = "Show";
}
个人信息展示

  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
用户名
@Request["username"]
密码
@Request["psd"]
确认密码
@Request["psd_again"]
性别
@Request["gender"]
籍贯
@Request["native_place"]
@Request["major"]
Email
@Request["email"]
手机号
@Request["phone"]
专业擅长
@Request["speciality"]
业余爱好
@Request["hobby"]
个人照片
出生年月
@Request["birthday"]
备注信息
@Request["more_info"]

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实现一个个人信息注册页面的全部内容了，希望大家多多支持创新互联网站建设公司，！