zoukankan      html  css  js  c++  java
  • Asp.Net MVC4通过id更新表单

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

    而不可编辑是通过对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接口自动返回的数据
        }
    })
  • 相关阅读:
    Yii2 框架目录
    实现超链接在本页面的跳转
    操作系统
    shell笔记
    软RAID5制作流程
    nginx学习之简化安装篇(一)
    Javascript中实现继承的方式
    JavaScript中的函数和C#中的匿名函数(委托、lambda表达式)
    JavaScript中变量、执行环境、作用域与C#中的异同
    Javascript与C#对变量的处理方式
  • 原文地址:https://www.cnblogs.com/chenyangsocool/p/7195729.html
Copyright © 2011-2022 走看看