用户需求是:一个表单一旦创建完,其中大部分的字段便不可再编辑。只能编辑其中部分字段。

而不可编辑是通过对input输入框设置disabled属性实现的,那么这时候直接向数据库中submit表单中的内容就会报错,因为有些不能为null的字段由于disabled属性根本无法在前端被获取而后更新至数据库。

有下面两种思路:

1.通过创建隐藏表单,为每一个disabled控件分别创建一个隐藏控件,但是这样的问题是工作量太大(如果表单有一千个属性,你懂的)

2.通过获取该表单在数据库中的id,把该id和可以编辑的字段传递到后台。首先通过id将对象及其属性数据从数据库中搜索出来,然后将可以编辑的字段赋值给该对象。处理完毕后,再将该对象的数据更新至数据库。

综上所述,用第二种思路能显得更加睿智。

下面是具体的操作步骤:(具体步骤就不用细看了,这是我从项目中抽出来的,只适合我自己回顾)

1.在OutsourcingModule.cs中创建路由,以此创建一个访问路径:

routes.MapRoute(
"OutSourcingWorkSheet",//路由名
"outsourcing/saveWorkSheet",//url路径
new {controller = "Outsourcing", action = "SaveWorkSheet"}//映射的控制器以及对应的Action方法名
);

2.

/// <summary>
/// 保存工作票
/// ModelBinder会将前端传递过来的id在数据库中搜索出字段并且转换为outsourcing对象
/// 此时的outsourcing对象中的workSheets属性不是前端传递过来的值,而是数据库中的
///
/// 方法中有两个参数,outsourcing上面已经解释,workSheets是前端传递过来的第二个参数
/// </summary>
/// <param name="outsourcing"></param>
/// <param name="workSheets"></param>
/// <returns></returns>
[HttpPost]
[ActionName("SaveWorkSheet")]
[AccessRestriction("SaveWorkSheet")]
public JsonResult SaveWorkSheet(Outsourcing outsourcing,string workSheets)
{
if (outsourcing!=null)
{
outsourcing.WorkSheets = workSheets;
_outsourcingService.Save(outsourcing);
return Json(new ABResponse(HttpStatusCode.OK));
}
return Json(new ABResponse(HttpStatusCode.BadRequest));
}//AB为内部项目

3.前端js脚本代码

$('#btn_saveWorkSheet').on('click', function () {
if ($("input[name=workSheets]").val() == "") {
bootbox.alert("不能为空");
} else {
$.ajax({
type: "post",
url: "/outsourcing/saveWorkSheet",
data: {
ID: $("#outsourcing_id").val(),
WorkSheets: $("input[name=workSheets]").val()
},
dataType: "json",
success: function (data) {
if (data.Code == 200) {
bootbox.alert("修改成功,即将刷新");
setTimeout(function () {
location.reload();
}, 1000);
} else {
bootbox.alert("提交失败,请稍后再试");
}
}
});
}
});

其实思路很简单,但是我特么做了大半天- -;其中还遇到了一个大坑:

在第二段代码的参数列表中,我一开始把string workSheets写成了WorkSheets。这时文字下出现了蓝色的波浪线,Alt+Enter后系统提示Rename to workSheets,我便直接回车确定了。然后,WorkSheets字段便再也无法保存,也不能从数据库中读取。在同事帮忙找了N久之后发现,原来是当时大写改小写的过程中同时将dbml文件中的字段也改成了小写导致了无法和数据库匹配。

做这个功能的时候顺便学到的一点知识:

如果一个input的id为apple,那么可以这么获取,这是我本来就知道的:

var apple = $("#apple").val();

如果一个input的name为apple,那么可以这么获取,这是我刚知道的:

var apple = $("input[name=apple]").val();

还有一个刚知道的,如果从很多input中去除某个name:

$("#fruit").find("input:not(input[name=apple]),textarea,select").attr("disabled", true);
//从id为fruit的父元素里面寻找所有的input、textarea和select控件以及其值,但是除去name为apple的控件

另外总结下ajax的方式,很久不用都快忘了:

$.ajax({
type:"post",//可以选择post或者method
url:"",//url接口
data:{
//参数列表
},
success:function(data){
//如果访问url成功,data就是该url接口自动返回的数据
}
})

Asp.Net MVC4通过id更新表单的更多相关文章

  1. ASP.NET MVC5 学习系列之表单和HTML辅助方法

    一.表单 (一)Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form ...

  2. 【ASP.NET MVC】Ajax提交表单

    下面这段代码主要有几个特点: 1.Ajax提交表单 2.表单中有一个<input type="file"/> 3.当选择完图片后,利用AJAX提交表单,并在执行成功后返 ...

  3. ASP .NET Core 建立列表和表单View

    前几篇文章对控制器Controller以及布局页_Layout相关的代码与作用介绍了一下.接下来就是建立控制器对应的列表和对应的表单. 建立Department文件夹,在文件夹下面建立普通的Index ...

  4. asp.net 微信企业号办公系统-表单及流程设计配置实例

    在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...

  5. Asp.net Mvc Ajax.BeginForm提交表单

    之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...

  6. ASP.NET MVC 4 (十三) 基于表单的身份验证

    在前面的章节中我们知道可以在MVC应用程序中使用[Authorize]特性来限制用户对某些网址(控制器/控制器方法)的访问,但这都是在对用户认证之后,而用户的认证则依然是使用ASP.NET平台的认证机 ...

  7. ASP.NET webform多次提交表单问题

    最近几天遇到一个头疼的问题,项目采用的是webform开发,每个界面都有个提交按钮,点击多次提交按钮导致提交按钮的OnClick事件执行了多次, 每次OnClick里面都有一些逻辑处理,执行了多次导致 ...

  8. (ASP.NET)总结MVC中@Html表单用法

    1.当type类型是text时:@Html.TextBoxFor(model => Model.Name,new{@style = "width: 50px;", @clas ...

  9. ASP。NET Web表单模型,部分呈现和事件

    下载EventExample.zip - 41.33 KB 下载EventandAjaxExample.zip - 41.94 KB 介绍 通过参考ASP获得Web应用程序环境及其约束的概述.NET ...

随机推荐

  1. 不得不说fdm真的好用

    记忆力太差系列 挺好用的软件 下载器FDM真的很好用

  2. 包(package)

    一个文件夹管理多个模块文件,这个文件夹就被称为包,如下: 既然是多个模块文件,那么涉及多个模块怎么导入呢? ***当前路径下包之间模块导入: import wsg ***不同路径下包之间模块导入: f ...

  3. c++实验3 链式存储线性表

    1.线性表链式存储结构及基本操作算法实现 (1)单链表存储结构类的定义: #include <iostream> using namespace std; template <cla ...

  4. “全栈2019”Java第九章:解释第一个程序

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. [Swift]扩展String类:extension String

    请参考本博客另一篇技术博文: <[Swift]字符串(String类.NSString类)常用操作> extension String { //获取字符串首字符 var first: St ...

  6. Python的编码详解

    一. 编码介绍 计算机只能处理数字(最底层的0和1),如果要处理文本,就必须将文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以一个字节能表示的最大整数就 ...

  7. Intellij IDEA 封装Jar包(提示错误: 找不到或无法加载主类)

    封装的过程如下: 然后准备打包 选择Build或者ReBuild即可. 但这样就会引起开始第一个图的问题.提示无法加载主类,另外一个情况就是所有的外部第三方jar包都被封装到一个jar包里面了. 那么 ...

  8. Python多继承解析顺序的C3线性算法流程解析

    Python多继承MRO 在Python2.1中,采用了经典类,使用深度优先算法解析. Python2.2中,引入了新式类,使用深度优先算法和广度优先算法. 在Python2.3以后的版本中,经典类和 ...

  9. 断电后gitlab报500错误启动出错

    异常断电后,gitlab报500错误,重启无效 通过sudo gitlab-ctl reconfigure启动时, 提示 [execute] pgsql:could not connect to se ...

  10. ONTAK2010 Peaks加强版(离线&在线)

    题面 弱化版:luogu 强制在线版:bzoj 题解 本题有两种解法 离线算法:线段树合并 先看一道简单题[USACO18JAN]MooTube 本题就是在此基础上求第\(k\)高的点 首先把询问和路 ...