ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值

在"MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体"中,对于前台传来的多个TextBox值,在控制器方法中通过强类型来接收。使用FormCollection也可以接收来自前台的多个TextBox值。实现效果如下:

动态添加TextBox:

后台使用FormCollection接收来自前台的TextBox值,再以TempData把接收到的值返回:

当页面没有TextBox,点击"移除",提示"没有文本框可被移除":

在HomeController中,先获取前台用来计数的隐藏域的值,然后遍历,根据前台Input的name属性值的命名规则获取到每个TextBox的值。

    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(FormCollection collection)
        {
            var inputCount = 0; //前端文本框的数量
            var inputValues = new List<string>();//前端文本款的值放到这个集合

            if (int.TryParse(collection["TextBoxCount"], out inputCount))
            {
                for (int i = 1; i <= inputCount; i++)
                {
                    if (!string.IsNullOrEmpty(collection["textbox" + i]))
                    {
                        inputValues.Add(collection["textbox" + i]);
                    }
                }
            }
            TempData["InputResult"] = inputValues;
            return View();
        }
    }

在Home/Index.cshtml中,通过jquery添加或移除TextBox。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    @if (TempData["InputResult"] != null)
    {
        <ul>
            @foreach (var item in (List<string>) TempData["InputResult"])
            {
                <li>@item</li>
            }
        </ul>
    }
</div>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div>
        <div id="TextBoxesGroup">
            <input type="text" id="textbox1" name="textbox1"/>
        </div>
        <hr/>
        @Html.Hidden("TextBoxCount", 1)
        <input type="button" value="添加" id="add"/>
        <input type="button" value="移除" id="remove"/>
        <input type="submit" value="提交"/>
    </div>
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            //默认焦点
            $('#textbox1').focus();

            //点击添加
            $('#add').click(function() {
                //从隐藏域中获取当前文本框的数量
                var currentCount = parseInt($('#TextBoxCount').val(), 10);

                //文本框数量加1
                var newCount = currentCount + 1;

                //创建新的文本框
                var newInput = $(document.createElement('Input')).attr({
                    "type": "text",
                    "id": "textbox" + newCount,
                    "name": "textbox" + newCount
                });

                //把新的文本框附加到区域中
                $('#TextBoxesGroup').append(newInput);

                //把当前文本框的数量赋值到用来计数隐藏域
                $('#TextBoxCount').val(newCount);

                //把焦点转移到新添加的文本框中来
                $('#textbox' + newCount).focus();
            });

            //点击移除
            $('#remove').click(function() {
                //从隐藏域中获取当前文本框的数量
                var currentCount = parseInt($('#TextBoxCount').val(), 10);
                if (currentCount == 0) {
                    alert('已经没有文本框可以被移除了~~');
                    return false;
                }
                //移除当前文本框
                $('#textbox' + currentCount).remove();

                //把新的文本框计数赋值给隐藏域
                var newCount = currentCount - 1;
                $('#TextBoxCount').val(newCount);
            });
        });
    </script>
}

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

(0)

相关推荐

  • asp.net core为IHttpClientFactory添加动态命名配置

    目录 官方有什么推荐么? IHttpClientFactory.CreateClient是如何将HttpClient创建出来的? 扩展点一的实现 扩展点二的实现 使用 总结一下 比如如何使用IHttpClientFactory动态添加cer证书 有三种方法推荐方法 方法一: 推荐的做法是这样子 services.AddHttpClient("a业务").ConfigurePrimaryHttpMessageHandler(...a业务证书) services.AddHttpClient

  • ASP.Net动态读取Excel文件最简方法

    注意:页面分别拖拽一个FileUpload.Button1.Label1.GridView控件,并新建一个UploadedExcel文件夹 Default.aspx.cs代码: using System; using System.Collections.Generic; using System.Data; using System.Data.OleDb; using System.IO; using System.Linq; using System.Web; using System.We

  • asp.net动态生成HTML表单的方法

    本文实例讲述了asp.net动态生成HTML表单的方法.分享给大家供大家参考,具体如下: 经测试System.Web.UI.HtmlControls下的HtmlForm类,也就是我们在传统的asp.net中使用的Form表单对象,不适合动态生成Html代码. 于是自定义了一个简单的HtmlForm容器控件,只需要几行代码.看来Asp.net在封装Html元素方面还是很有优势的,微软为我们定义了大量的基础结构,很容易扩展使用. public class myHtmlForm:HtmlContain

  • ASP.NET MVC前台动态添加文本框并在后台使用FormCollection接收值

    在"MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体"中,对于前台传来的多个TextBox值,在控制器方法中通过强类型来接收.使用FormCollection也可以接收来自前台的多个TextBox值.实现效果如下: 动态添加TextBox: 后台使用FormCollection接收来自前台的TextBox值,再以TempData把接收到的值返回: 当页面没有TextBox,点击"移除",提示"没有文本框可被移除": 在HomeCon

  • 利用ASP.Net Core中的Razor实现动态菜单

    目录 准备 1.实现思路 2.编码 2.1  建立渲染内容填充方法 2.2  建立分部视图 2.3 调用分布视图 准备 1.框架 .netcore  版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址 3.菜单表关键字段 id 表主键(当前菜单) ParentId 父级ID(父级菜单 为0时为顶级菜单,也可能为内容) MenuUrl 菜单地址(只有页面有地址,本身菜单是空) MenuType 菜单类型(1是菜单 2是页面 3是按钮) MenuIcon 图标

  • Asp.net mvc在view中用C#代码动态创建元素

    1.  在view中可以用c#代码foreach动态创建元素 2.  不加@{}下图中c#代码变成了白色,无法识别了. 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持.

  • asp.net mvc 动态编译生成Controller的方法

    做网站后台管理系统的时候,有时我们需要根据用户的录入配置动态生成一些频道,这些频道需要用到独立的Controller,这时就需要用到运行时动态编译了.代码如下: using System.Web.Mvc; using System.CodeDom.Compiler; using System.Text; using Microsoft.CSharp; namespace DynamicCompiler.Controllers { public class HomeController : Con

  • 1个文件如何轻松搞定Asp.net core 3.1动态页面转静态页面

    前言 最近一个Asp.net core项目需要静态化页面,百度查找了一下,没有发现合适的.原因如下 配置麻烦. 类库引用了第三方类,修改起来麻烦. 有只支持MVC,不支持PageModel. 继承ActionFilterAttribute类,只重写了OnActionExecutionAsync,看似静态化了,其实运行时该查数据库还是查数据库,没有真正静态化. 缺少灵活性,没有在线更新静态文件方法,不能测试查看实时页面,没有进行Html压缩,没有使用gzip.br压缩文件. 于是我开始了页面静态化

  • ASP.NET Core MVC如何实现运行时动态定义Controller类型

    昨天有个朋友在微信上问我一个问题:他希望通过动态脚本的形式实现对ASP.NET Core MVC应用的扩展,比如在程序运行过程中上传一段C#脚本将其中定义的Controller类型注册到应用中,问我是否有好解决方案.我当时在外边,回复不太方便,所以只给他说了两个接口/类型:IActionDescriptorProvider和ApplicationPartManager.这是一个挺有意思的问题,所以回家后通过两种方案实现了这个需求.源代码从这里下载. 一.实现的效果 我们先来看看实现的效果.如下所

  • ASP.NET Core奇淫技巧之动态WebApi的实现

    一.前言 接触到动态WebApi(Dynamic Web API)这个词的已有几年,是从ABP框架里面接触到的,当时便对ABP的这个技术很好奇,后面分析了一波,也尝试过从ABP剥离一个出来作为独立组件来使用,可是后来因与ABP依赖太多而放弃.十几天前朋友 熊猫 将这部分代码(我和他在搞事情)成功的从 ABP 中剥离出来并做了一个简单Demo扔给我,经过这么久(实在是太懒_)终于经过一些修改.添加功能.封装,现在已经能作为一个独立组件使用,项目开源在Github(https://github.co

  • ASP.NET Core实现动态获取文件并下载

    ASP.NET Core 中,可以在静态目录添加文件,直接访问就可以下载.但是这种方法可能不安全,也不够灵活. 我们可以在 Controller 控制器中 添加 一个 Action,通过此Action,即可访问服务器的任何文件. Action 格式 public FileResult Down() { return File(xxx,xxx,xxx); } File() 对象 问题在于这个 File() 对象,应该怎么写 笔者举个例子 在100%无错的条件下,文件路径 F:\a.txt 1,创建

随机推荐