一、C#开发—ASP.NET Web应用程序(.NET Framework)

0、写在前面

公司最近要开一个新的.net项目，可能需要我的配合，那之前只接触过php跟java的后台，为了更好的完成工作，打算先自己学习一下C#的开发，这里顺便记录一下。
有一点要做好心理准备的是，这玩意跟java一个德行，改点东西都要重新运行，新建文件、文件夹的时候都得停止运行再弄：(。。当然如果页面是html格式的是不用的。
开发软件：Visual Studio 2019
开启IIS功能：
a、快速搜索

b、选择勾选

1、新建项目

打开VS，按快捷键【Ctrl+Shift+N】，选择 ASP.NET Web应用程序(.NET Framework) ，点击下一步。
本来 ASP.NET Core Web应用程序跨平台又开源应该是比较好的，网上查了一下 ASP.NET Web应用程序(.NET Framework) 上手要快点，就先从这里开始了。

修改项目名称，选择位置后点击创建。

选择Web API，点击创建。
为什么选择这个Web API呢，它相比MVC多了了一个Areas文件夹，还有专门的api配置，而单页应用程序呢，看起来比较复杂的样子，直接忽略不看了：）

建好后我们来看下项目的目录结构

2、运行分析

（1）运行
建好后我们就来运行一下

运行显示如下图：

（2）文件分析
a、Views
我们从视图开始看起，打开文件夹 Views ，点开第一个文件 _ViewStart.cshtml 看一下，只有一个赋值语句

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

接着打开 _Layout.cshtml ，里面除了我们前端熟悉的html什么的，还有就是服务端的标记语法Razor（观察发现跟以前写的PHP有点像），它可以让我们在页面里写 C#，内容不熟悉感觉乱七八糟的略过不看。

同级下还有个Error.cshtml，顾名思义是错误页，也不看了。

打开 Home>Index.cshtml 看到只有中间一部分内容，我们再回到 _Layout.cshtml 看一下，去除头尾发现中间有个 @RenderBody() ，这就是渲染代码段内容的占位函数了。结构稍微清晰了点，那么我们就来一个一个看下里面的C#语句。

<title>@ViewBag.Title</title>

这个显而易见应该是一个变量，不同的页面设置不同的值显示。

 @Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

将下面一句代码对照运行起来的页面查看
@Html.ActionLink 这个是渲染 a 标签链接的；
"应用程序名称"：毫无疑问是名称；
"Index"、"Home" ：问了度娘，分别是方法名，控制器名，具体对应先放在这；
new { area = "" }：默认的功能模块；
new { @class = "navbar-brand" }：标签的 class 名。

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")

再看这四句鬼东西，全局搜索一下 ~/Content/css ，在 App_Start/BundleConfig.cs 里找到了绑定信息，绑定可以用通配符、多条聚集逗号隔开。
BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js"));  
bundles.Add(newStyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/site.css"));

@RenderBody()

呈现内容的

 <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>

系统自带时间函数

@RenderSection("scripts", required: false)

这个问了度娘，是定义了代码区域名字用来引入的，这个项目里都没有定义 "scripts" 区域，忽略不看就是。好奇的小伙伴可以在 Home>Index.cshtml 的后面加上下面的语句，查看下页面代码，主页多了一个引用，API页面是没有的。

@section scripts{
    @Scripts.Render("~/bundles/jquery")
}

b、Controllers
● HomeControllers.cs
这里面一个命名空间一个类一个方法。我们尝试自己新建一个方法。

namespace MyWebApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Title = "Home Page";   //定义了页面 <title>
            return View();    //返回 ActionResult  类型的视图
        }
+        public ActionResult Test()
+        {
+            ViewBag.Title = "Test Page";
+            return View();
+        }
    }
}

新建视图

Views/Home/Test.cshtml

@{
    ViewBag.Title = "Test";
}
<h2>Test</h2>

修改 Views/Shared/_Layout.cshtml

                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主页", "Index", "Home", new { area = "" }, null)</li>
+                   <li>@Html.ActionLink("Test页", "Test", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                </ul>

启动访问一下，看到标题栏是 Test 而不是 Test Page，原来自动创建的视图里给定义覆盖了。

● 新建控制器
照葫芦画瓢，我们自己建一个控制器看看。

默认空的 MVC 5 控制器直接点击添加。

修改名称，点击添加

Controllers/ListController.cs，引用的包就不贴了

namespace MyWebApp.Controllers
{
    public class ListController : Controller
    {
        // GET: List
        public ActionResult Index()
        {
            return View();
        }
    }
}

看到上面有个 // GET:List 的提示，我们启动项目在浏览器里访问看看。下图中报错了，重点看红框内容。我们看到一个比较熟的，跟Home类似嘛，下面我们新建一个 List 文件夹

新建 Views/List/Index.cshtml，我们修改自动生成的代码

@{
-    ViewBag.Title = "Index";
+    ViewBag.Title = "List Index";
}

- <h2>Index</h2>
+ <h2>List Index</h2>

运行一下访问如下图，这里我们知道 ActionResult return View()是要有对应的视图的，系统会自动关联起来。

通过链接访问，修改 _layout.cshtml

                   <li>@Html.ActionLink("主页", "Index", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("Test页", "Test", "Home", new { area = "" }, null)</li>
+                   <li>@Html.ActionLink("List", "Index", "List", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>

通过链接访问成功：）

● ValuesController.cs
新建项目自动生成的还有这个控制器，就是对应的API了，我们打开文件看一下都有相应的访问提示，我们在浏览器里试试看。返回的结果跟我们前端开发时一般返回的json格式是不一样的，不过也是接口就是。
// GET api/values

// GET api/values/5

这个看的有点头疼了回头再详细了解，接下来，我们先小结一下再自己写一个接口看看。
小结：Controller文件夹里的控制器以 Controller 结尾，若有返回视图的方法则会自动用该 Controller 前面的名称和方法名称分别对应到 Views文件夹中的一级文件夹和里面的同名文件

3、写接口

这部分当然是先参考学习了公司现有项目，这里先只简单粗暴的返回固定的json值，连接数据库还是下篇写了。I need teke a rest ：）

我们这里在Test.cshtm用ajax发送请求，先把 _Layout.cshtml 里@Scripts.Render("~/bundles/jquery")移到head里去。

修改 Views/Home/Test.cshtml


@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>
+ <script>
+     $.ajax({
+         url: '/home/json1',
+         dataType: 'json',
+         success(data) {
+             console.log(data)
+         }
+     })
+ </script>

修改 Controller/HomeController.cs

namespace MyWebApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Title = "Home Page";
            return View();
        }
        public ActionResult Test()
        {
            ViewBag.Title = "Test Page";
            return View();
        }

+        public JsonResult Json1()
+        {
+            return Json(new { status = 0, msg="success",data =new int[5] { 99, 98, 92, 97, 95 } }, JsonRequestBehavior.AllowGet);
+        }
    }
}

保存运行，访问Test页，请看截图，成功咯。