ASP.NET MVC中使用Session来保持表单的状态

素颜马尾好姑娘i 2021-11-02 12:50 287阅读 0赞

本篇实践在ASP.NET MVC 4下使用Session来保持表单的状态。

本篇的源码在这里： [https://github.com/darrenji/KeepFormStateUsingSession][https_github.com_darrenji_KeepFormStateUsingSession]

[![1][]][1 1]

如上，输入俱乐部名称，点击"添加球员"，输入球员名称。我们希望，点击"到别的地方转转"跳转到另外一个视图页，当再次返回的时候能保持表单的状态。

点击"到别的地方转转"跳转到另外一个视图页如下：

[![2][]][2 1]

再次返回，表单的状态被保持了：

[![1][1 2]][1_1 2]

点击"提交"按钮，显示表单的内容：

[![3][]][3 1]

关于球员，对应的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; }

}

关于俱乐部，对应的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强类型视图中，

@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)

@if (Model.Players != null)

{

foreach (var item in Model.Players)

{

Html.RenderAction("NewPlayerRow", "Home", new { player = @item });

}

</ul>

<div>

<a href="javascript:void(0)"  id="gotoOther">到别的地方转转</a>

</div>

}

@section scripts

{

$(function () {

//添加关于Player的新行

$('#addPlayer').on("click", function() {

createPlayerRow();

});

//到别的页

$('#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("添加失败，状态码：" + 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("添加行失败，状态码：" + status);

}

});

}

</script>

}

以上，  
○ 点击"添加球员"，向控制器发出异步请求，把部分视图li动态加载到ul中  
○ 点击"到别的地方转转",向控制器发出异步请求，正是在这时候，在控制器的Action中，实施把表单的状态保存到Session中  
○ 点击"提交"按钮，把表单信息显示出来

另外，当在页面上点击"添加球员"，为了让动态的部分视图能被验证，需要引入dynamicvalidation.js，调用其$.validator.unobtrusive.parseDynamicContent('\#players li:last', "\#myForm")方法，dynamicvalidation.js具体如下：

//对动态生成内容客户端验证

(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);

具体原理，请参考"[Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC][]"这篇文章。

在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());

}

//跳转之前把表单保存到Session中

[HttpPost]

public ActionResult BeforeGoToMustSave(Club club)

{

Session[sessionKey] = club;

return Json(new { msg = true });

}

//保存完Club的Session后真正跳转到的页面

public ActionResult RealGoTo()

{

return View();

}

以上，  
○ 对于接收\[HttpGet\]请求的Index方法对应的视图，Session存在就从Session中取出Club实例，否则就创建一个空的club实例  
○ 对于接收\[HttpPost\]请求的Index方法对应的视图，显示表单内容之前把对应的Session删除  
○ 添加新行NewPlayerRow方法供显示或添加用，当Player类型参数为null的时候，实际就是点击"添加球员"显示新行  
○ BeforeGoToMustSave方法实际是为了在跳转之前保存Session  
○ RealGoTo是点击"到别的地方转转"后真正跳转的视图页

另外，所有视图页的公共页Layout.cshtml，必须引用异步验证的js。

<head>

<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部分视图，是在点击"添加球员"之后动态加载的部分视图。

@using MvcApplication1.Extension

@model MvcApplication1.Models.Player

@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>

其中，用到了扩展Extension文件夹下CollectionEditingHtmlExtensions类的扩展方法，如下：

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.Mvc;

namespace MvcApplication1.Extension

{

public static class CollectionEditingHtmlExtensions

{

//目标生成如下格式

//<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" />

//<label>Title</label>

//<input class="text-box single-line" name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" />

//<span class="field-validation-valid"></span>

public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName)

{

//构建name="FavouriteMovies.Index"

string collectionIndexFieldName = string.Format("{0}.Index", collectionName);

//构建Guid字符串

string itemIndex = GetCollectionItemIndex(collectionIndexFieldName);

//构建带上集合属性+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;

//通过构造函数，先把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">比如，FavouriteMovies.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();

}

其原理，请参考"[MVC批量更新,可验证并解决集合元素不连续控制器接收不完全的问题][MVC]"这篇文章。

Home/RealGoTo.cshtml视图，是点击"到别的地方转转"后跳转到的页面，仅仅提供了一个跳转到Home/Index视图页的链接。

ViewBag.Title = "RealGoTo";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>RealGoTo</h2>

@Html.ActionLink("回到表单页","Index","Home")

就这样。

转载于:https://www.cnblogs.com/darrenji/p/4379555.html

[https_github.com_darrenji_KeepFormStateUsingSession]: https://github.com/darrenji/KeepFormStateUsingSession
[1]: /images/20211101/ec95f1fc36c34333ac15ef4c77d30be7.png
[1 1]: https://images0.cnblogs.com/blog/417212/201503/302327182952970.png
[2]: /images/20211101/7de4686e2f874cd587a986e72bfcf18d.png
[2 1]: https://images0.cnblogs.com/blog/417212/201503/302327193268553.png
[1 2]: https://images0.cnblogs.com/blog/417212/201503/302327206071596.png
[1_1 2]: /images/20211101/ce646a66d5d14c28989d77bb6af3b0c2.png
[3]: /images/20211101/b4ea42175df94deaa632955ceda7c9d1.png
[3 1]: https://images0.cnblogs.com/blog/417212/201503/302327210929279.png
[Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC]: https://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
[MVC]: http://www.cnblogs.com/darrenji/p/3716436.html