Taurus.MVC WebMVC 入門開發教程3:數據綁定Model

前言:

在這篇 Taurus.MVC WebMVC 入門開發教程的第三篇文章中,

我們將重點介紹如何進行數據綁定操作,還會學習如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。

步驟1:創建 Model

首先,我們需要創建一個 Model 類來存儲數據。

在 Visual Studio 中,右鍵單擊項目文件夾,選擇「添加」-> 「新建項」。在彈出的對話框中,選擇「類」,並命名爲「User.cs」。

在 User.cs 類中,我們可以定義一些屬性來表示用戶信息,例如姓名、年齡等。

public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

步驟2:更新控制器

接下來,我們需要更新控制器以支持數據綁定。

在 HomeController.cs 文件中,我們可以修改 Index 方法,創建一個 User 對象,並將其傳遞給視圖。

public class HomeController : Taurus.Mvc.Controller
{
    public void Index()
    {
        User user = new User
        {
            Name = "Alice",
            Age = 25
        };

        View.LoadData(user);
    }

    public void About() { }

    public void Contact() { }
}

View.LoadData 可以加載對象類型很多,比如:實體類,數據行(MDataRow )、字典、哈希等。

步驟3:更新視圖

現在,我們需要更新視圖來實現數據綁定。在 Index.html 視圖文件中,

我們可以使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>歡迎來到 Taurus.MVC WebMVC</title>
</head>
<body>
    <h1>用戶信息</h1>
    <p>姓名:${Name}</p>
    <p>年齡:${Age}</p>
</body>
</html>

在上述代碼中,我們使用通過使用 ${Name} 和 ${Age} 語法來綁定頁面上的元素與 Model 中的屬性。

步驟4:運行應用程序

最後,我們可以運行應用程序並查看頁面的效果。

您將看到用戶信息頁面上顯示了用戶的姓名和年齡,這些信息是通過數據綁定從 Model 中獲取的。

步驟5:使用 View.KeyValue 添加綁定值

除了直接使用Model,通過 View.LoadData 來加載值外,對於一些場景,如果不想使用 Model,

比如想在界面綁定一些值,但不想重新定義Model時,則可以使用 View.KeyValue.Add(key,value)來添加。

例如框架內部實現中就使用到它,添加了幾個默認值,以下是框架內部源碼的實現部分:

private void LoadHtmlView()
{
    if (!CancelLoadHtml)
    {
        _View = ViewEngine.Create(HtmlFolderName, HtmlFileName);//這裏ControllerName用原始大寫,兼容Linux下大小寫名稱。
        if (_View != null)
        {
            //追加幾個全局標籤變量
            _View.KeyValue.Add("module", ModuleName.ToLower());
            _View.KeyValue.Add("controller", ControllerName);
            _View.KeyValue.Add("action", MethodName.ToLower());
            _View.KeyValue.Add("para", Para.ToLower());
            _View.KeyValue.Add("suffix", Path.GetExtension(Request.Url.LocalPath));
            _View.KeyValue.Add("httphost", Request.Url.AbsoluteUri.Substring(0, Request.Url.AbsoluteUri.Length - Request.Url.PathAndQuery.Length));
        }
    }
}

View.KeyValue是一個Dictionary,你可以添加,也可以移除。

實際View.LoadData 是將 Model 批量加載到了 View.KeyValue 中,後續你也可以通過它來移除不想綁定的數據。

總結

在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。

我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。

通過這些步驟,我們成功實現了一個簡單的數據綁定示例。

 

本系列的目錄大綱爲:

Taurus.MVC WebMVC 入門開發教程1:框架下載環境配置與運行

Taurus.MVC WebMVC 入門開發教程2:一個簡單的頁面呈現

Taurus.MVC WebMVC 入門開發教程3:數據綁定Model

Taurus.MVC WebMVC 入門開發教程4:數據列表綁定List<Model>

Taurus.MVC WebMVC 入門開發教程5:表單提交與數據驗證

Taurus.MVC WebMVC 入門開發教程6:路由配置與路由映射

Taurus.MVC WebMVC 入門開發教程7:部分視圖和頁面片段

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章