ViewComponent組件在框架中使用

0、組件介紹

組件技術是.netCore裏邊替代@html.action的解決方案,不過我感覺沒有@html.action使用起來方便,沒辦法,不支持了。

1、組件定義

1.1 能返回主界面和數據列表的View組件

    [ViewComponent(Name = "sys_BillAttach")]
    public class sys_BillAttach : ViewComponent {
        public IViewComponentResult Invoke(db.view.sys_BillAttach model) {
            model.Search();
            if (rui.requestHelper.isAjax())
                return View("_ShowData" + model.opMode, model);
            return View("SelectPartial", model);
        }
    }

根據不同的請求,返回不同的視圖。所返回的視圖內容都不會套用母版頁,在組件的視圖目錄中需要提供兩個視圖。

1.2 只返回數據列表的view組件

    /// <summary>
    /// 角色關聯用戶
    /// </summary>
    [ViewComponent(Name = "rbac_RoleUser")]
    public class rbac_RoleUser : ViewComponent {
        public IViewComponentResult Invoke(db.view.rbac_RoleUser model) {
            model.Search();
            return View("_ShowDataLink", model);
        }
    }

只返回一種類型的視圖,在視圖目錄中只需要提供一個視圖即可。

1.3、組件視圖文件存放位置1 

如果視圖組件只是給某個Controller使用,則放在該Controller對應View目錄中

例如:rbac_RoleUser組件,只被rbac_RoleUser控制器使用。在rbac_RoleUser視圖目錄中創建Components目錄,並把組件的視圖目錄放入其中。

1.4、組件視圖文件存放位置2,推薦

如果視圖組件被多個Controller使用,則需要放到共享目錄中。

例如:關聯附件視圖組件,會被多個controller使用到,需要把組件的視圖目錄放到shared/Components目錄中。

2、組件的調用

組建不支持Http直接請求,這就是不如@Html.aciton使用起來方便的地方。

組件只能在視圖和Action中調用。

2.1、在View中調用

如果要把視圖組件視圖內容嵌入某個視圖中,則通過View中調用視圖組件來實現。

例如:嵌入關聯附件組件的視圖內容,返回的是整個主界面內容。

<fieldset>
    <legend>相關附件</legend>
    @{
        db.view.sys_BillAttach modelAttach = new db.view.sys_BillAttach();
        modelAttach.attachResourceCode = "rbac_Resource";
        modelAttach.attachKeyCode = Model.resourceCode;
        modelAttach.opMode = "Update";
    }
    @await Component.InvokeAsync("sys_BillAttach", modelAttach)
</fieldset>

例如:嵌入角色用戶關聯組件的視圖內容,該組件只返回了數據列表內容。

    <div title="已關聯賬戶" style="padding: 0px;">
        <div class="container" id="containerLink" data-url="/admin/rbac_RoleUser/SelectLinkUsers">
            <div class="search">
                <input type="hidden" name="rowID" value="@rui.requestHelper.getValue("rowID")" />
                <input type="hidden" name="searchType" value="link" />
                <span>所屬部門:@Html.DropDownListFor(a => a.deptCode, db.bll.sbs_Dept.bindDdl(true), new { @class = "ddlDeptLink" })</span>
                <span>用戶編號:@Html.TextBoxFor(a => a.userCode)</span>
            </div>
            <div class="toolbar">
                <a class="opSearch">查詢</a>
                @Html.ActionLink("刪除選擇項", "deleteLinkUsers", new { rowID = rui.requestHelper.getValue("rowID") }, new { @class = "listBatchOp opSave", data_msg = "確認刪除選擇?" })
            </div>
            <div class="pager"></div>
            <div class="showData cbxCol">
                @{
                    db.view.rbac_RoleUser modelLink = new db.view.rbac_RoleUser();
                    modelLink.searchType = "link";
                    modelLink.rowID = rui.requestHelper.getValue("rowID");
                }
                @await Component.InvokeAsync("rbac_RoleUser", modelLink)
            </div>
        </div>
    </div>  

2.2、在Action中調用

如果頁面上有異步刷新的操作,返回的局部內容是視圖組件的視圖內容,則需要在普通的Controller內提供Action,並在Action中調用視圖組件來返回所需要的視圖組件的視圖內容。

例如:附件列表中數據搜索和分頁時請求新的數據

//展示單據的附件列表
public ActionResult SelectPartial(db.view.sys_BillAttach model)
{
    return ViewComponent("sys_BillAttach", model);
}

例如:已關聯和未關聯用戶數據刷新時,返回數據表格。

//查詢已關聯用戶(分部Action)
public ActionResult SelectLinkUsers(db.view.rbac_RoleUser model)
{
    return ViewComponent("rbac_RoleUser", model);
}

//查詢未關聯用戶(分部Action)
public ActionResult SelectNoLinkUsers(db.view.rbac_RoleUser model)
{
    return ViewComponent("rbac_RoleUser", model);
}

調用視圖組件的Action是不需要再創建對應視圖了。

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章