ASP.NET實(shí)現(xiàn)個(gè)人信息注冊(cè)頁(yè)面并跳轉(zhuǎn)顯示

更新時(shí)間：2016年12月14日 10:30:18 作者：許佳佳233

這篇文章主要介紹了ASP.NET實(shí)現(xiàn)個(gè)人信息注冊(cè)頁(yè)面并跳轉(zhuǎn)顯示的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

題目

新建一個(gè)MVC項(xiàng)目，利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技術(shù)設(shè)計(jì)一個(gè)個(gè)人信息注冊(cè)頁(yè)面。當(dāng)點(diǎn)擊“提交”按鈕時(shí)，跳轉(zhuǎn)到新的頁(yè)面顯示錄入信息。

基本要求：

用戶名為6-10個(gè)小寫字母（小寫使用正則式驗(yàn)證，且用戶名不能為“wustzz” –用Ajax技術(shù)來(lái)檢測(cè)）；密碼為6位數(shù)字，確認(rèn)密碼不一致時(shí)有提示；籍貫使用級(jí)聯(lián)（jquery實(shí)現(xiàn)）；Email必須符合Email格式；手機(jī)是11位（假設(shè)規(guī)定以1569開頭）；出生年月使用jQuery UI日歷組件設(shè)置；圖片要傳遞到新的頁(yè)面顯示。

這里寫圖片描述

實(shí)現(xiàn)效果

（源碼在文章結(jié)尾）

這里寫圖片描述

主要涉及知識(shí)點(diǎn)

1、基本的html界面編程
2、JavaScript語(yǔ)言
3、jQuery、jQuery UI的使用
4、ASP.NET Request相關(guān)操作
5、了解ASP.Net WEB MVC下的目錄結(jié)構(gòu)以及基礎(chǔ)編程

代碼

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)
      {
        //將圖片存儲(chǔ)在/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='無(wú)錫'>無(wú)錫</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;">請(qǐng)輸入個(gè)人詳細(xì)信息</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>確認(rèn)密碼</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>手機(jī)號(hào)</th>
      <th>
        <input type="text" onblur="checkPhone()" id="phone" name="phone" value="手機(jī)是11位以1569開頭的數(shù)字" />
        <span style="color:red;" id="tip_phone">*</span>
      </th>
    </tr>
    <tr>
      <th>專業(yè)擅長(zhǎng)</th>
      <th>
        <select name="speciality" multiple="multiple">
          <option value="Windows編程">Windows編程</option>
          <option value="單片機(jī)編程">單片機(jī)編程</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>個(gè)人照片</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">
          可以補(bǔ)充一下
        </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;">個(gè)人信息展示</h2>
<table>
  <tr>
    <th>用戶名</th>
    <th>@Request["username"]</th>
  </tr>
  <tr>
    <th>密碼</th>
    <th>@Request["psd"]</th>
  </tr>
  <tr>
    <th>確認(rèn)密碼</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>手機(jī)號(hào)</th>
    <th>@Request["phone"]</th>
  </tr>
  <tr>
    <th>專業(yè)擅長(zhǎng)</th>
    <th>@Request["speciality"]</th>
  </tr>
  <tr>
    <th>業(yè)余愛好</th>
    <th>@Request["hobby"]</th>
  </tr>
  <tr>
    <th>個(gè)人照片</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個(gè)小寫字母";
    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 = "密碼確認(rèn)一致";
    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 = "手機(jī)是11位以1569開頭的數(shù)字";
    return false;
  } else {
    t.innerHTML = "填寫手機(jī)正確";
    return true;
  }
}
function checkAll() {
  if (checkName() && checkPassword() && checkPasswordAgain() &&
    checkEmail() && checkPhone()) {
    return true;
  }
  return false;
}

源碼地址：

http://download.csdn.net/detail/double2hao/9691584

以上所述是小編給大家介紹的ASP.NET實(shí)現(xiàn)個(gè)人信息注冊(cè)頁(yè)面并跳轉(zhuǎn)顯示，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: