html 实现表格控制器,在html动态表格中将数据发布到带有ajax的控制器
我没有模型的细节,但给出了您提供的标记和代码我使用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 Name:
@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的控制器相关推荐
- php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
- [实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能)
[实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能) 基于Apache POI对Word进行操作 一.基于Apache POI封装的word文档工具V1. ...
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
- JS生成动态表格并为每个单元格添加单击事件的方法
<html><head><title>Demo</title><script>function getColumnDetail(column ...
- [vue-element] ElementUI表格组件如何实现动态表头?
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
- django之Layui界面点击弹出个对话框并请求逻辑生成分页的动态表格
1.首先,界面上有个按钮触发操作: <button type="button" class="layui-btn layui-btn-normal" id ...
- DOM JS实现动态表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- ajax 制作表格带查询参数,查询表格——建立动态表格,使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来...
function search(){ $.ajax({ type:'Post', url:"FtpAction_listUserQuery", data:{ telephone:$ ...
最新文章
- QT的QHashIterator类的使用
- SAP Engagement Center的ShellCarousel控件control
- java 搭建企业应用框架_java培训一般要学多久
- 黑苹果oc和clover哪个好?优势介绍 OpenCore Configurator for Mac中文版v2.16.1.0
- 数据结构 5-3-1 二叉树四种顺序遍历递归实现
- hdu4000 amp;amp; hrbust1625
- Android 的 Recovery 模式分析
- 开源阅读书源_开源阅读——(免费)
- python加密狗的制作_制作u盘加密狗图文教程
- 安装Google play 服务等四件套
- 百度离线人脸识别sdk的使用
- continous attractor neural networks - 连续吸引子网络(ing)
- html点击登陆、注册等时候出现等待图标代码
- 恶意代码分析实战_实验练习
- php圆形设计图,教程|PHP如何制作圆形用户头像?
- 5GC 网元AMF、SMF、UPF、PCF、UDM等介绍
- python爬取豆瓣读书简单_Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
- 中国肠衣产业调研与投资方向研究报告(2022版)
- 【算法】贪婪算法——每步都是最优解
- 曾被疑为有血缘关系的明星
热门文章
- java代码读写者问题_一整套Java线上故障排查技巧,爱了!
- mysql concat 索引_mysql-查看数据库、索引、表大小
- mysql8.0日期类型_mysql8.0.19基础数据类型详解
- Android 生态消息推送平台介绍
- 团体程序设计天梯赛-练习集-L1-046. 整除光棍
- oracle load data infile
- Android 模拟机键盘不可用的问题 !!
- mysql创建存储过程及遍历查询结果,mysql 用存储过程遍历结果集
- Happy Birthday to You
- nginx安装http2.0协议