.net mvc5框架做的登录窗口,asp.net入门第一课必学

首先先建立项目,在controller文件夹下控制器,在view文件夹下建立同名文件夹,以及视图文件(cshtml),视图文件可以通过控制器里index方法右键快速生成,记住生成的时候不要选择带模板的。文件目录如下:

.net mvc5框架做的登录窗口,asp.net入门第一课必学

接下来是控制器文件的内容:TestController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication21.Controllers
{
    public class TestController : Controller
    {
 
        public ActionResult Index()
        {
            ViewBag.userName2 = "张三";
            List<string> skinColor = new List<string>();
            skinColor.Add("yellow");
            skinColor.Add("white");
            skinColor.Add("black");
            ViewBag.skin = skinColor;
            return View();
        }

        public ActionResult login( string username,string age,string skinSelect) //参数必须与html里的name相同才可获取到值
        {
            string logCortern= " 姓名是" + username +"年龄是"+age +"皮肤是"+ skinSelect;
            return Content (logCortern);
        }
    }
}

接下来是视图文件里的内容:


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <form action=" login" method="post">
            姓 名:<input type="text" name="UserName" value="@ViewBag.userName2" />
            密码:<input type="password" name="PassWord" value="" />
            年龄:@Html.TextBox("age", "18")   @*表单的第二种表单写法,vs特别优化过的*@
               <select name="skinSelect">
                   @foreach (var item in ViewBag.skin)
                   {
                   <option value="@item">@item</option>
                   }
               </select>
            <input type="submit" value="登录" />
        </form>
    </div>
</body>
</html>

最后我们来看下效果:这是index页面,也就是登录前页面

.net mvc5框架做的登录窗口,asp.net入门第一课必学

这个是登录后的页面,用来接收登录的信息

.net mvc5框架做的登录窗口,asp.net入门第一课必学