一个简单的ASP.NEW MVC4网站站(一)
网站地址(7天有效，由于网站暂时没有注册功能只有一个用户，用户名12，密码123)http://liguifa-001-site1.site4future.com/
在vs2012中新建一个空的mvc4项目，系统自动生成许多文件，其中app_start下有一个RouteConfig.cs,叫路由，这里选择默认不做更改,
在Controllers下新建一个控制器叫Home;
代码为：
using System.Linq; using System.Data; using System.Web.Mvc; using System.Collections.Generic; using System.Web.Security; using System.Web.Services.Description; using MyMusic_Data.Modal; using MvcApplication7.MusicClass; namespace MvcApplication7.Controllers { public class HomeController : Controller { // // GET: /Home/ MusicEntities db=new MusicEntities(); public ActionResult Index() { ViewBag.Song=new SongOper().GetSong(d=>d.ID>=1 && d.ID<100,d=>d.ID); ViewBag.Singer = new SingerOper().GetSinger(d => d.ID >= 1 && d.ID < 100); ViewBag.Login = this.IsLogin(); return View(); } public string Login(string user,string pwd) { List<Person_db> person=new PersonOper().GetPerson(d=>d.Usernae==user && d.Password==pwd); if (person.Count==1) { foreach (Person_db p in person) { Session["UserId"] = p.ID; return new JsonMenu() { Status = 1, UserId = 1, Message = null }.ToJson(); } return new JsonMenu() { Status = 1, UserId = 1, Message = null }.ToJson(); } else { return new JsonMenu() { Status = 0, UserId = 0, Message = "账号或密码错误" }.ToJson(); } } private bool IsLogin() { if (Session["UserId"] != null) { return true; } else { return false; } } } }
新建文件夹MusicClass
添加类：JsonMenu，PersonOper，SingerOper，SongOper；
代码分别为：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication7.MusicClass { public class JsonMenu { public long UserId { get; set; } public int Status { get; set; } public string Message { get; set; } public string ToJson() { return "{\"Status\":\"" + Status + "\",\"UserId\":\"" + UserId + "\",\"Message\":\""+Message+"\"}"; } } }
using MyMusic_Data.Modal; using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; using System.Web; namespace MvcApplication7.MusicClass { public class PersonOper { MusicEntities db = new MusicEntities(); public List<Person_db> GetPerson(Expression<Func<Person_db,bool>> where) { return db.Person_db.Where(where).ToList(); } } }
using MyMusic_Data.Modal; using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; using System.Web; namespace MvcApplication7.MusicClass { public class SingerOper { MusicEntities db = new MusicEntities(); public List<Singer> GetSinger(Expression<Func<Singer, bool>> where) { return db.Singer.Where(where).ToList(); } } }
using MyMusic_Data.Modal; using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; using System.Threading.Tasks; using System.Web; namespace MvcApplication7.MusicClass { public class SongOper { MusicEntities db = new MusicEntities(); public List<Song_db> GetSong(Expression<Func<Song_db, bool>> where) { return db.Song_db.Where(where).ToList(); } public List<Song_db> GetSong<TKey>(Expression<Func<Song_db, bool>> where, Expression<Func<Song_db, TKey>> order) { return db.Song_db.Where(where).OrderBy(order).ToList(); } } }
在Home控制器的Index方法上右键新建视图
代码为：
@using MyMusic_Data.Modal; @{ Layout = null; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发哥音乐盒</title> <link rel="shortcut icon" href="~/ICO/MP3.ico" type="image/x-icon" /> <link rel="Stylesheet" href="~/Themes/css/index.css" /> <link rel="Stylesheet" href="~/Themes/css/Login.css" /> <link rel="Stylesheet" href="~/Themes/css/play.css" /> <link href="~/Themes/easyui/themes/gray/easyui.css" rel="stylesheet" /> <link href="~/Themes/easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Themes/easyui/jquery.min.js" type="text/javascript"></script> <script src="~/Themes/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="~/Themes/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript" src="~/Themes/js/jdt.js"></script> <script type="text/javascript" src="~/Themes/js/md5.js" ></script> <script type="text/javascript"> $(function () { $("#login").dialog({ title: "用户登录", width: 520, height: 300, modal: true, closable: false, draggable:false }) }); $.extend($.fn.validatebox.defaults.rules, { Password: { validator: function (value) { return value.search(/^[A-Za-z0-9]+$/) != -1; }, message: '密码格式不正确！' } }); $.extend($.fn.validatebox.defaults.rules, { Username: { validator: function (value) { return value.search(/^[A-Za-z0-9]+$/) != -1; }, message: '用户名格式不正确！' } }); $(document).ready(function () { $("#ty").click(function () { $(".panel").remove(); $(".window-shadow").remove(); $(".window-mask").remove(); }); $("#TTP").click(function () { window.open("/TTPLogin/qqdenglu"); }); $("#login_btn").click(function () { $.ajax({ method:"post", url: "/Home/Login", async: true, data: { user: $("#name").val(), pwd:hex_md5($("#pwd").val()) }, datatype: JSON, callback: loading, success:AjaxSuccess }); }); }); var panel_data = null; function loading() { $.messager.alert("登录提示!", "s"); //panel_data = $("#login").innerHTML; //$("#login").innerHTML="<img src=\"~/img/ajax-loader.gif\" alt=\"\" />"; } function AjaxSuccess(data) { data = eval("("+data+")"); if (data.Status == "1") { $.messager.alert("登录提示!", "登录成功！"); $(".panel").remove(); $(".window-shadow").remove(); $(".window-mask").remove(); } else { $.messager.alert("登录提示!", data.Message); } } </script> </head> <body> <div id="div"> <div id="head"> <img src="/Themes/img/newhead.jpg" alt="发哥MUSIC" /> </div> <div id="nav"> <ul> <li><a>古典</a></li> <li><a>摇滚</a></li> <li><a>爵士</a></li> <li><a>民谣</a></li> <li><a>流行</a></li> <li><a>校园</a></li> <li><a>草原</a></li> <li><a>电子</a></li> <li class="search" id="search_text"><input type="text" /></li> <li class="search" id="search_btn"><img src="~/Themes/img/search.png" /></li> </ul> </div> <div id="body"> <div id="song"> <ul> <li class="frist"><strong>好歌精品</strong></li> @{ int i=2; foreach(Song_db song in ViewBag.Song) { if (i++ % 2 == 0) { <li class="s_bar"> <div dataID="@song.ID" onclick='play(this);'>@song.Name</div> </li> } else { <li class="li s_bar"> <div dataID="@song.ID" onclick='play(this);'>@song.Name</div> </li> } } } </ul> </div> <div id="sing"> <ul> <li class="frist"><strong>热门歌手</strong></li> @{ i=1; foreach(Singer singer in ViewBag.Singer) { if (i++ % 2 != 0) { <li class="s_bar"> <div title="@singer.ID" id="@singer.ID" onclick="searchSong(this);">@singer.Name</div> </li> } else { <li class="li s_bar"> <div title="@singer.ID" id="@singer.ID" onclick="searchSong(this);">@singer.Name</div> </li> } } } </ul> </div> </div> <div style="width: 1366px; clear: both"> <audio src="" id="mp3" loop="true"></audio> </div> </div> <div id="play"> <img src="~/Themes/img/play_btn.png" alt="开始/暂停" id="play_btn" onclick="playSong();"/><img src="~/Themes/img/zt_l.png" id="zt_l" alt="上一曲" /><img src="~/Themes/img/zt_r.png" id="zt_r" alt="下一曲" /> <span id="time_jd_k">00:00</span> <div class="progress-bar blue stripes" id="jd"> <span id="jdt" style="width: 0%" ></span> </div> <span id="time_jd_j">00:00</span> <img id="yl" src="~/Themes/img/yl.png" alt="音量" onmouseover ="song_vol(event);"/> <div id="vol" onmousemove="fill_div(event)" onmouseout ="out_div_vol();"></div> </div> @if (!ViewBag.Login) { <div id="login" style="text-align:center"> <h1>请登录</h1> <span>用户名:</span> <input id="name" class="easyui-validatebox" data-options="validType:'Username'" type="text"/><br /> <span>密 码:</span> <input id="pwd" class="easyui-validatebox" data-options="validType:'Password'" type="password"/><br /> <input type="checkbox" id="cb" />记住我 下次自动登录<br /> <button type="button" id="login_btn">登录</button> <hr style="width:498px;" /><button type="button" id="rs" >注册</button> <button onclick="Experience();" type="button" id="ty" >直接体验</button> </div> } </body> </html>
前台代码太多就不发了
新建一个类库项目：名字为：MyMusic_Data
添加ADO.NET实体数据模型;名字为MusicModual;
到此网站完成网站第一部；
