Part 52 - Partial views in mvc
来源:互联网 发布:剑灵人女捏脸数据分享 编辑:程序博客网 时间:2024/06/11 18:32
Partial views are used to encapsulate re-usable view logic and are a great means to simplify the complexity of views. These partial views can then be used on multiple views, where we need similar view logic.
If you are using web forms view engine, then the partial views have the extension of .ascx. If the view engine is razor and programming language is c#, then partial views have the extension of .cshtml. On the other hand if the programming language is visual basic, then the extension is .vbhtml.
Let us understand partial views with an example. We want to display, employee photo and his details as shown in the image below.
Index Action() method in HomeController retrurns the list of employees.
public ActionResult Index()
{
SampleDBContext db = new SampleDBContext();
return View(db.Employees.ToList());
}
We will have the following code in Index.cshtml. This view is a bit messy and complex to understand.
@model IEnumerable<MVCDemo.Models.Employee>@foreach (var item in Model){ <table style="font-family:Arial; border:1px solid black; width: 300px"> <tr> <td> <img src="@Url.Content(item.Photo)" alt="@item.AlternateText" /> </td> <td> <table> <tr> <td><b>Age:</b></td> <td>@item.Age</td> </tr> <tr> <td><b>Gender:</b></td> <td>@item.Gender</td> </tr> <tr> <td><b>Salary:</b></td> <td>@item.Salary</td> </tr> </table> </td> </tr> </table>}
To simplify this view, let's encapsulate the HTML and code that produces the employee table in a partial view.
Right click on the "Shared" folder and add a view. Set
View name = _Employee
View engine = Razor
Create a strongly typed view = Checked
Model class = Employee (MVCDemo.Models)
Scaffold template = Empty
Create as a partial view = Checked
This should add "_Employee.cshtml" partial view to the "Shared" folder.
Please note that, partial views can be added to "Shared" folder or to a specific views folder. Partial views that are in the "Shared" folder are available for all the views in the entire project, where as partial views in a specific folder are available only for the views with-in that folder.
Copy and paste the following code in "_Employee.cshtml" partial view
@model MVCDemo.Models.Employee<table style="font-family:Arial; border:1px solid black; width: 300px"> <tr> <td> <img src="@Url.Content(Model.Photo)" alt="@Model.AlternateText" /> </td> <td> <table> <tr> <td><b>Age:</b></td> <td>@Model.Age</td> </tr> <tr> <td><b>Gender:</b></td> <td>@Model.Gender</td> </tr> <tr> <td><b>Salary:</b></td> <td>@Model.Salary</td> </tr> </table> </td> </tr></table>
Now, make the following changes to Index.cshtml view. Notice that the view is much simplified now. To render the partial view, we are using Partial() html helper method. There are several overloaded versions of this method. We are using a version that expects2 parameters, i.e the name of the partial view and the model object.
@model IEnumerable<MVCDemo.Models.Employee>
@foreach (var item in Model)
{
@Html.Partial("_Employee", item)
}
- Part 52 - Partial views in mvc
- Part 50 - Detect errors in views at compile time
- RenderPartial vs RenderAction vs Partial vs Action in MVC Razor
- Part 5 - Html helpers in mvc
- Part 60 - ViewStart in asp.net mvc
- Part 86 - ValidationSummary in asp.net mvc
- Part 69 - Action filters in mvc
- Part 71 - childactiononly attribute in mvc
- Part 72 - HandleError attribute in mvc
- jQuery加载部分视图(Partial Views)
- jQuery加载部分视图(Partial Views)
- Understanding User Interface in Android - Part 4: More Views(译)
- Part 61 - Named sections in layout files in mvc
- Part 2 - View engines in asp.net mvc
- Part 54 - T4 templates in asp.net mvc
- Part 81 - Range attribute in asp.net mvc
- Part 82 - Creating custom validation attribute in asp.net mvc
- Part 83 - RegularExpression attribute in asp.net mvc
- 常犯错误_inflate后找控件
- C语言实验——分数序列
- 漫谈数据库索引
- Java设计模式(行为型)之-访问者模式
- eclipse下cvs的使用
- Part 52 - Partial views in mvc
- TextView设置抗锯齿,及其他常用的一些属性设置
- React Native 学习笔记二十一(导航器三方 插件学习)
- AS启动模拟机时关于“Intel HAXM is required to run this AVD,VT-x is disabled in BIOS”问题的解决
- 初学plc编程注意的问题
- Matlab打开AVI格式的视频并把每帧图片都读取出来
- JBOSS-eap-6.4.0增加oracle数据源
- ffmpeg-3.1.4最新版调用android mediacodec硬解编译脚本
- 可排列的最长公共子序列(Longest common subsequence with permutations allowed)