mvc_第一章後入門_第一遍_控制器和視圖

時間 2019-11-19

標籤 mvc 第一章入門一遍控制器視圖简体版

原文原文鏈接

在掌握了數據庫訪問方法以後，咱們來看幾個mvc的入門程序，藉此熟悉mvc的常見工做方式。html

1、建立項目，顯示一個最簡單的頁面。數據庫

　　要點：一、爲了突出重點，不使用模版；二、項目類型爲mvc，便於得到vs添加的各類引用、文件夾c#

　　如圖（vs2017，其餘版本大同小異，下同）：mvc

　　新建項目post

　　選擇模版和項目類型spa

　　右鍵控制器文件夾，爲項目添加控制器3d

　　選擇控制器類型（選最新的）調試

　　按照慣例，取名爲「Home」code

　　完成以後，系統自動建立控制器代碼（HomeController.cs），裏面默認的方法（操做）是Index。orm

　　對方法裏返回的視圖的代碼點右鍵，爲它添加視圖文件

　　使用默認名稱（和控制器裏的操做同名），去掉所有選項，使用最乾淨的視圖

　　在隨後生成的文件（能夠理解爲之前所學的html文件）裏，使用網頁知識，完成一些簡單的內容，如：

　　上圖中，除了漢字，都是自動生成的內容。

　　到此爲止，最簡單的mvc程序完成。右側資源管理器中能夠看到建立的文件

　　運行以後能夠看到效果

　　注意：地址欄中的「Home」是控制器名稱，「Index」是具體操做。它們對應控制器文件中的類和方法。

　　之後在調試的時候，若是出現沒法在32位環境中運行的內容，能夠調整vs的調試器，改成64位環境。具體以下圖：

　　具體位置：

2、視圖中的語法：Razor

　　Razor語法的核心：在一堆html中，隨時用「@」符號切換到寫C#的模式。

　　例1：輸出327+254的值

　　例2：計算1+2+3+...+100的值

　　c#標記能夠和html混寫，隨時用@切換爲C#。

　　例3：用無序列表輸出1-20

　　Razor語法的詳細介紹，見書上P115。

3、Mvc中的輸入和輸出：

　　1.輸出：控制器向視圖傳值-viewdata，P85

　　例：從後臺（控制器）向前臺（視圖）傳遞內容　　

public ActionResult Index()
        {
            ViewData["d1"] = "我是來自後臺的ViewData數據";
            TempData["d1"] = "我是來自後臺的TempData數據";
            return View();
        }

　　運行效果：

　　2.輸入：視圖向控制器傳值-表單知識，P102

　　例：輸入一個數字，翻倍把它輸出。

　　控制器代碼：　　

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index(int a=0)//此處的a=0表示默認值
        {
            ViewData["d1"] = a;
            return View();
        }
    }

前臺代碼：　　

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @{int x = int.Parse(ViewData["d1"].ToString());
            if (x == 0)
            {
                <div> 還沒輸入值 </div>
            }
            else
            {
                <div>已輸入值@(x)</div>
                <div>它的2倍是@(x * 2)</div>
            }
        }
    </div>
    <div>
        <form action="/home/index">
            <input type="text" name="a" /><input type="submit" />
        </form>
    </div>
</body>
</html>

　　以上例子是把運算放在了視圖中，咱們還能夠把它放在控制器中運行，你們嘗試一下。

　　對於標準的mvc結構來講，這種運算應該算是「業務邏輯」，應該放在業務層處理。這裏只是爲了演示視圖和控制器的工做方式。

　　Request做爲內置對象能夠獲取跟請求用戶相關的內容。在獲取表單內容方面，不管用戶是用get仍是post方式提交，均可以經過Request[key]的方式獲取內容。

　　例，控制器代碼：　　

public ActionResult Index()
        {
            if (Request["a"] == null)
            {
                ViewData["a"] = "空";
            }
            else if (Request["a"] == "")
            {
                ViewData["a"] = "無";
            }
            else
            {
                ViewData["a"] = Request["a"];
            }
            return View();
        }

　　視圖代碼：　　

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @ViewData["a"]
        <form id="form1" name="form1" method="put" action="/Home/Index">
            <label for="a"></label>
            <input type="text" name="a" id="a" />
            <input type="submit" />
        </form>
    </div>
</body>
</html>

　　你們能夠自行熟悉使用

4、綜合實例

　　一、輸入數字n，在屏幕上輸出n層的楊輝三角形。

　　控制器代碼：　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index(int n=0)//此處的a=0表示默認值
        {
            if (n == 0)
            {
                ViewData["d1"] = null;
            }
            else
            {
                int[,] a;
                a = new int[n,n];
                for (int i = 0; i < n; i++)
                {
                    a[i, 0] = 1;
                }
                for (int i = 1; i < n; i++)
                {
                    for (int j = 1; j <= i; j++)
                    {
                        a[i, j] = a[i - 1, j - 1] + a[i - 1, j];
                    }
                }
                ViewData["d1"] = a;
            }
            return View();
        }
    }
}

　　視圖代碼：　　

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @if (ViewData["d1"] != null)
        {
            <table style="width: 100%; border-color:black; padding:0px; border-collapse:collapse;" border='1'>
                @{
                    int[,] a = (int[,])ViewData["d1"];
                    for (int i = 0; i < a.GetLength(0); i++)
                    {
                        <tr>
                            @for (int j = 0; j <= i; j++)
                            {
                                <td>@(a[i, j])</td>
                            }
                        </tr>
                    }
                }
            </table>
        }
    </div>
    <div>
        <form action="/home/index">
            <input type="text" name="n" /><input type="submit" />
        </form>
    </div>
</body>
</html>