软件开发框架业务表单页面顶部导航按钮条

软件开发框架业务表单页面顶部的导航按钮,作为页面按钮导航,框架中做出了高大上的页面体验,那么究竟是个什么原理,怎样做出来的呢?

软件开发框架提供的常规导航按钮

软件开发框架导航条


如上图:该导航条默认分Index页、CreateEdit页、Detail页、空导航四种类型,其调用方法示例:

<div class="ibox-title form-group">@Html.INavButton(YunMFramework.Web.AppCode.INavButtonType.Index, false)</div>
<div class="ibox-title form-group">@Html.INavButton(YunMFramework.Web.AppCode.INavButtonType.CE, false)</div>
<div class="ibox-title form-group">@Html.INavButton(YunMFramework.Web.AppCode.INavButtonType.Detail, false)</div>
<div class="ibox-title form-group">@Html.INavButton(YunMFramework.Web.AppCode.INavButtonType.Empty, false)</div>

InavButton方法声明:

public static MvcHtmlString INavButton(this HtmlHelper htmlHelper, INavButtonType nType, bool isPrint = false,bool isDetail=true,bool isCancel=true)

InavButton方法其参数说明:

/// <summary>

/// 页面操作导航按钮

/// </summary>

/// <param name="htmlHelper">需要添加到的页面</param>

/// <param name="nType">导航类型</param>

/// <param name="isPrint">打印是否可用</param>

/// <param name="isDetail">详情是否可用</param>

/// <param name="isCancel">返回是否可用</param>

/// <returns>页面操作导航按钮标签集合</returns>

InavButton方法实现具体请见LayoutExtensions.cs。

支持扩展自定义Button

如果我们需要在页面ibox-title中加入一个自定义的按钮标签,我们只需要在软件开发框架页面ibox-title导航中插入按钮标签即可,如下所示在导航条后插入两个导入导出的按钮(具体见Language文件夹下Edit.cshtml文件):

<div class="ibox-title form-group">
	@Html.INavButton(YunMFramework.Web.AppCode.INavButtonType.CE, false)
	<a href="@Url.Action("ExportXml", new { id = Model.Id })" class="btn btn-warning">@this.Intl("Admin.Configuration.Languages.Export")</a>
	<a href="#ImportModel" class="btn btn-warning" data-toggle="modal" data-target="#ImportModel">@this.Intl("Admin.Configuration.Languages.Import")</a>
</div>


软件开发框架自定义按钮


也支持使用扩展方法来插入按钮标签,具体参见LayoutExtensions.cs中AddSefNavButton扩展方法,该扩展方法参数说明:

public class ProjectNavSefDefineItems
{
	/// <summary>
	/// button id
	/// </summary>
	public string BId { get; set; }
	/// <summary>
	/// button class
	/// </summary>
	public string BClass { get; set; }
	/// <summary>
	/// button ico
	/// </summary>
	public string BIco { get; set; }
	/// <summary>
	/// buttton text
	/// </summary>
	public string BText { get; set; }
}

该参数与Button标签属性一一对应,对应关系:

navButton.AppendFormat("    <button id=\""+t.BId+"\" type=\"button\" class=\"btn "+t.BClass+"\">");
navButton.AppendFormat("        <span class=\""+t.BIco+"\" aria-hidden=\"true\"></span>{0}", t.BText);
navButton.AppendFormat("    </button>");

AddSefNavButton在页面中调用方法同InavButton扩展方法,如下:

@Html.AddSefNavButton (projectNavSefDefineItems)。按钮点击事情的实现可参考编辑按钮(btn_edit)实现方法。

软件开发框架业务表单页面顶部的导航按钮,作为页面按钮导航,框架中做出了高大上的页面体验,你是不是也会了呢!

标签: Web开发框架开发指南红宝书

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » 软件开发框架业务表单页面顶部导航按钮条
本文标题:软件开发框架业务表单页面顶部导航按钮条
本文地址:https://www.hocode.com/OrgTec/Plugin/0029.html

相关文章: Web框架MVC页面布局

电话
电话 18718672256

微信
二维码