.net MVC之表单的使用

表单是包含输入元素的容器，包含按钮、复选框和文本框等元素，这些元素可以使用户在页面中输入相应的数据，并把这些信息提交给服务器。

1. Action和Method

action中描述信息发往哪里，method告诉浏览器使用http get还是http post, 例如：

<form action="http://baidu.com/search">
<input type="text" name="textName">
<input type="submit" name="search">
</form> 

注意：此时的form表单里没有method特性，表单默认http get方式提交。

2. Post还是Get

1）Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
2）Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
3）Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
4）Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。
5）Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
6）Get是Form的默认方法。

举个例子：

<form action="/Main/Search" method="get">
    <input name="q" type="text"/>
    <input type="submit" value="Search"/>
</form> 

下一步就是在MainController控制器中实现Search方法。下面的代码块对数据进行查询：

public ActionResult Search(string q)
{
    var data = storeDB.Albums
        .Include("Music")
        .Where(a => a.Title.Contains(q) || q == null)
        .Take(10);

    return View(data);
} 

这里的Search操作接收名为q的字符串参数，当q出现时，ASP.NET MVC框架会自动在查询字符串中找到这个值；即便搜索表单发出的是POST请求而非GET请求，搜索引擎也会在提交的表单中找到这个值。

接下来由控制器告知ASP.NET MVC框架渲染视图，现在就可以在Home视图目录下创建Search.cshtml视图来显示搜索结果： 

@{ ViewBag.Title = "Search"; } 

<h2>Results</h2> <table>
    <tr>
        <th>Artist</th>
        <th>Title</th>
        <th>Price</th>
    </tr>
     @foreach(var item in Model)
    {
        <tr>
            <td>@item.Artist.Name</td>
            <td>@item.Title</td>
            <td>@String.Format("{0:c}", item.Price)</td>
        </tr>
    }
</table> 

3. Html辅助方法

 HTML辅助方法是可以通过视图的Html属性调用的方法。相应的也可以通过Url属性调用URL辅助方法，通过Ajax属性调用AJAX辅助方法。所有这些方法都有一个共同的目标：使视图编码变得更容易。

大部分的辅助方法输出HTML标记，尤其是HTML辅助方法都如此。例如，刚才提到的BeginForm辅助方法就是在为搜索表单而构建强壮的form标签，但这并没有太多的编码： 

@using (Html.BeginForm("Search", "Main", FormMethod.Get))
{

    <input name="q" type="text"/>
    <input type="submit" value="Search"/>

 }

3.1自动编码

@Html.TextArea("text","hello <br/> MVC")

 TextArea辅助方法中的第二个参数是要渲染的值。TextArea辅助方法将产生下面的标记：  

<textarea cols="20"id="text" name="text" rows="2">hello &lt; br/&gt; MVC</textarea> 

输出值是经过HTML编码的。默认的编码可以帮助避免跨站点脚本攻击（Cross Site Scripting，XSS）。

3.2 添加元素

 一旦表单和验证摘要设计完成，就可以在视图中添加一些输入元素让用户来输入专辑信息。

@using(Html.BeginForm())
{
        @Html.ValidationSummary(excludePropertyErrors: true)
        <fieldset>
            <p>
                @Html.Label("GenreId")
                @Html.DropDownList("GenreId", ViewBag.Genres asSelectList)
            </p>
            <p>
                @Html.Label("Title")
                @Html.TextBox("Title", Model.Title)
                @Html.ValidationMessage("Title")
                <input type="submit" value="Save"/>
            </p>
        </fieldset>
}

从上述代码中可以看出，在视图中有4个新的辅助方法：Label、DropDownList、TextBox和ValidationMessage。

1）Html.TextBox（和Html.TextArea）

TextBox辅助方法渲染type特性为text的input标签。一般用TextBox辅助方法接收用户自由形式的输入。  

@Html.TextBox("Title", Model.Title) 

      会生成如下所示的HTML标记： 

<input id="Title" name="Title" type="text" value="For Those About To Rock We Salute You"/>

      TextBox辅助方法的一个兄弟方法就是TextArea辅助方法。下面的代码展示了使用TextArea方法渲染一个能够显示多行文本的<textarea>元素： 

@Html.TextArea("text", "hello <br /> MVC") 

      上述代码渲染的HTML标记如下： 

<textarea cols="20" id="text" name="text" rows="2">hello &lt;br /&gt; MVC</textarea> 

      TextArea辅助方法的其他重载版本可以通过指定显示的行数和列数控制文本区的大小： 

@Html.TextArea("text", "hello <br /> MVC", 10, 80, null) 

      这行代码将生成如下所示的HTML标记：

2) Html.Label

       Label辅助方法将返回一个<label/>元素，并用String类型的参数决定渲染的文本和for特性值。这个辅助方法的一个重载版本允许独立地设置for特性和要渲染的文本。在上面的代码中，调用Html.Label(“GenreId”)将生成如下所示的HTML标记： 

<label for="GenreId">Genre</label> 

      如果以前没有使用过label元素，那么现在可能极想知道这个元素是否有存在的价值。其实，label的作用就是为其他输入元素（比如文本输入元素）显示附加信息，这样可以为用户提供人性化的界面，从而增强应用程序的可访问性。label渲染的文本不是“GenreId”（传递给辅助方法的字符串），而是“Genre”。

3）Html.DropDownList(和Html.ListBox)

  DrowpDownList和ListBox辅助方法都返回一个<select />元素。DropDownList允许进行单项选择，而ListBox支持多项选择（通过在要渲染的标记中将multiple特性的值设置为multiple）。需要一个包含所有可选项的SelectListItem对象集合，其中每一个SelectListItem  对象中又包含Text、Value和Selected三个属性。可以根据需要构建自己的SelectListItem对象集合，也可以使用框架中的SelectList或MultiSelectList辅助方法类来构建。

public ActionResult Edit(int id)
{
        var album = storeDB.Albums.Single(a => a.AlbumId == id);
        ViewBag.Genres = storeDB.Genres
                                .OrderBy(g => g.Name)
                                .AsEnumerable()
                                .Select(g => newSelectListItem
                                {
                                    Text = g.Name,
                                    Value = g.GenreId.ToString(),
                                    Selected = album.GenreId == g.GenreId
                                });
        return View(album);
} 

4）Html.ValidationMessage

      当ModelState字典中的某一特定字段出现错误时，可以使用ValidationMessage辅助方法来显示相应的错误提示消息。可以用下面这行代码显示错误提示消息： 

@Html.ValidationMessage("Title") 

    执行后生成的HTML标记如下： 

<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="true">What a terrible name!</span> 

      这条消息只有当键值“Title”在模型状态中出现错误时才会出现。也可以调用@Html.ValidationMessage的一个重写方法来重写视图中的错误提示消息： 

@Html.ValidationMessage("Title","Something is wrong with your titile") 

     上述代码将渲染的HTML形式为： 

<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="false">Something is wrong with your titile</span>