C# 获取未读qq邮件并显示在渲染到前端页面上，在后台添加前端代码的样式，和$的应用

本文链接：https://blog.youkuaiyun.com/m0_58516120/article/details/131495963

解析我的代码

后台添加css样式，有五种办法。希望对各位有帮助！

方法一：直接写js代码封装在string中，js代码必须有<script></script>标签里面编写。

但是，在这里写js代码的话，要熟记各种名字，没有提示器。

然后通过Page.ClientScript.RegisterStartupScript(GetType(), "AnimateIconScript", script);将js代码渲染到页面上。

表示：用querySelector()方法获取前端的图标控件，让图标晃动起来。在css文件定义swing动画
string script = @"
                <script>
                    window.onload = function() {
                        var element = document.querySelector('.类选择器名');
                        //添加的动画效果
                        element.style.animation = 'swing 5s infinite linear';
                        element.style.webkitAnimation = 'swing 5s infinite linear';
                }
                </script>";
            //js代码渲染到页面
            Page.ClientScript.RegisterStartupScript(GetType(), "AnimateIconScript", script);

方法二：通过获取控件，添加Attributes["style"]的属性编写相关的css样式。

var listItem = new HtmlGenericControl("li");// 创建一个 <li> 元素
var div = new HtmlGenericControl("div");// 创建一个 <div> 元素
var span = new HtmlGenericControl("p");
span.Attributes["style"] = "margin-left:10px;margin-bottom:10px;";

方法三：设置控件的CssClass属性。

在css编写样式：

.my-class{animation ：'swing 5s infinite linear';--webkitAnimation ：'swing 5s infinite linear';}
span.CssClass = "my-class";

方法四：设置标签的class属性来添加样式。

string divHtml = "<div class=\"my-class\">Content</div>";

方法五：动态生成样式标签

// 创建样式标签
Literal styleTag = new Literal();
styleTag.Text = "<style>.my-class { color: red; }</style>";

// 将样式标签添加到页面的<head>标签中
Page.Header.Controls.Add(styleTag);

后台创建<li>控件

HtmlGenericControl：是用于动态生成和操作HTML元素的类。

InnerHtml属性允许你通过设置HTML格式的字符串来指定控件的内容，并且可以包含各种HTML标记和元素。

var listItem = new HtmlGenericControl("li");// 创建一个 <li> 元素
var p= new HtmlGenericControl("p");// 创建一个 p> 元素

                        
p.InnerHtml = $"发件人：<span style='font-weight:bold;'>{ message.From} </span><br />主要内容： <span style='font-weight:bold;'>{message.Subject}</span><br /> 时间：<span style='font-weight:bold;'>{message.Date}</span>";

// 将 <p> 添加到 <li> 中
listItem.Controls.Add(p);
// 将 <li> 添加到 <ul> 中
ul控件的id.Controls.Add(listItem);

$：允许你在字符串中嵌入表达式或变量的值，使代码更简洁和易读。

全部代码：

using MailKit;
using MailKit.Net.Imap;
using MailKit.Search;
using SchoolChild.BLL;
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.HtmlControls;

/// <summary>
/// 因为我的邮件是在每一个页面都可以显示，所以我把它写在模板上
/// </summary>

public partial class MasterPage : System.Web.UI.MasterPage
{
    TeacherServer teacherSer = new TeacherServer();
    public bool IsShaking { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        //判断是否登录
        if (Session["AdminId"] == null)
        {
            Response.Redirect("~/Login.aspx");
        }
        //IsPostBack()是否第一次初始化
        if (!IsPostBack)
        {
            Sname.Text = "你好！" + Session["AdminName"].ToString();
            //邮件
            var email = teacherSer.GetTidToEmail(int.Parse(Session["AdminName"].ToString()));
            using (var client = new ImapClient())
            {
                client.Connect("imap.qq.com", 993, true);
                client.Authenticate(email.T_Email, email.pwds);

                var inbox = client.Inbox;
                inbox.Open(FolderAccess.ReadOnly);

                var query = SearchQuery.NotSeen;
                foreach (var uid in inbox.Search(query))
                {
                    var message = inbox.GetMessage(uid);
                    if (message != null)
                    {
                        IsShaking = true;
                        //string script = @"
                        //<script>
                        //    window.onload = function() {
                        //        var element = document.querySelector('.notification-info');
                        //        element.style.animation = 'swing 5s infinite linear';
                        //        element.style.webkitAnimation = 'swing 5s infinite linear';
                        //}
                        //</script>";
                        将 JavaScript 代码注册到 Web 页面中
                        //Page.ClientScript.RegisterStartupScript(GetType(), "AnimateIconScript", script);

                        var listItem = new HtmlGenericControl("li");// 创建一个 <li> 元素
                        var div = new HtmlGenericControl("div");// 创建一个 <h5> 元素
                        var span = new HtmlGenericControl("p");
                        span.Attributes["style"] = "margin-left:10px;margin-bottom:10px;";
                        // 在这里处理每个未读邮件，例如显示在网站页面上
                        span.InnerHtml = $"发件人：<span style='font-weight:bold;'>{ message.From} </span><br />主要内容： <span style='font-weight:bold;'>{message.Subject}</span><br /> 时间：<span style='font-weight:bold;'>{message.Date}</span>";
                        div.Controls.Add(span);
                        // 将 <span> 添加到 <li> 中
                        listItem.Controls.Add(div);
                       
                        // 将 <li> 添加到 <ol> 中
                        QQmail.Controls.Add(listItem);
                    }

                }
                client.Disconnect(true);
            }
        }
        else
        {
            // 创建一个 <li> 元素
            var listItem = new HtmlGenericControl("li");

            // 创建一个 <span> 元素
            var span = new HtmlGenericControl("h4");
            span.InnerText = "没有未读邮件！";
            // 将 <span> 添加到 <li> 中aaa
            listItem.Controls.Add(span);
            // 将 <li> 添加到 <ol> 中
            QQmail.Controls.Add(listItem);
            IsShaking = false;

        }

    }

}