欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何使用ASP.NET实现个人信息注册页面并跳转显示功能

来源:本站整理 作者:佚名 时间:2016-12-27 TAG: 我要投稿

题目
新建一个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?www.myhack58.com
    var fileName = Request.MapPath("~/Content/UpLoad/") + "111.png?www.myhack58.com";
    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>
 $(document).ready(function () {
  $("#native_place").change(function () {
   switch ($("#native_place").val()) {
    case "江苏":
     $("#major").empty();
     $("#major").append("");
     $("#major").append("江阴");
     $("#major").append("无锡");
     $("#major").append("常州");
     break;
    case "湖北":
     $("#major").empty();
     $("#major").append("");
     $("#major").append("武汉");
     $("#major").append("武昌");
     $("#major").append("荆州");
     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" />
 
  $(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">
 
 
   用户名th>
  
    input type="text" onblur="checkName()" name="username" id="username" />
    span style="color:red;" id="tip_name">*span>
   th>
  tr>
 
   密码th>
  
    input type="text" onblur="checkPassword()" name="psd" id="psd" />
    span style="color:red;" id="tip_psd">*span>
   th>
  tr>
 

[1] [2] [3]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载