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
    {
        /// 

        /// 目标是生成如下格式
        ///
        ///Title
        ///
        ///
        /// 
        /// 
        /// 
        /// 集合属性的名称
        /// 
        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
 

    @using (Html.BeginCollectionItem("FavouriteMovies"))
    {
        
 
        @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)
 
        删除行
    }

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)
    

        
最喜欢看的电影
        @Html.HiddenFor(model => model.Id)
        

            @Html.LabelFor(model => model.Name)
        
        

            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        
    
    
    

        
最喜欢看的电影
        @if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0)
        {
            
没有喜欢看的电影~~
        }
        

            @if (Model.FavouriteMovies != null)
            {
                foreach (Movie movie in Model.FavouriteMovies)
                {
                    Html.RenderPartial("MovieEntryEditor", movie);
                }
            }
        
               
        添加
    
    

        
    
}
 
@section scripts
{
    
    
    
 
    
}

到此这篇关于ASP.NET MVC使用jQuery Template实现批量更新的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。