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 οnclick="showDetails(\'' + row.Id + '\',\'' + row.Title + '\')" href="javascript:void(0)">&nbsp;查看详情</a>';
                        return btn;
                    }
                },
            ]]
        });

 

转载于:https://www.cnblogs.com/Rexcnblog/p/10234202.html