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

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

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

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

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

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

关于球员，对应的Model为：

  1. using System.ComponentModel.DataAnnotations;
  2.  
  4. namespace MvcApplication1.Models
  5.  
  6. {
  7.  
  8.     public class Player
  9.  
  10.     {
  11.  
  12.         public int Id { get; set; }
  13.  
  15.         [Required(ErrorMessage = "必填")]
  16.  
  17.         [Display(Name = "球员名称")]
  18.  
  19.         public string Name { get; set; }
  20.  
  21.     }
  22.  
  23. }
  24.  


关于俱乐部，对应的Model为：


  1. using System.Collections.Generic;
  2.  
  3. using System.ComponentModel.DataAnnotations;
  4.  
  6. namespace MvcApplication1.Models
  7.  
  8. {
  9.  
  10.     public class Club
  11.  
  12.     {
  13.  
  14.         public Club()
  15.  
  16.         {
  17.  
  18.             this.Players = new List<Player>();
  19.  
  20.         }
  21.  
  23.         public int Id { get; set; }
  24.  
  26.         [Required(ErrorMessage = "必填")]
  27.  
  28.         [Display(Name = "俱乐部名称")]
  29.  
  30.         public string Name { get; set; }
  31.  
  33.         public List<Player> Players { get; set; }
  34.  
  35.     }
  36.  
  37. }
  38.  


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


  1. @model MvcApplication1.Models.Club
  2.  
  4. @{
  5.  
  6.     ViewBag.Title = "Index";
  7.  
  8.     Layout = "~/Views/Shared/_Layout.cshtml";
  9.  
  10. }
  11.  
  13. <h2>Index</h2>
  14.  
  16. @using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "myForm"}))
  17.  
  18. {
  19.  
  20.     @Html.LabelFor(m => m.Name)
  21.  
  22.     @Html.TextBoxFor(m => m.Name)
  23.  
  24.     @Html.ValidationMessageFor(m => m.Name)
  25.  
  27.     <br/><br/>
  28.  
  30.     <ul id="players" style="list-style-type: none">
  31.  
  32.         @if (Model.Players != null)
  33.  
  34.         {
  35.  
  36.             foreach (var item in Model.Players)
  37.  
  38.             {
  39.  
  40.                 Html.RenderAction("NewPlayerRow", "Home", new { player = @item });
  41.  
  42.             }
  43.  
  45.         }
  46.  
  47.     </ul>
  48.  
  49.     <a id="addPlayer" href="javascript:void(0)">添加球员</a>
  50.  
  52.     <br/><br/>
  53.  
  55.     <div>
  56.  
  57.         <a href="javascript:void(0)"  id="gotoOther">到别的地方转转</a> &nbsp;
  58.  
  59.         <input type="submit" id="up" value="提交" />
  60.  
  61.     </div>
  62.  
  63. }
  64.  
  66. @section scripts
  67.  
  68. {
  69.  
  70.     <script src="~/Scripts/dynamicvalidation.js"></script>
  71.  
  72.     <script type="text/javascript">
  73.  
  74.         $(function () {
  75.  
  77.             //添加关于Player的新行
  78.  
  79.             $('#addPlayer').on("click", function() {
  80.  
  81.                 createPlayerRow();
  82.  
  83.             });
  84.  
  86.             //到别的页
  87.  
  88.             $('#gotoOther').on("click", function() {
  89.  
  90.                 if ($('#myForm').valid()) {
  91.  
  92.                     $.ajax({
  93.  
  94.                         cache: false,
  95.  
  96.                         url: '@Url.Action("BeforeGoToMustSave", "Home")',
  97.  
  98.                         type: 'POST',
  99.  
  100.                         dataType: 'json',
  101.  
  102.                         data: $('#myForm').serialize(),
  103.  
  104.                         success: function (data) {
  105.  
  106.                             if (data.msg) {
  107.  
  108.                                 window.location.href = '@Url.Action("RealGoTo", "Home")';
  109.  
  110.                             }
  111.  
  112.                         },
  113.  
  114.                         error: function (xhr, status) {
  115.  
  116.                             alert("添加失败，状态码：" + status);
  117.  
  118.                         }
  119.  
  120.                     });
  121.  
  122.                 }
  123.  
  124.             });
  125.  
  126.         });
  127.  
  129.         //添加品牌行
  130.  
  131.         function createPlayerRow() {
  132.  
  133.             $.ajax({
  134.  
  135.                 cache: false,
  136.  
  137.                 url: '@Url.Action("NewPlayerRow", "Home")',
  138.  
  139.                 type: "GET",
  140.  
  141.                 data: {},
  142.  
  143.                 success: function (data) {
  144.  
  145.                     $('#players').append(data);
  146.  
  147.                     $.validator.unobtrusive.parseDynamicContent('#players li:last', "#myForm");
  148.  
  150.                 },
  151.  
  152.                 error: function (xhr, status) {
  153.  
  154.                     alert("添加行失败，状态码：" + status);
  155.  
  156.                 }
  157.  
  158.             });
  159.  
  160.         }
  161.  
  162.     </script>
  163.  
  164. }
  165.  


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


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


  1. //对动态生成内容客户端验证
  2.  
  3. (function ($) {
  4.  
  5.     $.validator.unobtrusive.parseDynamicContent = function (selector, formSelector) {
  6.  
  7.         $.validator.unobtrusive.parse(selector);
  8.  
  9.         var form = $(formSelector);
  10.  
  11.         var unobtrusiveValidation = form.data('unobtrusiveValidation');
  12.  
  13.         var validator = form.validate();
  14.  
  15.         $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
  16.  
  17.             if (validator.settings.rules[elname] == undefined) {
  18.  
  19.                 var args = {};
  20.  
  21.                 $.extend(args, elrules);
  22.  
  23.                 args.messages = unobtrusiveValidation.options.messages[elname];
  24.  
  25.                 //edit:use quoted strings for the name selector
  26.  
  27.                 $("[name='" + elname + "']").rules("add", args);
  28.  
  29.             } else {
  30.  
  31.                 $.each(elrules, function (rulename, data) {
  32.  
  33.                     if (validator.settings.rules[elname][rulename] == undefined) {
  34.  
  35.                         var args = {};
  36.  
  37.                         args[rulename] = data;
  38.  
  39.                         args.messages = unobtrusiveValidation.options.messages[elname][rulename];
  40.  
  41.                         //edit:use quoted strings for the name selector
  42.  
  43.                         $("[name='" + elname + "']").rules("add", args);
  44.  
  45.                     }
  46.  
  47.                 });
  48.  
  49.             }
  50.  
  51.         });
  52.  
  53.     };
  54.  
  55. })(jQuery);


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


在HomeController中，


  1.    public class HomeController : Controller
  2.  
  3.     {
  4.  
  5.         private const string sessionKey = "myFormKey";
  6.  
  8.         public ActionResult Index()
  9.  
  10.         {
  11.  
  12.             Club club = null;
  13.  
  14.             if (Session[sessionKey] != null)
  15.  
  16.             {
  17.  
  18.                 club = (Club) Session[sessionKey];
  19.  
  20.             }
  21.  
  22.             else
  23.  
  24.             {
  25.  
  26.                 club = new Club();
  27.  
  28.             }
  29.  
  30.             return View(club);
  31.  
  32.         }
  33.  
  35.         //提交表单
  36.  
  37.         [HttpPost]
  38.  
  39.         public ActionResult Index(Club club)
  40.  
  41.         {
  42.  
  43.             if (ModelState.IsValid)
  44.  
  45.             {
  46.  
  47.                 StringBuilder sb = new StringBuilder();
  48.  
  49.                 sb.Append(club.Name);
  50.  
  52.                 if (club.Players != null && club.Players.Count > 0)
  53.  
  54.                 {
  55.  
  56.                     foreach (var item in club.Players)
  57.  
  58.                     {
  59.  
  60.                         sb.AppendFormat("--{0}", item.Name);
  61.  
  62.                     }
  63.  
  64.                 }
  65.  
  66.                 //删除Session
  67.  
  68.                 //Session.Abandon();
  69.  
  70.                 //Session.Clear();
  71.  
  72.                 Session.Remove(sessionKey);
  73.  
  74.                 return Content(sb.ToString());
  75.  
  76.             }
  77.  
  78.             else
  79.  
  80.             {
  81.  
  82.                 return View(club);
  83.  
  84.             }
  85.  
  86.         }
  87.  
  89.         //添加新行
  90.  
  91.         public ActionResult NewPlayerRow(Player player)
  92.  
  93.         {
  94.  
  95.             return PartialView("_NewPlayer", player ?? new Player());
  96.  
  97.         }
  98.  
  100.         //跳转之前把表单保存到Session中
  101.  
  102.         [HttpPost]
  103.  
  104.         public ActionResult BeforeGoToMustSave(Club club)
  105.  
  106.         {
  107.  
  108.             Session[sessionKey] = club;
  109.  
  110.             return Json(new { msg = true });
  111.  
  112.         }
  113.  
  115.         //保存完Club的Session后真正跳转到的页面
  116.  
  117.         public ActionResult RealGoTo()
  118.  
  119.         {
  120.  
  121.             return View();
  122.  
  123.         }
  124.  
  126.     }
  127.  


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


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


  1. <head>
  2.  
  3.     <meta charset="utf-8" />
  4.  
  5.     <meta name="viewport" content="width=device-width" />
  6.  
  7.     <title>@ViewBag.Title</title>
  8.  
  9.     @Styles.Render("~/Content/css")
  10.  
  11.     @Scripts.Render("~/bundles/jquery")
  12.  
  13.     @Scripts.Render("~/bundles/jqueryval")
  14.  
  15. </head>
  16.  
  17. <body>
  18.  
  19.     @RenderBody()
  20.  
  23.     @RenderSection("scripts", required: false)
  24.  
  25. </body>
  26.  


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


  1. @using MvcApplication1.Extension
  2.  
  3. @model MvcApplication1.Models.Player
  4.  
  6. <li  class="newcarcolorli">
  7.  
  8.      @using (Html.BeginCollectionItem("Players"))
  9.  
  10.      {
  11.  
  12.         @Html.HiddenFor(model => model.Id)
  13.  
  14.          <div>
  15.  
  16.              @Html.LabelFor(m => m.Name)
  17.  
  18.              @Html.TextBoxFor(m => m.Name)
  19.  
  20.              @Html.ValidationMessageFor(m => m.Name)
  21.  
  22.          </div>
  23.  
  24.      }
  25.  
  26. </li>
  27.  


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


  1. using System;
  2.  
  3. using System.Collections.Generic;
  4.  
  5. using System.Web;
  6.  
  7. using System.Web.Mvc;
  8.  
  10. namespace MvcApplication1.Extension
  11.  
  12. {
  13.  
  14.     public static class CollectionEditingHtmlExtensions
  15.  
  16.     {
  17.  
  18.         //目标生成如下格式
  19.  
  20.         //<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" />
  21.  
  22.         //<label>Title</label>
  23.  
  24.         //<input class="text-box single-line" name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" />
  25.  
  26.         //<span class="field-validation-valid"></span>
  27.  
  29.         public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName)
  30.  
  31.         {
  32.  
  33.             //构建name="FavouriteMovies.Index"
  34.  
  35.             string collectionIndexFieldName = string.Format("{0}.Index", collectionName);
  36.  
  37.             //构建Guid字符串
  38.  
  39.             string itemIndex = GetCollectionItemIndex(collectionIndexFieldName);
  40.  
  41.             //构建带上集合属性+Guid字符串的前缀
  42.  
  43.             string collectionItemName = string.Format("{0}[{1}]", collectionName, itemIndex);
  44.  
  46.             TagBuilder indexField = new TagBuilder("input");
  47.  
  48.             indexField.MergeAttributes(new Dictionary<string, string>()
  49.  
  50.             {
  51.  
  52.                 {"name", string.Format("{0}.Index", collectionName)},
  53.  
  54.                 {"value", itemIndex},
  55.  
  56.                 {"type", "hidden"},
  57.  
  58.                 {"autocomplete", "off"}
  59.  
  60.             });
  61.  
  62.             html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing));
  63.  
  64.             return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName);
  65.  
  66.         }
  67.  
  69.         private class CollectionItemNamePrefixScope : IDisposable
  70.  
  71.         {
  72.  
  73.             private readonly TemplateInfo _templateInfo;
  74.  
  75.             private readonly string _previousPrfix;
  76.  
  78.             //通过构造函数，先把TemplateInfo以及TemplateInfo.HtmlFieldPrefix赋值给私有字段变量，并把集合属性名称赋值给TemplateInfo.HtmlFieldPrefix
  79.  
  80.             public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName)
  81.  
  82.             {
  83.  
  84.                 this._templateInfo = templateInfo;
  85.  
  86.                 this._previousPrfix = templateInfo.HtmlFieldPrefix;
  87.  
  88.                 templateInfo.HtmlFieldPrefix = collectionItemName;
  89.  
  90.             }
  91.  
  93.             public void Dispose()
  94.  
  95.             {
  96.  
  97.                 _templateInfo.HtmlFieldPrefix = _previousPrfix;
  98.  
  99.             }
  100.  
  101.         }
  102.  
  104.         /// <summary>
  105.  
  106.         ///
  107.  
  108.         /// </summary>
  109.  
  110.         /// <param name="collectionIndexFieldName">比如，FavouriteMovies.Index</param>
  111.  
  112.         /// <returns>Guid字符串</returns>
  113.  
  114.         private static string GetCollectionItemIndex(string collectionIndexFieldName)
  115.  
  116.         {
  117.  
  118.             Queue<string> previousIndices = (Queue<string>)HttpContext.Current.Items[collectionIndexFieldName];
  119.  
  120.             if (previousIndices == null)
  121.  
  122.             {
  123.  
  124.                 HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>();
  125.  
  126.                 string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName];
  127.  
  128.                 if (!string.IsNullOrWhiteSpace(previousIndicesValues))
  129.  
  130.                 {
  131.  
  132.                     foreach (string index in previousIndicesValues.Split(','))
  133.  
  134.                     {
  135.  
  136.                         previousIndices.Enqueue(index);
  137.  
  138.                     }
  139.  
  140.                 }
  141.  
  142.             }
  143.  
  144.             return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString();
  145.  
  146.         }
  147.  
  148.     }
  149.  
  150. }
  151.  


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


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


  1. @{
  2.  
  3.     ViewBag.Title = "RealGoTo";
  4.  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";
  6.  
  7. }
  8.  
  10. <h2>RealGoTo</h2>
  11.  
  13. @Html.ActionLink("回到表单页","Index","Home")
  14.  


就这样。
												


											
ASP.NET MVC中使用Session来保持表单的状态的更多相关文章
	

    
								
  1. ASP.NET MVC中的Session设置
		
    最近在ASP.NET MVC项目中碰到这样的情况:在一个controller中设置了Session,但在另一个controller的构造函数中无法获取该Session,会报"System.N ...
    
		
    2. 
						
  2. ASP.NET MVC中的Session以及处理方式
		
    最近在ASP.NET MVC项目中碰到这样的情况:在一个controller中设置了Session,但在另一个controller的构造函数中无法获取该Session,会报"System.N ...
    
		
    3. 
						
  3. ASP.NET MVC 中解决Session，Cookie等依赖的方式
		
    原文:https://blog.csdn.net/mzl87/article/details/90580869 本文将分别介绍在MVC中使用Filter和Model Binding两种方式来说明如何解 ...
    
		
    4. 
						
  4. 转载ASP.NET MVC中Session的处理机制
		
    本文章转载自 http://www.cnblogs.com/darrenji/p/3951065.html ASP.NET MVC中的Session以及处理方式   最近在ASP.NET MVC项目中 ...
    
		
    5. 
						
  5. ASP.NET MVC中的两个Action之间值的传递--TempData
		
    一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在一个叫做TempData的Property,它的类型为TempDataDictiona ...
    
		
    6. 
						
  6. Asp.net MVC中提交集合对象，实现Model绑定
		
    Asp.net MVC中的Model自动绑定功能,方便了我们对于request中的数据的处理, 从客户端的请求数据,自动地以Action方法参数的形式呈现.有时候我们的Action方法中想要接收数组类 ...
    
		
    7. 
						
  7. Asp.net MVC中 Controller 与 View之间的数据传递
		
    在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...
    
		
    8. 
						
  8. Asp.net mvc中的Ajax处理
		
    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
    
		
    9. 
						
  9. 在ASP.NET MVC中实现基于URL的权限控制
		
    本示例演示了在ASP.NET MVC中进行基于URL的权限控制,由于是基于URL进行控制的,所以只能精确到页.这种权限控制的优点是可以在已有的项目上改动极少的代码来增加权限控制功能,和项目本身的耦合度 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux usb枚举过程分析之守护进程及其唤醒【转】
			
    转自:http://blog.csdn.net/xuelin273/article/details/38646765 usb热插拔,即usb设备可以实现即插即用,像U盘一样,插到电脑里就可以用,不用时 ...
    
			
    2. 
						
  2. ajax与302响应
			
    在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起看看实际 ...
    
			
    3. 
						
  3. sonar Lint ----code bad smell
			
    类名注释报黄: 去掉这段黄做法:alt+enter 本文参考: http://www.cnblogs.com/xxoome/p/6677170.html
    
			
    4. 
						
  4. snmp信息的查询命令snmpwalk
			
    在日常监控中,经常会用到 snmp 服务,而 snmpwalk 命令则是测试系统各种信息最有效的方法,现总结一些常用的方法如下: 获取所有信息snmpwalk -v 2c -c public 52.0 ...
    
			
    5. 
						
  5. CSS3实现图片木桶布局
			
    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...
    
			
    6. 
						
  6. liunx jdk安装
			
    打开https://www.oracle.com/technetwork/java/javase/downloads/index.html 选择Development版本(server为服务器版本), ...
    
			
    7. 
						
  7. 神奇的Content-Type--在JSON中玩转XXE攻击
			
    转自:360安全播报http://bobao.360.cn/learning/detail/360.html 大家都知道,许多WEB和移动应用都依赖于Client-Server的WEB通信交互服务.而 ...
    
			
    8. 
						
  8. 阿里云url解析，发布web后去除url中的端口号
			
    归根结底就是80端口的使用,不是http的80 的 或 https的  都得加端口号 [问题描述] http://wisecores.wisers.com:8080/JsonProject/servl ...
    
			
    9. 
						
  9. [图解算法]  二分查找Binary-Search——<递归与分治策略>
			
    #include"iostream.h" int BinarySearch(int a[],int left,int right,const int& x) { if(le ...
    
			
    10. 
						
  10. 在win7_64bit + ubuntu-12.04-desktop-amd64+VMware-workstation-full-10.0.1-1379776平台上安装ns-allinone-2.35
			
    step1.  ns-allinone-2.35的下载地址:http://www.isi.edu/nsnam/ns/ns-build.html#allinone step2.  在虚拟机中打开term ...
    
			
    11.