【.NET框架】—— ASP.NET MVC5 表單和HTML輔助（二）

1.1.ASP.NET MVC表單的使用

表單<form>是html裏面一個很是經常使用的標籤，這裏的屬性就不過多介紹；

這裏主要講<form>表單在MVC5中的使用及框架輔助BeginForm的使用：

①首先建立一個View層下面的<form>標籤，使用正常形式的跳轉方式；

<form action="/Home/About" method="get">
    <input type="text" name="username" />
    <input type="submit"  value="搜索" />
</form>

上面跳轉會到HomeController下面的About方法，傳遞username參數，並在

@ViewBag.Message上進行顯示；

public ActionResult About(string username)
{
    ViewBag.Message = username;

    return View();
}

 

2.1.1.HTML.BeginForm輔助方法

Html.BeginForm方法代替了咱們html中的form標籤，更好地配合了MVC框架使用，下面用Html.BeginForm方式替換<form>標籤，功能和<form>的action進行跳轉一致：

語法以下：

Html.BeginForm(「方法」, 「mvc控制器名稱」, Method)

下面代碼與普通<form>標籤的執行方式一致：

@using (Html.BeginForm("About", "Home", FormMethod.Get))
{
    <input type="text" name="username" />
    <input type="submit" value="搜索" />
}

2.2.ASP.NET MVC表單屬性的添加

<form action="/Home/About" method="get" target="_blank">
    <input type="text" name="username" />
    <input type="submit" value="搜索" />
</form>

<!--使用輔助的方式添加屬性target：與上面的target方法相同-->
@using (Html.BeginForm("About", "Home", FormMethod.Get, new { target = "_blank" }))
{
    <input type="text" name="username" />
    <input type="submit" value="搜索" />
}

2.3.HTML.Hidden()方法

使用HTML.Hidden()方法能夠隱藏控件，在頁面上不進行顯示。

語法：@Html.Hidden(「控件名稱」, 「控件值」)

@using (Html.BeginForm("About", "Home", FormMethod.Get, new { target = "_blank" }))
{
    <!--Html.Hidden：使用隱藏的控件-->
    @Html.Hidden("h1", "我是隱藏的h1控件");
    <input type="text" name="username" />
    <input type="submit" value="搜索" />
}

 

 

 

2.4.HTML.Lable()和HTML.TextBox()

  <!--Html.Label：Lable文本控件和Html.TextBox：文本框控件-->
    @Html.Label("lb1", "姓名：")
    @Html.TextBox("tb1", "")

 

 

 

2.5.HTML.DropDownList()和HTML.ListBox()

①先添加前臺界面層DropDownList數據ViewData[「items」]：

 

<div>
    @Html.Label("lb2", "性別：")
    @Html.DropDownList("ddl1", ViewData["items"] as List<SelectListItem>, "請選擇")
</div>

②對應Controller控制器方法Index()，須要注意綁定的數據必須和前臺一一對應起來：

public class MyDefineController : Controller
{
     // GET: MyDefineController01
     public ActionResult Index()
     {
            List<SelectListItem> list = new List<SelectListItem>();
            SelectListItem s1 = new SelectListItem();
            s1.Text = "男";
            s1.Value = "1";
            SelectListItem s2 = new SelectListItem();
            s2.Text = "女";
            s2.Value = "2";
            list.Add(s1);
            list.Add(s2);
            ViewData["items"] = list;
            return View();
      }
}

③啓動服務器，顯示效果以下：

 

 

 

④同理更改成ListBox，顯示界面以下：

@Html.("ddl1", ViewData["items"] as List<SelectListItem>, "請選擇")

 

 

 

2.6.HTML.Password()

①HTML.Password()用於建立密碼顯示框，具體前臺設置以下：

<div>
    <!--Html.Label：Lable文本控件和Html.TextBox：文本框控件-->
    @Html.Label("lb1", "用戶名：")
    @Html.TextBox("username", "")
</div>
<div>
    @Html.Label("lb2", "密碼：")
    @Html.Password("password", "")
</div>

②Controller層接收請求參數，跳轉後展現頁面：

public ActionResult About(string username, string password)
{
    ViewBag.Message = "用戶名：" + username + ",密碼：" + password;

    return View();
}

 

 

 

 

 

 

2.7.HTML.RadioButton()和HTML.CheckBox()

RadioButton表示單選框；CheckBox表示複選框；

具體操做以下：

前臺.cshtml界面：

<div>
    @Html.Label("lb3", "學校：")
    @Html.RadioButton("rb1", "山東大學")山東大學
    @Html.RadioButton("rb1", "清華大學")清華大學
    @Html.RadioButton("rb1", "北京大學")北京大學
</div>
<div>
    @Html.Label("lb3", "愛好：")
    @Html.CheckBox("cb1", false)足球
    @Html.CheckBox("cb2", false)籃球
    @Html.CheckBox("cb3", false)乒乓球
</div>

後臺Contoller參數接收：

public ActionResult About(string username, string password, string rb1, bool cb1, bool cb2, bool cb3)
        {
            string hobby = string.Empty;
            if (cb1)
                hobby += "足球 ";
            if(cb2)
                hobby += "籃球 ";
            if (cb3)
                hobby += "乒乓球 ";
            ViewBag.Message = "用戶名：" + username + ",密碼：" + password + ",學校：" + rb1 + "愛好：" + hobby;

            return View();
        }

顯示效果以下：

 

 

 

 

 

 

2.8.HTML.ActionLink()和HTML.RouteLink()

Html.ActionLink()：主要是替換a標籤，使用方法：

@HTML.ActionLink(「連接顯示內容」, 「方法」, 「控制器名稱」)

 

Html.RouteLink()：主要是設置路由，使用方法：

@HTML.RouteLink(「連接顯示」, new{action=」路由」})

具體使用：

<div>
    @Html.ActionLink("註冊", "Contact", "Home")
    <!--注意：RouteLink指定路由的方式是new { Action = "../Home/Index" }-->
    @Html.RouteLink("忘記密碼", new { Action = "../Home/Index" })
</div>

界面顯示：

 

 

 

跳轉：

 

 

 

 

 

 

2.8.1.URL輔助方法

n  Action方法

n  Content方法

n  RouteUrl方法

Action：與ActionLink很是類似，他返回的是連接地址

Content：能夠將相對路徑轉換爲絕對路徑

RouteUrl：一樣是返回連接地址，接受參數是路由

<div>
    @Url.Action("Contact", "Home")----
    @Url.Content("../Home/Index")----
    @Url.RouteUrl(new { Action = "../Home/Index" })
</div>

顯示效果：

 

 

2.9.Html.Partial()和Html.RenderPartial()

@Html.Partial用於將分部視圖渲染爲字符串；

使用方式：

@Html.Partial(「視圖名稱」, Model, ViewDataDictionary)

實例：

①在Test文件夾下新建MVC5 分佈頁（Razor），

 

 

②在Index.cshtml中可使用@Html.Partial()

<!--視圖引入模型-->
@using WebApplication01.Models;
@model IEnumerable<Class1>

@{
    ViewBag.Title = "Index";
}

@Html.Partial("_PartialPage1", new Class1 { name = "1", value = "小明"},
    new ViewDataDictionary() { {"學校", "山東大學" }, { "班級", "大一三班"} });
<h2>Index</h2>

③在_PartialPage1.cshtml分佈頁中設置ViewData字典進行取值：

@model WebApplication01.Models.Class1
<div>
    姓名 @Model.value
    學校 @ViewData["學校"]
    班級 @ViewData["班級"]
</div>

注意對應的controller中的Index路由方法中View必須和Class1視圖Model不能衝突。

@{Html.RenderPartial}將分佈視圖直接寫入響應輸出流，因此只能直接放在代碼塊中，不能放在表達式中(返回值是void)；

用法：

@{Html.RenderPartial(視圖名稱, Model, ViewDataDictionary)}

2.10.ViewBag、ViewData和ViewDataDictionary

①ViewBag和ViewData是已經實例化的對象，能夠直接使用。

②ViewDataDictionary是視圖字典類。

③ViewBag和ViewData，都是從ViewDataDictionary 實例化而來

④ViewBag是ViewData的動態封裝

ViewBag與ViewData的使用：

<div>
    @ViewBag.name
</div>
<div>
    @ViewData["name1"]
</div>

public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            ViewBag.name = "測試ViewBag";
            ViewData["name1"] = "測試ViewData"; //注意這裏的name不能重複，不然會覆蓋ViewBag的值
            return View();
        }
    }

ViewDataDictionary的使用：

@{
    ViewBag.Title = "Index";
    ViewDataDictionary pairs = new ViewDataDictionary();
    pairs.Add("key", "測試ViewDataDic");
}
<div>
    @pairs["key"]
</div>

2.11.Html.Action()和Html.RenderAction()

① Html.Action（）的語法：

n  @Html.Action(「方法」, 「控制器」)

示例：

@Html.Action("Contact", "Home", new { name = "老張" })

能夠在其它頁面View上調用其它Controller上的方法並進行參數傳遞顯示：

 

 

 

 

②Html.RederAction（）的語法：

n  ＠{Html.RenderAction(「方法」, 「控制器」)}

和Html.Action()實際結果一致，只是語法不一樣。

示例：

@{Html.RenderAction("Contact", "Home", new { name = "老張" });}

 

 

2.12.強制類型輔助方法

強制類型輔助方法，主要是用來綁定模型屬性的方法。

在普通輔助方法後面加上For就是強制類型輔助方法。

使用方式：

@Html.TextBoxFor(Model -> Model.屬性)

 

示例使用：

①在Model層建立一個Stuent類以下：

  public class Student
    {
        //表示能夠在前臺展現姓名字段
        [DisplayName("姓名")]
        public string name { get; set; }
        [DisplayName("性別")]
        public string sex { get; set; }
        [DisplayName("年齡")]
        public string age { get; set; }
    }

②在Controller層傳遞Model，並能夠設置屬性的值：

public class TestController : Controller
    {
        public ActionResult Contact()
        {
            //使用Controller路由傳遞Model Student
            var student = new Student();
            student.name = "yif";
            student.sex = "男";
            student.age = 24;

            return View(student);
        }
    }

③經過路由跳轉到Contact界面.cshtml中，使用LabelFor、TextBoxFor進行數據展現以下圖：

<div>
    @Html.LabelFor(Model => Model.name)
    @Html.TextBoxFor(Model => Model.name)
</div>
<div>
    @Html.LabelFor(Model => Model.sex)
    @Html.TextBoxFor(Model => Model.sex)
</div>
<div>
    @Html.LabelFor(Model => Model.age)
    @Html.TextBoxFor(Model => Model.age)
</div>