MVC中Razor的使用 及路径问题

语法：

@ 可以编写一条C#语句
@{} 可以编写一组C#语句
@： 将文字内容直接输出到页面上去
@() 在一句中将一段C#代码包括起来，证明这一句完整的C#代码

引用命名空间：@using 空间名称

 

Home控制器

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


namespace MvcApplication4.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult insert()
        {
            return View();
        }

        public ActionResult insert1(Users u)
        {
            new UsersData().insert(u);
            return RedirectToAction("Index","Home");
        }
        public ActionResult insert2()
        {
            return View();
        }



    }
}
View Code

 

Index视图层

@{
    Layout = null;
}
@using MvcApplication4.Models;@*引用命名空间*@
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <table style="background-color:aqua;text-align:center;color:white; width:100%">
            <tr style="background-color:orange;">
                <td>姓名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>生日</td>
                <td>民族</td>
            </tr>
            @{
                List<Users> ulist=new UsersData().all();
                foreach(var u in ulist)
                {
              <tr style="@u.color">
                <td>@u.UserName</td>
                <td>@u.Password</td>
                <td>@u.NickName</td>
                <td>@(u.Sex.Value?"男":"女")</td>
                <td>@u.Birthday.Value.ToString("yyyy-MM-dd")</td>
                <td>@u.Nation1.NationName</td>
            </tr>
                 }
            }


        </table>
        <a href="/home/insert">添加</a>
        @Html.ActionLink("添加成员insert","insert","Home")
        @Html.ActionLink("添加成员insert2","insert2","Home");
    </div>
</body>
</html>
View Code

 

insert视图层

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>insert</title>
</head>
<body>
    @*不写form表单元素标签，用Razor来代替*@
    <div>
        <h1>这是添加界面insert</h1>
        
   
        @{using(Html.BeginForm("insert1","Home"))
        {
            @:用户名<input type="text" name="username" /><br /><br />
            @:密码<input type="text" name="password" /><br /><br />
            @:昵称<input type="text" name="nickname" /><br /><br />
            @:性别<input type="text" name="sex" /><br /><br />
            @:生日<input type="text" name="birthday" /><br /><br />
            @:民族<input type="text" name="nation" /><br /><br />
            <input type="submit" value="提交" />
        }
        }
    @*  此处应该使用@Html.EndForm()结束，但是这样子会报错，所以用using来替代该功能*@
    </div>
</body>
</html>
View Code

 

insert2视图层

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>insert2</title>
</head>
<body>
    <div>
         <h1>这是添加界面insert2</h1>
        
   
        <form name="form1" method="post">
            用户名<input type="text" name="username" /><br /><br />
            密码<input type="text" name="password" /><br /><br />
            昵称<input type="text" name="nickname" /><br /><br />
            性别<input type="text" name="sex" /><br /><br />
            生日<input type="text" name="birthday" /><br /><br />
            民族<input type="text" name="nation" /><br /><br />
            <input type="submit" id="tijiao" value="提交" />
     
         </form>

    </div>
</body>
</html>
<script>
    //在js中设置form表单的提交路径
    document.getElementById("tijiao").onclick = function () {

        this.form.setAttribute("action","@Url.Action("insert1","Home")");
        this.form.submit();
    };





</script>
View Code

 

Users属性扩展

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

namespace MvcApplication4.Models
{
    public partial class Users
    {
        public string color
        {
            get
            {
                string end = "";
                if (Convert.ToBoolean(this._Sex))
                {
                    end = "background-color:gray;";
                }
                else
                {
                    end = "background-color:red;";
                }

                return end;
            }
        }


    }
}
View Code

 

Razor的路径

（1）Html.ActionLink("","","")     在Index视图层

（2）Html.BeginForm("","")      在insert视图层

（3）Url.Action("Insert1", "Home")    在insert2视图层的js中

 

完！

 

posted @ 2016-12-05 20:16  冲天小肥牛  阅读(282)  评论(0)  编辑  收藏  举报