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)">&nbsp;查看详情</a>';
                        return btn;
                    }
                },
            ]]
        });

 

posted @ 2019-01-07 16:51  Rexcnblog  阅读(850)  评论(0编辑  收藏  举报