asp.net个人网页源代码如何获取与使用？-网页设计-锦华智联科技

ASP.NET Web Forms (C#) - 完整可运行源码

这个方案包含一个经典的个人主页,通常包含“关于我”、“技能”、“项目展示”和“联系方式”等部分，它使用母版页来统一布局，使用用户控件来复用内容。

（图片来源网络，侵删）

项目结构

MyPersonalWebsite/
├── MyPersonalWebsite.csproj         // 项目文件
├── web.config                       // 应用程序配置文件
├── Default.aspx                     // 首页
├── About.aspx                       // 关于我页面
├── Contact.aspx                     // 联系方式页面
├── Projects.aspx                    // 项目展示页面
├── MasterPage.master                 // 母版页
├── MasterPage.master.cs             // 母版页后台代码
├── Skills.ascx                      // 技能列表用户控件
├── Skills.ascx.cs                   // 技能列表用户控件后台代码
├── images/                          // 存放图片的文件夹
│   ├── profile.jpg
│   └── project1.png
└── styles/                          // 存放CSS的文件夹
    └── site.css

`web.config` (基础配置)

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.8" />
    <httpRuntime targetFramework="4.8" />
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization" />
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
      </controls>
    </pages>
  </system.web>
</configuration>

`MasterPage.master` (母版页 - 定义网站整体布局)

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="MyPersonalWebsite.MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />我的个人主页</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <webopt:BundleReference runat="server" Path="~/styles/css" />
    <link href="styles/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <header>
                <h1><asp:Literal ID="litName" runat="server" Text="张三" /></h1>
                <p><asp:Literal ID="litTitle" runat="server" Text="全栈开发工程师" /></p>
                <nav>
                    <asp:Menu ID="NavigationMenu" runat="server" DataSourceID="SiteMapDataSource" Orientation="Horizontal" CssClass="nav-menu" />
                    <asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" ShowStartingNode="false" />
                </nav>
            </header>
            <main>
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </main>
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - <asp:Literal ID="litFooterName" runat="server" Text="张三" />. All Rights Reserved.</p>
            </footer>
        </div>
    </form>
</body>
</html>

`MasterPage.master.cs` (母版页后台代码)

using System;
namespace MyPersonalWebsite
{
    public partial class MasterPage : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 你可以从数据库或配置文件中动态获取这些信息
            if (!IsPostBack)
            {
                litName.Text = "张三";
                litTitle.Text = "全栈开发工程师";
                litFooterName.Text = "张三";
            }
        }
    }
}

`Default.aspx` (首页 - 使用母版页)

<%@ Page Title="首页" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MyPersonalWebsite._Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <section class="hero">
        <h2>欢迎来到我的个人空间！</h2>
        <p>我是一名充满激情的开发者，专注于构建优雅、高效的软件解决方案。</p>
        <asp:HyperLink ID="hlAbout" runat="server" NavigateUrl="~/About.aspx" CssClass="btn">了解更多</asp:HyperLink>
    </section>
    <section class="skills-summary">
        <h3>核心技能</h3>
        <!-- 引用用户控件 -->
        <uc1:Skills ID="SkillsSummary" runat="server" ShowAll="false" />
    </section>
</asp:Content>

`Skills.ascx` (技能列表用户控件)

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Skills.ascx.cs" Inherits="MyPersonalWebsite.Skills" %>
<div class="skills-container">
    <asp:Repeater ID="rptSkills" runat="server">
        <ItemTemplate>
            <div class="skill-item">
                <span class="skill-name"><%# Eval("Name") %></span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: <%# Eval("Level") %>%;">
                        <%# Eval("Level") %>%
                    </div>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

`Skills.ascx.cs` (用户控件后台代码)

using System;
using System.Collections.Generic;
using System.Web.UI;
namespace MyPersonalWebsite
{
    public partial class Skills : System.Web.UI.UserControl
    {
        public bool ShowAll { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<Skill> skills = new List<Skill>
                {
                    new Skill { Name = "C#", Level = 90 },
                    new Skill { Name = "ASP.NET", Level = 85 },
                    new Skill { Name = "SQL Server", Level = 80 },
                    new Skill { Name = "JavaScript", Level = 75 },
                    new Skill { Name = "Python", Level = 70 }
                };
                // 如果只需要显示部分技能，可以在这里进行筛选
                // if (!ShowAll) { ... }
                rptSkills.DataSource = skills;
                rptSkills.DataBind();
            }
        }
    }
    public class Skill
    {
        public string Name { get; set; }
        public int Level { get; set; }
    }
}

`About.aspx` (关于我页面)

<%@ Page Title="关于我" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="MyPersonalWebsite.About" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <section class="about-section">
        <h2>关于我</h2>
        <div class="about-content">
            <img src="images/profile.jpg" alt="我的照片" class="profile-img" />
            <p>
                我是一名拥有5年经验的软件开发工程师，毕业于XX大学计算机科学专业。
                我热衷于学习新技术，并对解决复杂问题充满热情，我的职业目标是创造有价值、有影响力的产品。
            </p>
            <p>
                在工作之余，我喜欢阅读技术博客、参与开源项目，以及探索新的编程语言和框架。
            </p>
        </div>
    </section>
</asp:Content>

`Contact.aspx` (联系方式页面)

<%@ Page Title="联系我" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Contact.aspx.cs" Inherits="MyPersonalWebsite.Contact" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <section class="contact-section">
        <h2>联系我</h2>
        <p>如果您有任何问题或合作意向，请随时通过以下方式与我联系：</p>
        <ul class="contact-list">
            <li><strong>邮箱:</strong> <a href="mailto:your.email@example.com">your.email@example.com</a></li>
            <li><strong>GitHub:</strong> <a href="https://github.com/yourusername" target="_blank">github.com/yourusername</a></li>
            <li><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/yourprofile" target="_blank">linkedin.com/in/yourprofile</a></li>
        </ul>
    </section>
</asp:Content>

`Projects.aspx` (项目展示页面)

<%@ Page Title="我的项目" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Projects.aspx.cs" Inherits="MyPersonalWebsite.Projects" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <section class="projects-section">
        <h2>项目展示</h2>
        <asp:Repeater ID="rptProjects" runat="server">
            <ItemTemplate>
                <div class="project-card">
                    <img src='<%# Eval("ImageUrl") %>' alt='<%# Eval("Title") %>' class="project-img" />
                    <h3><%# Eval("Title") %></h3>
                    <p><%# Eval("Description") %></p>
                    <a href='<%# Eval("ProjectUrl") %>' target="_blank" class="btn">查看详情</a>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </section>
</asp:Content>

`Projects.aspx.cs` (项目展示后台代码)

using System;
using System.Collections.Generic;
using System.Web.UI;
namespace MyPersonalWebsite
{
    public partial class Projects : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<Project> projects = new List<Project>
                {
                    new Project { 
                        Title = "在线商城系统", 
                        Description = "使用 ASP.NET Core 和 SQL Server 构建的全栈电商解决方案，支持用户注册、商品浏览、购物车和支付集成。",
                        ImageUrl = "images/project1.png",
                        ProjectUrl = "https://github.com/yourusername/ecommerce-project"
                    },
                    new Project { 
                        Title = "任务管理应用", 
                        Description = "一个基于 React 和 .NET Web API 的前后端分离项目，提供任务创建、分配、跟踪和团队协作功能。",
                        ImageUrl = "images/project2.png",
                        ProjectUrl = "https://github.com/yourusername/task-manager"
                    }
                };
                rptProjects.DataSource = projects;
                rptProjects.DataBind();
            }
        }
    }
    public class Project
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public string ImageUrl { get; set; }
        public string ProjectUrl { get; set; }
    }
}

`styles/site.css` (样式文件)

/* 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
header p {
    margin: 0.5rem 0;
    font-size: 1.2rem;
    color: #ddd;
}
/* 导航菜单样式 */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: flex;
    justify-content: center;
}
.nav-menu li {
    margin: 0 15px;
}
.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}
.nav-menu a:hover {
    color: #007bff;
}
区域 */
main {
    padding: 2rem 0;
}
/* Hero 区域 */
.hero {
    text-align: center;
    padding: 3rem 0;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.hero h2 {
    color: #333;
}
/* 按钮样式 */
.btn {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}
.btn:hover {
    background: #0056b3;
}
/* 技能条样式 */
.skills-container {
    margin-top: 2rem;
}
.skill-item {
    margin-bottom: 1.5rem;
}
.skill-name {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.skill-bar {
    background: #e0e0e0;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}
.skill-level {
    height: 100%;
    background: #28a745;
    color: #fff;
    text-align: right;
    padding-right: 10px;
    line-height: 20px;
    font-size: 0.9rem;
    transition: width 1s ease-in-out;
}
/* 项目卡片样式 */
.projects-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.project-card {
    flex: 1 1 300px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
}
.project-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.project-card h3 {
    padding: 1rem;
    margin: 0;
    background: #f8f9fa;
}
.project-card p {
    padding: 0 1rem;
}
/* 页脚样式 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

ASP.NET Core MVC (现代推荐)

如果您想学习更现代、更强大的技术，ASP.NET Core MVC 是首选，它的思想与 Web Forms 不同，更注重关注点分离。

核心区别：

项目结构：没有 .aspx 和 .ascx 文件，页面由 View (.cshtml)、Controller (.cs) 和 Model (.cs) 组成。
路由：通过 Startup.cs 或 Program.cs 中的 endpoints.MapController 来定义 URL 和 Controller 的映射关系。
布局：使用 _Layout.cshtml 作为主布局文件，通过 @RenderBody() 来渲染具体页面的内容。
数据绑定：Controller 将 Model 传递给 View，View 使用 Razor 语法 (@Model.Property) 来显示数据。
控件：没有服务器端控件，而是使用 HTML Helper 标签或 Tag Helper 来生成 HTML。

简单示例 (`HomeController.cs`)

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace MyPersonalWebsiteCore.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var skills = new List<Skill>
            {
                new Skill { Name = "C#", Level = 90 },
                new Skill { Name = "ASP.NET Core", Level = 85 }
            };
            ViewData["Skills"] = skills; // 将数据传递给 View
            return View();
        }
    }
    public class Skill
    {
        public string Name { get; set; }
        public int Level { get; set; }
    }
}

对应的 View (`Views/Home/Index.cshtml`)

@{
    ViewData["Title"] = "首页";
    Layout = "_Layout";
}
<div class="text-center">
    <h1 class="display-4">欢迎</h1>
    <p>学习 ASP.NET Core MVC 的入门教程。</p>
    <h2>我的技能</h2>
    <ul>
        @foreach (var skill in ViewData["Skills"] as List<MyPersonalWebsiteCore.Skill>)
        {
            <li>@skill.Name - @skill.Level%</li>
        }
    </ul>
</div>

`_Layout.cshtml` (主布局)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />@ViewData["Title"] - MyPersonalWebsiteCore</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyPersonalWebsiteCore</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">隐私</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - MyPersonalWebsiteCore
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

如何运行代码

安装环境：
- Web Forms: 安装 Visual Studio 并选择“.NET 桌面开发”工作负载。
- ASP.NET Core: 安装 Visual Studio 并选择“ASP.NET 和 Web 开发”工作负载，或者安装 .NET SDK。
创建项目：
- 在 Visual Studio 中，选择“创建新项目”。
- 对于 Web Forms，搜索并选择 "ASP.NET Web 应用程序"（.NET Framework）。
- 对于 MVC，搜索并选择 "ASP.NET Core Web 应用"。
替换文件：
- 将上面提供的代码文件内容复制到对应的新项目中。
- 创建 images 和 styles 文件夹，并将 site.css 放入 styles 文件夹。
- 在 images 文件夹中放入你自己的图片，并修改代码中的图片路径。
运行：
- 按 F5 或点击 Visual Studio 工具栏上的“开始调试”按钮。

ASP.NET Web Forms：非常适合快速开发，尤其对于有 Windows Forms 或 VB6 背景的开发者，它的事件驱动模型非常直观。
ASP.NET Core MVC：是未来的方向，它更轻量、更快速、跨平台，并且拥有更好的测试性和可维护性，对于学习现代 Web 开发模式非常有帮助。

希望这份详细的源代码和解释对您有帮助！您可以根据自己的需求进行修改和扩展。

（图片来源网络，侵删）

asp.net个人网页源代码如何获取与使用？

ASP.NET Web Forms (C#) - 完整可运行源码

项目结构

web.config (基础配置)

MasterPage.master (母版页 - 定义网站整体布局)

MasterPage.master.cs (母版页后台代码)

Default.aspx (首页 - 使用母版页)

Skills.ascx (技能列表用户控件)

Skills.ascx.cs (用户控件后台代码)

About.aspx (关于我页面)

Contact.aspx (联系方式页面)

Projects.aspx (项目展示页面)

Projects.aspx.cs (项目展示后台代码)

styles/site.css (样式文件)

ASP.NET Core MVC (现代推荐)

核心区别：

简单示例 (HomeController.cs)

对应的 View (Views/Home/Index.cshtml)

_Layout.cshtml (主布局)

如何运行代码

`web.config` (基础配置)

`MasterPage.master` (母版页 - 定义网站整体布局)

`MasterPage.master.cs` (母版页后台代码)

`Default.aspx` (首页 - 使用母版页)

`Skills.ascx` (技能列表用户控件)

`Skills.ascx.cs` (用户控件后台代码)

`About.aspx` (关于我页面)

`Contact.aspx` (联系方式页面)

`Projects.aspx` (项目展示页面)

`Projects.aspx.cs` (项目展示后台代码)

`styles/site.css` (样式文件)

简单示例 (`HomeController.cs`)

对应的 View (`Views/Home/Index.cshtml`)

`_Layout.cshtml` (主布局)