Web框架UI系列—平台四种组件类控件一

我们在web框架UI系列--MVC常用控件讲解文章里面介绍了大部分的常用控件,今天我们来介绍一下快速开发平台里面四种组件类控件,是哪四种类型呢?

快速开发平台的四种特殊组件(自定义组件):图片、文件上传、时间、富文本

图片自定义控件

快速开发平台图片类自定义控件

空间展示如图所示,在开发平台中图片类控件其实有两种,上面图示是一种,用于上传到专用图片服务器中的一种控件,其在软件平台中自定义路径为:Views\Shared\EditorTemplates\ImageUploadTemplate.cshtml,部分源码如下:


<p tp="p_uploadImg" style="position:relative;" maxSize="@(System.Configuration.ConfigurationManager.AppSettings["PicMaxSize"])">
    <input id="PicPathList" name="PicPathList" type="hidden" value="@editmodel">
    <span class="spanname" style="padding-top: 40px; padding-bottom: 50px;">

    @if (displayImage)
{
    <img src="@editmodel" displayimage="@displayImage" tp="defaultPic" alt="" id="pic@(fullId)" width="110" height="110" />
}
    @Html.TextBoxFor(w => w, new { style = "border:0;width:0", tp = "hidden" })

    @*自定义文件路径*@@Html.TextBox("cfilePath", Model, new { @class = "input1" + editShow,@style="width:0;height:0;" })

    <input id="file@(fullId)" name="file@(fullName)" style="height: 35px; width: 60px; position: absolute; top: 75px; opacity: 0; *left: 160px; cursor: pointer; filter: alpha(opacity=0);" class="input1" type="file" title="@(Model==null?"上传":"修改")图片" />

        <input class="btn_up" value="@(Model==null?"上传":"修改")图片" tp="uploadImg" servertype="@serverType" specialpath="@filePath" id="btn_upload@(fullId)" type="button" onmouseover="floatFile(this)" />
    @*<input type="button" id="btn_clear@(fullId)" state="@state.ToString()" servertype="@serverType" value="清除" class="btn_up@(editShow)" />*@
    <br />
    <i class="tips">
        (图片大小不能超过@(System.Configuration.ConfigurationManager.AppSettings["PicMaxSize"])M)
    </i>
    @Html.ValidationMessageFor(w => w)
</p>

<script type="text/javascript">
    $('#file@(fullId)').change(fucuploadImg);
</script>

大家可以看到源码段里面有一个javascript脚本:

$('#file@(fullId)').change(fucuploadImg);

fucuploadImg函数是用于调用后台acion上传文件,该函数在uploadfile.js中,截取部分代码如下:

$(this.form).ajaxSubmit({
	url: "/UpLoadControl/Uploadfile",//string filepath, string serverType, string fileName = "fileName", string sizestyle = ""
	data: { "filepath": accBtn.attr("specialPath"), "fileName": accFile.attr("name"), "serverType": accBtn.attr("serverType"), "sizestyle": "" },
dataType: "text",
type:"POST",
success: function (json) {....

url里面是我们后台action函数:/UpLoadControl/Uploadfile,进入UpLoadControl控制器的Uploadfile方法大家可以看下怎么去上传文件的,这里不多阐述。

自定义好一个这样的控件,那么我们该怎么去给页面调用呢,先看下我们一个调用示例(具体可以见简历主从表的创建页面):

@Html.ResourceLabelFor(model => model.Picture, new { @class = "control-label col-md-1 field-required" }) <div class="col-md-3"> @Html.EditorTemplateFor(w => w.Picture, templateName: "ImageUploadTemplate") @Html.ValidationMessageFor(model => model.Picture, "", new { @class = "text-danger" }) </div>

我们可以看到里面的代码段:
@Html.EditorTemplateFor(w => w.Picture, templateName: "ImageUploadTemplate")
这是个HTML页面的扩展方法,用于往HTML页面里面插入我们的自定义控件ImageUploadTemplate,我们大部分的页面扩展方法在Extensions文件夹下LayoutExtensions.cs类里面,具体大家去看代码了。

今天主要给大家讲解了图片控件的自定义方法和调用操作,后面分章节给大家介绍文件上传、时间控件和富文本控件。

快速开发平台图片控件解析

标签: 快速开发平台页面控件组件讲解

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » Web框架UI系列—平台四种组件类控件
本文标题:Web框架UI系列—平台四种组件类控件
本文地址:http://www.hocode.com/OrgTec/UI/0033.html

相关文章: web框架UI系列--MVC常用控件讲解

电话
电话 18718672256

扫一扫
二维码