您现在的位置是:网站首页> 编程资料编程资料
ASP.NET MVC使用jQuery Template实现批量更新_实用技巧_
2023-05-24
318人已围观
简介 ASP.NET MVC使用jQuery Template实现批量更新_实用技巧_
思路
- 引用jQuery Template所需要的js文件:jquery.tmpl.min.js
- 在中生成模版内容,里面包含占位符
- 点击添加按钮的时候,把模版内容追加到界面上,并给占位符赋值
jQuery Template的内容大致是这样:
为了得到以上内容,由帮助类方法获得:
帮助类CollectionEditingHtmlExtensions:
模版内容同样是通过MovieEntryEditor.cshtml这个部分视图生成的,只不过生成的内容中包含了占位符。
using System; using System.Collections.Generic; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Html; namespace VariableCollection.Extension { public static class CollectionEditingHtmlExtensions { /// /// 目标是生成如下格式 /// /// /// /// /// /// /// /// 集合属性的名称 /// public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName) { if (string.IsNullOrEmpty(collectionName)) { throw new ArgumentException("collectionName is null or empty","collectionName"); } string collectionIndexFieldName = String.Format("{0}.Index", collectionName);//FavouriteMovies.Index string itemIndex = null; if (html.ViewData.ContainsKey(JQueryTemplatingEnabledKey)) { itemIndex = "${index}"; } else { itemIndex = GetCollectionItemIndex(collectionIndexFieldName); } //比如,FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b] string collectionItemName = string.Format("{0}[{1}]", collectionName, itemIndex); TagBuilder indexField = new TagBuilder("input"); indexField.MergeAttributes(new Dictionary() { { "name", String.Format("{0}.Index", collectionName) }, //name="FavouriteMovies.Index" { "value", itemIndex },//value="6d85a95b-1dee-4175-bfae-73fad6a3763b" { "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 _previousPrefix; public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName) { this._templateInfo = templateInfo; _previousPrefix = templateInfo.HtmlFieldPrefix; templateInfo.HtmlFieldPrefix = collectionItemName; } public void Dispose() { _templateInfo.HtmlFieldPrefix = _previousPrefix; } } /// /// 以FavouriteMovies.Index为键,把Guid字符串存放在上下文中 /// 如果是添加进入部分视图,就直接生成一个Guid字符串 /// 如果是更新,为了保持和ModelState的一致,就遍历原先的Guid /// /// 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(); } private const string JQueryTemplatingEnabledKey = "__BeginCollectionItem_jQuery"; public static MvcHtmlString CollectionItemJQueryTemplate(this HtmlHelper html, string partialViewName, TCollectionItem modelDefaultValues) { ViewDataDictionary viewData = new ViewDataDictionary(modelDefaultValues); viewData.Add(JQueryTemplatingEnabledKey, true); return html.Partial(partialViewName, modelDefaultValues, viewData); } } } MovieEntryEditor.cshtm部分视图
@using VariableCollection.Extension @model VariableCollection.Models.Movie
HomeController
public ActionResult EditJqueryTemplate() { return View(CurrentUser); } [HttpPost] public ActionResult EditJqueryTemplate(User user) { if (!this.ModelState.IsValid) { return View(user); } CurrentUser = user; return RedirectToAction("Display"); }EditJqueryTemplate.cshtml完整代码如下:
@using VariableCollection.Extension @using VariableCollection.Models @model VariableCollection.Models.User @{ ViewBag.Title = "EditJqueryTemplate"; Layout = "~/Views/Shared/_Layout.cshtml"; } EditJqueryTemplate
@using (Html.BeginForm()) { @Html.ValidationSummary(true) } @section scripts { }到此这篇关于ASP.NET MVC使用jQuery Template实现批量更新的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
