本篇實(shí)踐在ASP.NET MVC 4下使用Session來保持表單的狀態(tài)。

如上，輸入俱樂部名稱，點(diǎn)擊"添加球員"，輸入球員名稱。我們希望，點(diǎn)擊"到別的地方轉(zhuǎn)轉(zhuǎn)"跳轉(zhuǎn)到另外一個(gè)視圖頁(yè)，當(dāng)再次返回的時(shí)候能保持表單的狀態(tài)。

點(diǎn)擊"到別的地方轉(zhuǎn)轉(zhuǎn)"跳轉(zhuǎn)到另外一個(gè)視圖頁(yè)如下：

再次返回，表單的狀態(tài)被保持了：

點(diǎn)擊"提交"按鈕，顯示表單的內(nèi)容：

關(guān)于球員，對(duì)應(yīng)的Model為：

using System.ComponentModel.DataAnnotations;namespace MvcApplication1.Models{    public class Player    {public int Id { get; set; }[Required(ErrorMessage = "必填")][Display(Name = "球員名稱")]public string Name { get; set; }    }}

關(guān)于俱樂部，對(duì)應(yīng)的Model為：

using System.Collections.Generic;using System.ComponentModel.DataAnnotations;namespace MvcApplication1.Models{    public class Club    {public Club(){    this.Players = new List<Player>();}public int Id { get; set; }[Required(ErrorMessage = "必填")][Display(Name = "俱樂部名稱")]public string Name { get; set; }public List<Player> Players { get; set; }    }}

在Home/Index.cshtml強(qiáng)類型視圖中，

@model MvcApplication1.Models.Club@{    ViewBag.Title = "Index";    Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2>@using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "myForm"})){    @Html.LabelFor(m => m.Name)    @Html.TextBoxFor(m => m.Name)    @Html.ValidationMessageFor(m => m.Name)    <br/><br/>        <ul id="players">@if (Model.Players != null){    foreach (var item in Model.Players)    {Html.RenderAction("NewPlayerRow", "Home", new { player = @item });    }    }    </ul>    <a id="addPlayer" href="javascript:void(0)" rel="external nofollow"  rel="external nofollow" >添加球員</a>        <br/><br/>        <div><a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"   id="gotoOther">到別的地方轉(zhuǎn)轉(zhuǎn)</a> &nbsp;<input type="submit" id="up" value="提交" />    </div>}@section scripts{    <script src="~/Scripts/dynamicvalidation.js"></script>    <script type="text/javascript">$(function () {    //添加關(guān)于Player的新行    $("#addPlayer").on("click", function() {createPlayerRow();    });    //到別的頁(yè)    $("#gotoOther").on("click", function() {if ($("#myForm").valid()) {    $.ajax({cache: false,url: "@Url.Action("BeforeGoToMustSave", "Home")",type: "POST",dataType: "json",data: $("#myForm").serialize(),success: function (data) {    if (data.msg) {window.location.href = "@Url.Action("RealGoTo", "Home")";    }},error: function (xhr, status) {    alert("添加失敗，狀態(tài)碼：" + status);}    });}    });});//添加品牌行function createPlayerRow() {    $.ajax({cache: false,url: "@Url.Action("NewPlayerRow", "Home")",type: "GET",data: {},success: function (data) {    $("#players").append(data);    $.validator.unobtrusive.parseDynamicContent("#players li:last", "#myForm");},error: function (xhr, status) {    alert("添加行失敗，狀態(tài)碼：" + status);}    });}    </script>}

以上，

• 點(diǎn)擊"添加球員"，向控制器發(fā)出異步請(qǐng)求，把部分視圖li動(dòng)態(tài)加載到ul中
• 點(diǎn)擊"到別的地方轉(zhuǎn)轉(zhuǎn)",向控制器發(fā)出異步請(qǐng)求，正是在這時(shí)候，在控制器的Action中，實(shí)施把表單的狀態(tài)保存到Session中
• 點(diǎn)擊"提交"按鈕，把表單信息顯示出來

另外，當(dāng)在頁(yè)面上點(diǎn)擊"添加球員"，為了讓動(dòng)態(tài)的部分視圖能被驗(yàn)證，需要引入dynamicvalidation.js，調(diào)用其$.validator.unobtrusive.parseDynamicContent('#players li:last', "#myForm")方法，dynamicvalidation.js具體如下：

//對(duì)動(dòng)態(tài)生成內(nèi)容客戶端驗(yàn)證(function ($) {    $.validator.unobtrusive.parseDynamicContent = function (selector, formSelector) {$.validator.unobtrusive.parse(selector);var form = $(formSelector);var unobtrusiveValidation = form.data("unobtrusiveValidation");var validator = form.validate();$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {    if (validator.settings.rules[elname] == undefined) {var args = {};$.extend(args, elrules);args.messages = unobtrusiveValidation.options.messages[elname];//edit:use quoted strings for the name selector$("[name="" + elname + ""]").rules("add", args);    } else {$.each(elrules, function (rulename, data) {    if (validator.settings.rules[elname][rulename] == undefined) {var args = {};args[rulename] = data;args.messages = unobtrusiveValidation.options.messages[elname][rulename];//edit:use quoted strings for the name selector$("[name="" + elname + ""]").rules("add", args);    }});    }});    };})(jQuery);

在HomeController中，

   public class HomeController : Controller    {private const string sessionKey = "myFormKey";public ActionResult Index(){    Club club = null;    if (Session[sessionKey] != null)    {club = (Club) Session[sessionKey];    }    else    {club = new Club();    }    return View(club);}//提交表單[HttpPost]public ActionResult Index(Club club){    if (ModelState.IsValid)    {StringBuilder sb = new StringBuilder();sb.Append(club.Name);if (club.Players != null && club.Players.Count > 0){    foreach (var item in club.Players)    {sb.AppendFormat("--{0}", item.Name);    }}//刪除Session//Session.Abandon();//Session.Clear();Session.Remove(sessionKey);return Content(sb.ToString());    }    else    {return View(club);    }}//添加新行public ActionResult NewPlayerRow(Player player){    return PartialView("_NewPlayer", player ?? new Player());}//跳轉(zhuǎn)之前把表單保存到Session中[HttpPost]public ActionResult BeforeGoToMustSave(Club club){    Session[sessionKey] = club;    return Json(new { msg = true });}//保存完Club的Session后真正跳轉(zhuǎn)到的頁(yè)面public ActionResult RealGoTo(){    return View();}    }

以上，

• 對(duì)于接收[HttpGet]請(qǐng)求的Index方法對(duì)應(yīng)的視圖，Session存在就從Session中取出Club實(shí)例，否則就創(chuàng)建一個(gè)空的club實(shí)例
• 對(duì)于接收[HttpPost]請(qǐng)求的Index方法對(duì)應(yīng)的視圖，顯示表單內(nèi)容之前把對(duì)應(yīng)的Session刪除
• 添加新行NewPlayerRow方法供顯示或添加用，當(dāng)Player類型參數(shù)為null的時(shí)候，實(shí)際就是點(diǎn)擊"添加球員"顯示新行
• BeforeGoToMustSave方法實(shí)際是為了在跳轉(zhuǎn)之前保存Session
• RealGoTo是點(diǎn)擊"到別的地方轉(zhuǎn)轉(zhuǎn)"后真正跳轉(zhuǎn)的視圖頁(yè)

另外，所有視圖頁(yè)的公共頁(yè)Layout.cshtml，必須引用異步驗(yàn)證的js。

<head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>@ViewBag.Title</title>    @Styles.Render("~/Content/css")    @Scripts.Render("~/bundles/jquery")    @Scripts.Render("~/bundles/jqueryval")</head><body>    @RenderBody()        @RenderSection("scripts", required: false)</body>

Home/_NewPlayer.cshtml部分視圖，是在點(diǎn)擊"添加球員"之后動(dòng)態(tài)加載的部分視圖。

@using MvcApplication1.Extension@model MvcApplication1.Models.Player<li >     @using (Html.BeginCollectionItem("Players"))      {@Html.HiddenFor(model => model.Id) <div>     @Html.LabelFor(m => m.Name)     @Html.TextBoxFor(m => m.Name)     @Html.ValidationMessageFor(m => m.Name) </div>       }</li>

其中，用到了擴(kuò)展Extension文件夾下CollectionEditingHtmlExtensions類的擴(kuò)展方法，如下：

using System;using System.Collections.Generic;using System.Web;using System.Web.Mvc;namespace MvcApplication1.Extension{    public static class CollectionEditingHtmlExtensions    {//目標(biāo)生成如下格式//<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" />//<label>Title</label>//<input name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" />//<span></span>public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName){    //構(gòu)建name="FavouriteMovies.Index"    string collectionIndexFieldName = string.Format("{0}.Index", collectionName);    //構(gòu)建Guid字符串    string itemIndex = GetCollectionItemIndex(collectionIndexFieldName);    //構(gòu)建帶上集合屬性+Guid字符串的前綴    string collectionItemName = string.Format("{0}[{1}]", collectionName, itemIndex);    TagBuilder indexField = new TagBuilder("input");    indexField.MergeAttributes(new Dictionary<string, string>()    {{"name", string.Format("{0}.Index", collectionName)},{"value", itemIndex},{"type", "hidden"},{"autocomplete", "off"}    });    html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing));    return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName);}private class CollectionItemNamePrefixScope : IDisposable{    private readonly TemplateInfo _templateInfo;    private readonly string _previousPrfix;    //通過構(gòu)造函數(shù)，先把TemplateInfo以及TemplateInfo.HtmlFieldPrefix賦值給私有字段變量，并把集合屬性名稱賦值給TemplateInfo.HtmlFieldPrefix    public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName)    {this._templateInfo = templateInfo;this._previousPrfix = templateInfo.HtmlFieldPrefix;templateInfo.HtmlFieldPrefix = collectionItemName;    }    public void Dispose()    {_templateInfo.HtmlFieldPrefix = _previousPrfix;    }}/// <summary>/// /// </summary>/// <param name="collectionIndexFieldName">比如，F(xiàn)avouriteMovies.Index</param>/// <returns>Guid字符串</returns>private static string GetCollectionItemIndex(string collectionIndexFieldName){    Queue<string> previousIndices = (Queue<string>)HttpContext.Current.Items[collectionIndexFieldName];    if (previousIndices == null)    {HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>();string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName];if (!string.IsNullOrWhiteSpace(previousIndicesValues)){    foreach (string index in previousIndicesValues.Split(","))    {previousIndices.Enqueue(index);    }}    }    return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString();}    }}

Home/RealGoTo.cshtml視圖，是點(diǎn)擊"到別的地方轉(zhuǎn)轉(zhuǎn)"后跳轉(zhuǎn)到的頁(yè)面，僅僅提供了一個(gè)跳轉(zhuǎn)到Home/Index視圖頁(yè)的鏈接。

@{    ViewBag.Title = "RealGoTo";    Layout = "~/Views/Shared/_Layout.cshtml";}<h2>RealGoTo</h2>@Html.ActionLink("回到表單頁(yè)","Index","Home")

本篇的源碼在這里： https://github.com/darrenji/KeepFormStateUsingSession

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接