我没有模型的细节,但给出了您提供的标记和代码我使用Microsoft jQuery Unobtrusive Ajax(必须安装它,如果尚未安装,请使用Nuget是最简单的方法。在Nuget控制台中输入Install-Package Microsoft.jQuery.Unobtrusive.Ajax。你也可以使用NuGet Packages Manager)。

这可以按预期方式发送到服务器(通过AJAX进入动作EmployeesPost)移位代码TextBoxes上的新值。

安装后Microsoft.jQuery.Unobtrusive.Ajax你必须在你的BundleConfig.cs文件中添加捆App_Start文件夹下,这样的:

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(

"~/Scripts/jquery.unobtrusive-ajax.js"));

下面是我创建试图重现你的模型: (我把所有这些在Models文件夹下的文件EmployeeViewModels.cs)

using System.Collections.Generic;

namespace ExemplesApplication.Models

{

public class ShiftCode

{

public string Name { get; set; }

}

public class EmployeeLine

{

public ShiftCode ShiftCode { get; set; }

}

public class Employee

{

public int Id { get; set; }

public string Name { get; set; }

public string Type { get; set; }

public List EmployeeLineItems { get; set; }

public Employee()

{

EmployeeLineItems = new List

{

new EmployeeLine {ShiftCode = new ShiftCode {Name = "Morning" }},

new EmployeeLine {ShiftCode = new ShiftCode {Name = "NOON"}},

new EmployeeLine {ShiftCode = new ShiftCode {Name = "Afternoon"}},

new EmployeeLine {ShiftCode = new ShiftCode {Name = "evening"}},

new EmployeeLine {ShiftCode = new ShiftCode {Name = "Night"}}

};

}

}

public class EmployeesViewModel

{

public bool HaveToAddRow { get; set; }

public Dictionary WorkDays

{

get

{

return new Dictionary

{

{"Monday", "1"},

{"Tuesday", "2"},

{"Wednesday", "3"},

{"Thursday", "4"},

{"Friday", "5"}

};

}

}

public List Employees { get; set; }

public EmployeesViewModel()

{

Employees = new List

{

new Employee {Id = 1, Name = "Robert", Type = "Engineer"},

new Employee {Id = 2, Name = "Albert", Type = "Driver"},

new Employee {Id = 3, Name = "Fred", Type = "Manager"},

new Employee {Id = 4, Name = "Thomas", Type = "Sales"},

new Employee {Id = 5, Name = "Sahra", Type = "Engineer"}

};

}

}

}

然后,控制器看起来像这样(EmployeeController.cs):

using ExemplesApplication.Models;

using System.Web.Mvc;

namespace ExemplesApplication.Controllers

{

public partial class EmployeeController : Controller

{

public virtual ActionResult Index()

{

return View(new EmployeesViewModel());

}

public virtual ActionResult EmployeesPost(EmployeesViewModel model)

{

if (model.HaveToAddRow)

{

//add row

model.Employees.Add(new Employee {Id = 1, Name = "New employee", Type = "Engineer"});

return PartialView(MVC.Employee.Views._TableEmployees, model);

}

else

{

// your logic to save

//here

// render the partial view

return PartialView(MVC.Employee.Views._TableEmployees, model);

}

}

}

}

然后创建一个视图和一个局部视图:

视图(/Views/Employee/Index.cshtml)

@model ExemplesApplication.Models.EmployeesViewModel

@{

ViewBag.Title = "Employees";

var ajaxOptions = new AjaxOptions {UpdateTargetId = "employees-table-container", Url = Url.Action(MVC.Employee.EmployeesPost())};

}

Index

@using(Ajax.BeginForm(ajaxOptions))

{

@Html.HiddenFor(m=>m.HaveToAddRow)

@Html.Partial(MVC.Employee.Views._TableEmployees, Model)

}

@section scripts

{

@Scripts.Render("~/bundles/jqueryajax")

$(document).ready(function() {

var $form = $("form"),

$haveToAddRowHidden = $("#HaveToAddRow");

$("#add-row").on("click", function() {

$haveToAddRowHidden.val(true);

$form.submit();

});

$("#save-table").on("click", function() {

$haveToAddRowHidden.val(false);

});

});

}

PartialView(/Views/Employee/_TableEmployees.cshtml)

@model ExemplesApplication.Models.EmployeesViewModel

Employee ID

Employee Name:

Employee Type

@foreach (var workDay in Model.WorkDays)

{

@workDay.Value

@workDay.Key

}

@for (var i = 0; i < Model.Employees.Count(); i++)

{

@Html.DisplayFor(m => @Model.Employees[i].Id)

@Html.HiddenFor(m => @Model.Employees[i].Id)

@Html.DisplayFor(m => @Model.Employees[i].Name)

@Html.HiddenFor(m => @Model.Employees[i].Name)

@Html.DisplayFor(m => @Model.Employees[i].Type)

@Html.HiddenFor(m => @Model.Employees[i].Type)

@for (var j = 0; j < Model.Employees[i].EmployeeLineItems.Count; j++)

{

@Html.EditorFor(m => m.Employees[i].EmployeeLineItems[j].ShiftCode, MVC.Shared.Views.EditorTemplates.ShiftCodePicker)

}

}

最后,我创建的EditorTemplate(Views/Shared/EditorTemplates/ShiftCodePicker.chtml )

@model ExemplesApplication.Models.ShiftCode

@Html.TextBoxFor(m=> m.Name, new { @class = "editor-for-shiftcode" })

html 实现表格控制器,在html动态表格中将数据发布到带有ajax的控制器相关推荐

  1. php输出动态表格,PHP动态生成表格

    好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...

  2. [实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能)

    [实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能) 基于Apache POI对Word进行操作 一.基于Apache POI封装的word文档工具V1. ...

  3. 我的jQuery动态表格插件二

    本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...

  4. JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】

    Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

  5. JS生成动态表格并为每个单元格添加单击事件的方法

    <html><head><title>Demo</title><script>function getColumnDetail(column ...

  6. [vue-element] ElementUI表格组件如何实现动态表头?

    [vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...

  7. django之Layui界面点击弹出个对话框并请求逻辑生成分页的动态表格

    1.首先,界面上有个按钮触发操作: <button type="button" class="layui-btn layui-btn-normal" id ...

  8. DOM JS实现动态表格

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  9. ajax 制作表格带查询参数,查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来...

    function search(){ $.ajax({ type:'Post', url:"FtpAction_listUserQuery", data:{ telephone:$ ...

最新文章

  1. QT的QHashIterator类的使用
  2. SAP Engagement Center的ShellCarousel控件control
  3. java 搭建企业应用框架_java培训一般要学多久
  4. 黑苹果oc和clover哪个好?优势介绍 OpenCore Configurator for Mac中文版v2.16.1.0
  5. 数据结构 5-3-1 二叉树四种顺序遍历递归实现
  6. hdu4000 amp;amp; hrbust1625
  7. Android 的 Recovery 模式分析
  8. 开源阅读书源_开源阅读——(免费)
  9. python加密狗的制作_制作u盘加密狗图文教程
  10. 安装Google play 服务等四件套
  11. 百度离线人脸识别sdk的使用
  12. continous attractor neural networks - 连续吸引子网络(ing)
  13. html点击登陆、注册等时候出现等待图标代码
  14. 恶意代码分析实战_实验练习
  15. php圆形设计图,教程|PHP如何制作圆形用户头像?
  16. 5GC 网元AMF、SMF、UPF、PCF、UDM等介绍
  17. python爬取豆瓣读书简单_Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
  18. 中国肠衣产业调研与投资方向研究报告(2022版)
  19. 【算法】贪婪算法——每步都是最优解
  20. 曾被疑为有血缘关系的明星

热门文章

  1. java代码读写者问题_一整套Java线上故障排查技巧,爱了!
  2. mysql concat 索引_mysql-查看数据库、索引、表大小
  3. mysql8.0日期类型_mysql8.0.19基础数据类型详解
  4. Android 生态消息推送平台介绍
  5. 团体程序设计天梯赛-练习集-L1-046. 整除光棍
  6. oracle load data infile
  7. Android 模拟机键盘不可用的问题 !!
  8. mysql创建存储过程及遍历查询结果,mysql 用存储过程遍历结果集
  9. Happy Birthday to You
  10. nginx安装http2.0协议