ASP.NET MVC使用Session会话保持表单状态

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

ASP.NET MVC使用Session会话保持表单状态_第1张图片

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

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

ASP.NET MVC使用Session会话保持表单状态_第2张图片

再次返回,表单的状态被保持了:

ASP.NET MVC使用Session会话保持表单状态_第3张图片

点击"提交"按钮,显示表单的内容:

关于球员,对应的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();
        }
        public int Id { get; set; }
        [Required(ErrorMessage = "必填")]
        [Display(Name = "俱乐部名称")]
        public string Name { get; set; }
        public List Players { get; set; }
    }
}

在Home/Index.cshtml强类型视图中,

@model MvcApplication1.Models.Club
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Index

@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 }); } }
添加球员

} @section scripts { }

以上,

  • 点击"添加球员",向控制器发出异步请求,把部分视图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);

在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。


    
    
    @ViewBag.Title
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @RenderBody()
    
    @RenderSection("scripts", required: false)

Home/_NewPlayer.cshtml部分视图,是在点击"添加球员"之后动态加载的部分视图。

@using MvcApplication1.Extension
@model MvcApplication1.Models.Player
  • @using (Html.BeginCollectionItem("Players")) { @Html.HiddenFor(model => model.Id)
    @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name) @Html.ValidationMessageFor(m => m.Name)
    }
  • 其中,用到了扩展Extension文件夹下CollectionEditingHtmlExtensions类的扩展方法,如下:

    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.Mvc;
    namespace MvcApplication1.Extension
    {
        public static class CollectionEditingHtmlExtensions
        {
            //目标生成如下格式
            //
            //
            //
            //
            public static IDisposable BeginCollectionItem(this HtmlHelper 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()
                {
                    {"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;
                }
            }
            /// 
            /// 
            /// 
            /// 比如,FavouriteMovies.Index
            /// Guid字符串
            private static string GetCollectionItemIndex(string collectionIndexFieldName)
            {
                Queue previousIndices = (Queue)HttpContext.Current.Items[collectionIndexFieldName];
                if (previousIndices == null)
                {
                    HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue();
                    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视图,是点击"到别的地方转转"后跳转到的页面,仅仅提供了一个跳转到Home/Index视图页的链接。

    @{
        ViewBag.Title = "RealGoTo";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    

    RealGoTo

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

    本篇的源码在这里: https://github.com/darrenji/KeepFormStateUsingSession

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

    你可能感兴趣的:(ASP.NET MVC使用Session会话保持表单状态)