Razor 部分页面
最近在和师父一起打野,后台要求挺多的。后台还是用的EF和MVC5,页面使用的razor。
现在是发现好多的页面有太多重复的东西了。
比如说查询页面的字段,比如说列表页,比如说详情方法都有。
灵机一动,可不可以提出来呢?
事实证明可以的
这里需要利用razor的@Html.Partial
首先这个就是局部页面的意思,这里边包括了查询用的字段
然后发现列表页这些重复的就差一个url而已,列表项都一样的。那就想办法给url变成入参传过去。
方法一:
@Html.Partial("~/Views/Shared/App/_PartialReqQuery.cshtml", new ViewDataDictionary { { "url", @Url.Action("GetList") } })
这种是比较直接的获取的东西,一个参数或者参数比较少更适用。
方法二:
@*将查询条件作为部分页面,并传递参数*@ @{ ViewDataDictionary vdd = new ViewDataDictionary(); var url = @Url.Action("GetApplyedReqList") + "?QueryFlag=Applyed"; vdd.Add("url", url); Html.RenderPartial("~/Views/Shared/App/_PartialReqQuery.cshtml", vdd); }
这种方法可以传多个参数,适用多个入参的情况。这里额外介绍下,如果url是拼接出来的,直接这样写即可。
那么在部分页面中的使用方法是,借助ViewData方法来获取参数
var gridurl = '@Html.ViewData["url"]'; $('#List').datagrid({ url: gridurl, width: SetGridWidthSub(10), method: 'post', height: SetGridHeightSub(45), fitColumns: true, sortName: 'CreateTime', sortOrder: 'desc', idField: 'Id', pageSize: 15, pageList: [15, 20, 30, 40, 50], pagination: true, striped: true, //奇偶行是否区分 singleSelect: true,//单选模式 //rownumbers: true,//行号 columns: [[ { field: 'Id', title: '主键', width: 80, hidden: true }, { field: 'Title', title: '职位名称', width: 160, sortable: false }, { field: 'Position', title: '职位类型', width: 80, sortable: false }, { field: 'Country', title: '国家', width: 80, sortable: false }, { field: 'Sex', title: '性别', width: 80, sortable: false }, { field: 'AgeLimit', title: '年龄要求', width: 80, sortable: false }, { field: 'YearSalary', title: '年收入', width: 80, sortable: false }, { field: 'TotalHire', title: '招聘人数', width: 80, sortable: false }, { field: 'Tag', title: '职位标签', width: 80, sortable: false }, { field: 'TotalServiceMoney', title: '总服务费', width: 80, sortable: false }, { field: 'PublishDate', title: '发布时间', width: 80, sortable: false }, { field: 'ReqType', title: '类型', width: 80, hidden: true }, { field: 'Ope', title: '操作', width: 80, formatter: function (value, row) { var btn = '<a onclick="showDetails(\'' + row.Id + '\',\'' + row.Title + '\')" href="javascript:void(0)"> 查看详情</a>'; return btn; } }, ]] });