脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → .NET使用jQuery Template批量更新

ASP.NET MVC使用jQuery Template实现批量更新

 更新时间：2022年07月31日 11:12:53   作者：Darren Ji  
这篇文章介绍了ASP.NET MVC使用jQuery Template实现批量更新的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

思路

  • 引用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="/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="@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="~/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实现批量更新的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • .net4.0中tuple元组的使用方法

    .net4.0中tuple元组的使用方法

    Tuple是.NET 4.0的新特性，主要功能是动态返回数据结构，也可以用做临时数据结构。现在有了元组[Tuple]，看看它怎么用
    2014-02-02
  • 微信小程序基于腾讯云对象存储的图片上传功能

    微信小程序基于腾讯云对象存储的图片上传功能

    这篇文章主要介绍了微信小程序基于腾讯云对象存储的图片上传功能,需要的朋友可以参考下
    2018-03-03
  • c# .Net Core静态文件服务器的新人入门教程

    c# .Net Core静态文件服务器的新人入门教程

    这篇文章主要给大家介绍了关于c# .Net Core静态文件服务器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • .NET Core 2.0迁移小技巧之MemoryCache问题修复解决的方法

    .NET Core 2.0迁移小技巧之MemoryCache问题修复解决的方法

    这篇文章主要给大家介绍了关于.NET Core 2.0迁移小技巧之MemoryCache问题修复解决的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-08-08
  • Visual Studio 2017安装使用教程

    Visual Studio 2017安装使用教程

    这篇文章主要为大家详细介绍了Visual Studio 2017安装使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-09-09
  • 浅谈如何在ASP.NET Core中实现一个基础的身份认证

    浅谈如何在ASP.NET Core中实现一个基础的身份认证

    这篇文章主要介绍了浅谈如何在ASP.NET Core中实现一个基础的身份认证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-12-12
  • 在 .NET 中 使用 ANTLR4构建语法分析器的方法

    在 .NET 中 使用 ANTLR4构建语法分析器的方法

    本文将介绍如何在 .NET 中使用 ANTLR4 构建语法分析器,本文不会深入讲解 ANTLR4 的语法规则,相关内容可参考 ANTLR4 的官方文档或其他资料,本文将涵盖以下内容：ANTLR4 的开发环境搭建、语法规则编写、语法分析器生成以及语法分析器的使用,感兴趣的朋友一起看看吧
    2025-04-04
  • Microsoft SQL Server 2005 Express 远程访问设置详述，100%成功篇

    Microsoft SQL Server 2005 Express 远程访问设置详述，100%成功篇

    Microsoft SQL Server 2005 Express Edition是Microsoft数据库的低端解决方案，是免费的，并且可以随软件免费发布，而就其数据库功能对于一般的企业级应用已足够了。但 默认安装时只允许本地访问，而不能远程访问。
    2009-03-03
  • WPF中button按钮同时点击多次触发click解决方法

    WPF中button按钮同时点击多次触发click解决方法

    这篇文章主要为大家详细介绍了WPF中button按钮同时点击多次触发click的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 使用Visual Studio编写单元测试

    使用Visual Studio编写单元测试

    本文详细讲解了使用Visual Studio编写单元测试的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03

最新评论