BlogEngine2.9模仿yahoo滚动新闻Widget

widget.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="widget.ascx.cs" Inherits="Widgets.YahooIMGnews.Widget" %>
<ol runat="server" id="olLinks" />
<div>
    <ul runat="server" id="ulLinks" />
    <a class="left" href="#">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right" href="#">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<script type="text/javascript">
$("ul > li[data-id]").hover(
    function () {
        $('li[data-id]').removeClass("active");
        $('ol > li[data-id=' + $(this).attr("data-id") + ']').addClass("active");
        $(this).addClass("active");
    },
    function () {
        $(this).addClass("active");
    }
)
</script>

namespace Widgets.YahooIMGnews {

    using App_Code.Controls;
    using BlogEngine.Core;
    using System;
    using System.Xml;

    /// <summary>
    /// 部件
    /// </summary>
    public partial class Widget : WidgetBase {

        #region 属性

        /// <summary>
        /// 获取一个值,该值指示部件是否是可编辑的。
        /// 可以编辑
        /// </summary>
        public override bool IsEditable {
            get { return true; }
        }

        /// <summary>
        /// 小部件的名称。
        /// Default IMGNews MainTop 
        /// 与目录名称必须一致
        /// </summary>
        public override string Name {
            get { return "YahooIMGnews"; }
        }

        #endregion

        #region 公共方法

        /// <summary>
        /// 该方法代替Page_Load工作。
        /// 使用这种方法代替Page_Load数据绑定等。
        /// </summary>
        public override void LoadWidget() {
            var settings = this.GetSettings();
            var doc = new XmlDocument();

            if (settings["content"] != null) {
                doc.InnerXml = settings["content"];
            }

            var links = doc.SelectNodes("//link");

            if (links == null) {
                return;
            }

            if (links.Count == 0) {
                this.Visible = false;
            } else {
                string active = "active";
                int i = 0;
                foreach (XmlNode node in links) {
                    this.olLinks.InnerHtml += String.Format(
                        "<li data-id="{7}" class="{0}"><a href="{4}" target="_blank"><img src="{1}{2}/{3}" /></a><div><h4><a href="{4}" target="_blank">{5}</a></h4><p>{6}</p></div></li>",
                        active,
                        Utils.ApplicationRelativeWebRoot,
                        settings["imagefolder"],
                        node.Attributes["img"].InnerText,
                        node.Attributes["url"].InnerText,
                        node.Attributes["title"].InnerText,
                        node.Attributes["explain"].InnerText,
                        i
                        );
                    this.ulLinks.InnerHtml += String.Format(
                        "<li data-id="{6}" class="{0}"><a href="{4}" target="_blank"><img src="{1}{2}/{3}" /><p>{5}</p></a></li>",
                        active,
                        Utils.ApplicationRelativeWebRoot,
                        settings["imagefolder"],
                        ThumbFileName(node.Attributes["img"].InnerText),
                        node.Attributes["url"].InnerText,   
                        node.Attributes["title"].InnerText,
                        i
                        );
                    active = "";
                    ++i;
                }
            }
        }
        #endregion

        #region 私有方法 缩略图文件名

        /// <summary>
        /// 缩略图文件名
        /// </summary>
        private string ThumbFileName(string fileName) {
            var fInfo = new System.IO.FileInfo(fileName);
            return fileName.Replace(fInfo.Extension, "_thumb" + fInfo.Extension);
        }

        #endregion

    }

}

edit.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="edit.ascx.cs" Inherits="Widgets.YahooIMGnews.Edit" %>
<div class="form-horizontal">
    <div class="form-group">
        <label for="<%=txtTitle.ClientID %>" class="col-sm-2 control-label">文章标题:</label>
        <div class="col-sm-7">
            <asp:TextBox ID="txtTitle" class="form-control" runat="server" placeholder="文章标题"></asp:TextBox>
        </div>
        <div class="col-sm-3">
            <p class="form-control-static">
                <asp:RequiredFieldValidator runat="Server" ControlToValidate="txtTitle" ErrorMessage="请输入标题" ValidationGroup="add" />
            </p>
        </div>
    </div>
    <div class="form-group">
        <label for="<%=txtExplain.ClientID %>" class="col-sm-2 control-label">文章说明:</label>
        <div class="col-sm-7">
            <textarea runat="server" id="txtExplain" class="form-control" rows="3" placeholder="文章说明（简介）"></textarea>
        </div>
        <div class="col-sm-3">
            <p class="form-control-static">
                <asp:RequiredFieldValidator runat="Server" ControlToValidate="txtExplain" ErrorMessage="请输入文章说明（简介）" ValidationGroup="add" />
            </p>
        </div>
    </div>
    <div class="form-group">
        <label for="<%=txtUrl.ClientID %>" class="col-sm-2 control-label">文章链接:</label>
        <div class="col-sm-7">
            <asp:TextBox ID="txtUrl" class="form-control" runat="server" placeholder="Url"></asp:TextBox>
        </div>
        <div class="col-sm-3">
            <p class="form-control-static">
                <asp:RegularExpressionValidator runat="Server" ControlToValidate="txtUrl" ValidationExpression="(http://|https://|)([w-]+.)+[w-]+(/[w- ./?%&=;~]*)?"
                    ErrorMessage="请输入有效的网址" ValidationGroup="add" />
            </p>
        </div>
    </div>
    <div class="form-group">
        <label for="<%=txtUploadImage.ClientID %>" class="col-sm-2 control-label">图片上传:</label>
        <div class="col-sm-4">
            <asp:FileUpload runat="server" ID="txtUploadImage" />
            <p class="help-block">上传图片请先修改大小、宽高.</p>
        </div>
        <div class="col-sm-1">
            <label for="<%=txtUrl.ClientID %>">图宽：</label>
            <asp:TextBox ID="txtWidth" class="form-control" runat="server" placeholder="数字"></asp:TextBox>
        </div>
        <div class="col-sm-1">
            <label for="<%=txtHeight.ClientID %>">图高：</label>
            <asp:TextBox ID="txtHeight" class="form-control" runat="server" placeholder="数字"></asp:TextBox>
        </div>
        <div class="col-sm-1">
            <label for="<%=txtMaxItems.ClientID %>">数量：</label>
            <asp:TextBox ID="txtMaxItems" class="form-control" runat="server" placeholder="数字"></asp:TextBox>
        </div>
        <div class="col-sm-2">
            <label for="<%=txtImageFolder.ClientID %>">保存目录：</label>
            <asp:TextBox ID="txtImageFolder" class="form-control" runat="server" Text="Content/IMGNews" ReadOnly="True" placeholder="路径"></asp:TextBox>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <asp:Button runat="server" CssClass="btn btn-default" ID="btnAdd" Text="添加" />
        </div>
    </div>
</div>

<div class="table-responsive">
    <asp:GridView runat="server" ID="grid" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" CssClass="table">
        <Columns>
            <asp:TemplateField HeaderText="图片">
                <ItemTemplate>
                    <img src="/Content/IMGNews/<%# thumbName(Eval("img").ToString()) %>" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtImg" Text='<%# Eval("img") %>' />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="文章标题">
                <ItemTemplate>
                    <%# Eval("title") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtTitle" Text='<%# Eval("title") %>' />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="文章说明">
                <ItemTemplate>
                    <%# Eval("explain") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtExplain" Text='<%# Eval("explain") %>' />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="文章链接 Url">
                <ItemTemplate>
                    <%# Eval("url")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox runat="server" ID="txtUrl" Text='<%# Eval("url") %>' />
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

namespace Widgets.YahooIMGnews {

    using App_Code.Controls;
    using BlogEngine.Core;
    using System;
    using System.Data;
    using System.Drawing;
    using System.IO;
    using System.Web.UI.WebControls;
    using System.Xml;

    /// <summary>
    /// YahooIMGnews 窗体小部件的设置与编辑.
    /// </summary>
    public partial class Edit : WidgetEditBase {
        #region 公共方法

        /// <summary>
        /// 将此基本小部件设置如标题。
        /// </summary>
        public override void Save() {
            this.Doc();
        }

        #endregion

        #region 方法

        /// <summary>
        /// 获取XML文档。
        /// </summary>
        /// <returns>XML文档。</returns>
        private XmlDocument Doc() {
            var settings = this.GetSettings();
            var doc = new XmlDocument();
            if (settings["content"] != null) {
                doc.InnerXml = settings["content"];
            }

            return doc;
        }

        /// <summary>
        /// 加载事件  <see cref="E:System.Web.UI.Control.Load"/> 
        /// </summary>
        /// <param name="e">这个 <see cref="T:System.EventArgs"/> 事件包含的数据.</param>
        protected override void OnLoad(EventArgs e) {
            base.OnLoad(e);

            if (!this.Page.IsPostBack) {
                this.BindGrid();
            }

            this.grid.RowEditing        += this.GridRowEditing;
            this.grid.RowUpdating       += this.GridRowUpdating;
            this.grid.RowCancelingEdit  += (o, args) => this.grid.EditIndex = -1;
            this.grid.RowDeleting       += this.GridRowDeleting;
            this.btnAdd.Click           += this.BtnAddClick;

            var settings = this.GetSettings();
            this.txtWidth.Text = settings.ContainsKey("imagewidth") == true ? settings["imagewidth"] : "704.5";
            this.txtHeight.Text = settings.ContainsKey("imageheight") == true ? settings["imageheight"] : "250";
            this.txtMaxItems.Text = settings.ContainsKey("imagemaxitems") == true ? settings["imagemaxitems"] : "50";
        }

        /// <summary>
        /// 表格中删除事件。
        /// </summary>
        /// <param name="sender">
        /// 这一事件的来源。
        /// </param>
        /// <param name="e">
        /// 这个 <see cref="System.Web.UI.WebControls.GridViewDeleteEventArgs"/> 事件包含的数据。
        /// </param>
        private void GridRowDeleting(object sender, GridViewDeleteEventArgs e) {
            var doc = this.Doc();
            var row = this.grid.DataKeys[e.RowIndex];
            if (row != null) {
                var id = (string)row.Value;
                var node = doc.SelectSingleNode(string.Format("//link[@id="{0}"]", id));
                if (node == null) {
                    return;
                }

                if (node.ParentNode != null) {
                    node.ParentNode.RemoveChild(node);
                }
            }

            this.Save(doc);
            this.BindGrid();
        }

        /// <summary>
        /// 表格中更新事件。
        /// </summary>
        /// <param name="sender">
        /// 这一事件的来源。
        /// </param>
        /// <param name="e">
        /// 这个 <see cref="System.Web.UI.WebControls.GridViewUpdateEventArgs"/> 事件包含的数据。
        /// </param>
        private void GridRowUpdating(object sender, GridViewUpdateEventArgs e) {
            var doc = this.Doc();
            var row = this.grid.DataKeys[e.RowIndex];
            if (row != null) {
                var id = (string)row.Value;
                var textboxImg      = (TextBox)this.grid.Rows[e.RowIndex].FindControl("txtImg");
                var textboxTitle    = (TextBox)this.grid.Rows[e.RowIndex].FindControl("txtTitle");
                var textboxExplain  = (TextBox)this.grid.Rows[e.RowIndex].FindControl("txtExplain");
                var textboxUrl      = (TextBox)this.grid.Rows[e.RowIndex].FindControl("txtUrl");
                var node            = doc.SelectSingleNode(string.Format("//link[@id="{0}"]", id));

                if (node == null) {
                    return;
                }

                if (node.Attributes != null) {
                    node.Attributes["img"].InnerText = textboxImg.Text.Trim();
                    node.Attributes["title"].InnerText = textboxTitle.Text.Trim();
                    node.Attributes["explain"].InnerText = textboxExplain.Text.Trim();
                    node.Attributes["url"].InnerText = textboxUrl.Text.Trim();
                }
            }

            this.grid.EditIndex = -1;
            this.Save(doc);
            this.BindGrid();
        }

        /// <summary>
        /// 表格中编辑事件
        /// </summary>
        /// <param name="sender">
        /// 这一事件的来源。
        /// </param>
        /// <param name="e">
        /// 这个 <see cref="System.Web.UI.WebControls.GridViewEditEventArgs"/> 事件包含的数据。
        /// </param>
        private void GridRowEditing(object sender, GridViewEditEventArgs e) {
            this.grid.EditIndex = e.NewEditIndex;
            this.BindGrid();
        }

        /// <summary>
        /// 填充数据。
        /// </summary>
        private void BindGrid() {
            var doc = this.Doc();
            var list = doc.SelectNodes("//link");
            if (list == null || list.Count <= 0) {
                return;
            }

            using (var reader = new XmlTextReader(doc.OuterXml, XmlNodeType.Document, null)) {
                var ds = new DataSet();
                ds.ReadXml(reader);
                this.grid.DataSource = ds;
                this.grid.DataKeyNames = new[] { "id" };
                this.grid.DataBind();
                ds.Dispose();
            }
        }

        /// <summary>
        /// 保存指定的xml文档。
        /// </summary>
        /// <param name="doc">The xml document.</param>
        private void Save(XmlNode doc) {
            var settings = this.GetSettings();
            settings["ImageWidth"]      = this.txtWidth.Text.Trim();    // 图片宽度
            settings["ImageHeight"]     = this.txtHeight.Text.Trim();   // 图片高度
            settings["ImageMaxItems"]   = this.txtMaxItems.Text.Trim(); // 最大展示图片数量
            settings["ImageFolder"]     = this.txtImageFolder.Text.Trim(); // 图片文件存储目录
            settings["content"] = doc.InnerXml;
            this.SaveSettings(settings);
        }

        /// <summary>
        /// 处理单击事件btnAdd。
        /// 添加事件
        /// </summary>
        /// <param name="sender">这一事件的来源。</param>
        /// <param name="e">这个 <see cref="System.EventArgs"/> 事件包含的数据。</param>
        private void BtnAddClick(object sender, EventArgs e) {
            //判断上传控件中是否有值  
            if (this.txtUploadImage.HasFile == false) {
                Response.Write("<script>alert('没有选择图片')</script>");
            } else {
                string fType = txtUploadImage.PostedFile.ContentType;//获取图像的类型  
                if (fType == "image/bmp" || fType == "image/gif" || fType == "image/pjpeg" || fType == "image/jpeg" || fType == "image/x-png" || fType == "image/png") {
                    try {
                        var doc = this.Doc();
                        var links = doc.SelectSingleNode("links");
                        if (links == null) {
                            links = doc.CreateElement("links");
                            doc.AppendChild(links);
                        }

                        XmlNode link = doc.CreateElement("link");

                        var id = doc.CreateAttribute("id");
                        id.InnerText = Guid.NewGuid().ToString();
                        if (link.Attributes != null) {
                            link.Attributes.Append(id);
                        }

                        // img
                        var img = doc.CreateAttribute("img");
                        img.InnerText = this.txtUploadImage.FileName.ToLowerInvariant();
                        Upload();// 私有方法 文件上传
                        if (link.Attributes != null) {
                            link.Attributes.Append(img);
                        }
                        // title
                        var title = doc.CreateAttribute("title");
                        title.InnerText = this.txtTitle.Text.Trim();
                        if (link.Attributes != null) {
                            link.Attributes.Append(title);
                        }
                        // explain
                        var explain = doc.CreateAttribute("explain");
                        explain.InnerText = this.txtExplain.Value.Trim();
                        if (link.Attributes != null) {
                            link.Attributes.Append(explain);
                        }
                        //url
                        var url = doc.CreateAttribute("url");
                        url.InnerText = this.txtUrl.Text.Trim();
                        if (link.Attributes != null) {
                            link.Attributes.Append(url);
                        }

                        links.AppendChild(link);
                        this.Save(doc);
                        this.BindGrid();
                    } catch (Exception ex) {
                        Utils.Log("YahooIMGnews-编辑页面-添加", ex);
                    }
                } else {
                    Response.Write("<script>alert('图片格式出错');</script>");
                }
            }
        }

        #endregion

        #region 私有方法 文件上传

        /// <summary>
        /// 文件上传
        /// </summary>
        private void Upload() {
            // 图片保存绝对全路径 文件夹
            var folder = Server.MapPath(Utils.ApplicationRelativeWebRoot + this.txtImageFolder.Text.Trim());
            // 图片保存绝对全路径 文件名称
            var fileName = Path.Combine(folder, txtUploadImage.FileName.ToLowerInvariant());
            // 判断文件目录是否存在，不存在就建立。
            if (!Directory.Exists(folder))
                Directory.CreateDirectory(folder);
            // 判断当前文件是否有预上传同名文件，有就删除。
            if (File.Exists(fileName))
                File.Delete(fileName);
            // 保存文件
            txtUploadImage.PostedFile.SaveAs(fileName);

            // 生成缩略图
            MakeThumbnail(fileName, thumbName(fileName), 130, 48, "HW");

            //System.Drawing.Image image = System.Drawing.Image.FromFile(fileName);
            //System.Drawing.Image thumb = image.GetThumbnailImage(130, 48, () => false, IntPtr.Zero);
            // 保存缩略图文件
            //thumb.Save(thumbName);
        }

        /// <summary>
        /// 缩略图文件名
        /// </summary>
        /// <param name="fileName"></param>
        /// <returns></returns>
        public string thumbName(string fileName) {
            var fInfo = new System.IO.FileInfo(fileName);
            return fileName.Replace(fInfo.Extension, "_thumb" + fInfo.Extension);
        }

        /// <summary>
        /// 生成缩略图
        /// </summary>
        /// <param name="originalImagePath">源图路径（物理路径）</param>
        /// <param name="thumbnailPath">缩略图路径（物理路径）</param>
        /// <param name="width">缩略图宽度</param>
        /// <param name="height">缩略图高度</param>
        /// <param name="mode">生成缩略图的方式</param>   
        private void MakeThumbnail(string originalImagePath, string thumbnailPath, int width, int height, string mode) {
            // 判断当前文件是否有预上传同名缩略图文件，有就删除。
            if (File.Exists(thumbnailPath))
                File.Delete(thumbnailPath);
            
            System.Drawing.Image originalImage = System.Drawing.Image.FromFile(originalImagePath);

            int towidth = width;
            int toheight = height;

            int x = 0;
            int y = 0;
            int ow = originalImage.Width;
            int oh = originalImage.Height;

            switch (mode) {
                case "HW"://指定高宽缩放（可能变形）               
                    break;
                case "W"://指定宽，高按比例                   
                    toheight = originalImage.Height * width / originalImage.Width;
                    break;
                case "H"://指定高，宽按比例
                    towidth = originalImage.Width * height / originalImage.Height;
                    break;
                case "Cut"://指定高宽裁减（不变形）               
                    if ((double)originalImage.Width / (double)originalImage.Height > (double)towidth / (double)toheight) {
                        oh = originalImage.Height;
                        ow = originalImage.Height * towidth / toheight;
                        y = 0;
                        x = (originalImage.Width - ow) / 2;
                    } else {
                        ow = originalImage.Width;
                        oh = originalImage.Width * height / towidth;
                        x = 0;
                        y = (originalImage.Height - oh) / 2;
                    }
                    break;
                default:
                    break;
            }

            //新建一个bmp图片
            System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);

            //新建一个画板
            System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

            //设置高质量插值法
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

            //设置高质量,低速度呈现平滑程度
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            //清空画布并以透明背景色填充
            g.Clear(Color.Transparent);

            //在指定位置并且按指定大小绘制原图片的指定部分
            g.DrawImage(originalImage, new Rectangle(0, 0, towidth, toheight),
                new Rectangle(x, y, ow, oh),
                GraphicsUnit.Pixel);

            try {
                //以jpg格式保存缩略图
                bitmap.Save(thumbnailPath, System.Drawing.Imaging.ImageFormat.Jpeg);
            } catch (System.Exception e) {
                throw e;
            } finally {
                originalImage.Dispose();
                bitmap.Dispose();
                g.Dispose();
            }
        }

        #endregion
    }

}