思路
- 引用jQuery Template所需要的js文件:jquery.tmpl.min.js
- 在<script type="text/x-jquery-tmpl" id="movieTemplate"></script>中生成模版内容,里面包含占位符
- 点击添加按钮的时候,把模版内容追加到界面上,并给占位符赋值
jQuery Template的内容大致是这样:
<script type="text/x-jquery-tmpl" id="movieTemplate"> <li style="padding-bottom:15px"> <input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="${index}" /> <img src="https://www.atool.online/Content/images/draggable-icon.png" style="cursor: move" alt=""/> <label>Title</label> <input name="FavouriteMovies[${index}].Title" type="text" value="" /> <label>Rating</label> <input name="FavouriteMovies[${index}].Rating" type="text" value="0" /> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="$(this).parent().remove();">Delete</a> </li> </script>
为了得到以上内容,由帮助类方法获得:
<script type="text/x-jquery-tmpl" id="movieTemplate"> @Html.CollectionItemJQueryTemplate("MovieEntryEditor", new Movie()) </script>
帮助类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 { /// <summary> /// 目标是生成如下格式 ///<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> /// </summary> /// <typeparam name="TModel"></typeparam> /// <param name="html"></param> /// <param name="collectionName">集合属性的名称</param> /// <returns></returns> public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> 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<string, string>() { { "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; } } /// <summary> /// 以FavouriteMovies.Index为键,把Guid字符串存放在上下文中 /// 如果是添加进入部分视图,就直接生成一个Guid字符串 /// 如果是更新,为了保持和ModelState的一致,就遍历原先的Guid /// </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(); } private const string JQueryTemplatingEnabledKey = "__BeginCollectionItem_jQuery"; public static MvcHtmlString CollectionItemJQueryTemplate<TModel, TCollectionItem>(this HtmlHelper<TModel> html, string partialViewName, TCollectionItem modelDefaultValues) { ViewDataDictionary<TCollectionItem> viewData = new ViewDataDictionary<TCollectionItem>(modelDefaultValues); viewData.Add(JQueryTemplatingEnabledKey, true); return html.Partial(partialViewName, modelDefaultValues, viewData); } } }
MovieEntryEditor.cshtm部分视图
@using VariableCollection.Extension @model VariableCollection.Models.Movie <li style="padding-bottom: 15px;"> @using (Html.BeginCollectionItem("FavouriteMovies")) { <img src="https://www.atool.online/article/@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/> @Html.LabelFor(model => model.Title) @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) @Html.LabelFor(model => model.Rating) @Html.EditorFor(model => model.Rating) @Html.ValidationMessageFor(model => model.Rating) <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick=" $(this).parent().remove(); ">删除行</a> } </li>
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"; } <h2>EditJqueryTemplate</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>最喜欢看的电影</legend> @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> </fieldset> <fieldset> <legend>最喜欢看的电影</legend> @if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0) { <p>没有喜欢看的电影~~</p> } <ul id="movieEditor" style="list-style-type: none"> @if (Model.FavouriteMovies != null) { foreach (Movie movie in Model.FavouriteMovies) { Html.RenderPartial("MovieEntryEditor", movie); } } </ul> <a id="addAnother" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >添加</a> </fieldset> <p> <input type="submit" value="提交" /> </p> } @section scripts { <script src="https://www.atool.online/article/~/Scripts/jquery.tmpl.min.js"></script> <script type="text/x-jquery-tmpl" id="movieTemplate"> @Html.CollectionItemJQueryTemplate("MovieEntryEditor", new Movie()) </script> <script type="text/javascript"> $(function () { $("#movieEditor").sortable(); $('#addAnother').click(function() { viewModel.addNew(); }); }); var viewModel = { addNew: function () { $("#movieEditor").append($("#movieTemplate").tmpl({ index: viewModel._generateGuid() })); }, _generateGuid: function () { // Source: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/105074#105074 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } }; </script> }
到此这篇关于ASP.NET MVC使用jQuery Template实现批量更新的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。