MVC中Razor的使用 及路径问题
语法:
@ 可以编写一条C#语句
@{} 可以编写一组C#语句
@: 将文字内容直接输出到页面上去
@() 在一句中将一段C#代码包括起来,证明这一句完整的C#代码
引用命名空间:@using 空间名称
Home控制器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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(); } } }
Index视图层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ 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>
insert视图层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ 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>
insert2视图层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@{ 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>
Users属性扩展
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; } } } }
Razor的路径
(1)Html.ActionLink("","","") 在Index视图层
(2)Html.BeginForm("","") 在insert视图层
(3)Url.Action("Insert1", "Home") 在insert2视图层的js中
完!