一个简单的ASP.NEW MVC4网站

　　　　　　　　　　　　　　　　　　　　　　　　　　　　一个简单的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: "用户登录",
                 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=" 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=" 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>密&nbsp;&nbsp;码:</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="498px;" /><button type="button" id="rs" >注册</button>
            <button onclick="Experience();" type="button" id="ty" >直接体验</button>
        </div>
    }
</body>
</html>

　　　　　　前台代码太多就不发了

　　　　　　新建一个类库项目：名字为：MyMusic_Data

　　　　　　添加ADO.NET实体数据模型;名字为MusicModual;

　　　　　　到此网站完成网站第一部；