MVC中的数据添加

HTML:

新增学生信息

×

@* ###图片*@

                            @* ###隐藏的文件选择框，用于弹出用户头像选择 accept由于筛选图片*@
                            <!--如果不限制图像的格式，可以写为：accept="image/*"。accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。-->
                            <input type="file" hidden id="studentPictureFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToImg()"/>  


                            <div class="form-row mt-2 ">
                                <label class="col-form-label text-right col-3 ">编号<sup class="text-danger">*</sup>: </label>
                                <input type="text" class="form-control col-9 " name="studentNumber">              
                            </div>
                            <div class="form-row mt-2 ">                                   
                                <label class="col-form-label text-right col-3">姓名<sup class="text-danger">*</sup>: </label>
                                <input type="text" class="form-control col-9" name="studentName">
                            </div>
                            <div class="form-row mt-2 ">
                                <label class="col-form-label text-right col-3">班级 <sup class="text-danger">*</sup>:</label>
                                <select class="form-control col-9" id="Iclass" name="classID" lay-verify="" lay-search>
                                    <option value="0" data-code="">---请选择---</option>
                                    <option value="1" data-code="">IT-1901班</option>
                                    <option value="2" data-code="">IT-1902班</option>
                                    <option value="3" data-code="">IT-1903班</option>
                                    <option value="4" data-code="">IT-1904班</option>
                                    <option value="5" data-code="">IT-1905班</option>                                        
                                </select>
                            </div>        
                            <div class="form-row mt-2 ">                                    
                                <label class="col-form-label text-right col-3">性别<sup class="text-danger">*</sup>: </label>
                                <input type="text" class="form-control col-9" name="studentSex">
                            </div>
                            <div class="form-row mt-2 ">                                  
                                <label class="col-form-label text-right col-3">手机号<sup class="text-danger">*</sup>: </label>
                                <input type="text" class="form-control col-9" name="telephone">
                            </div>
                            <div class="form-row mt-2 ">
                                <label class="col-form-label text-right col-3">身份证号<sup class="text-danger">*</sup>: </label>
                                <input type="text" class="form-control col-9" name="studentIDCard">
                            </div>                                
                        </form>                            
                    </div>
                    <!--操作按钮-->
                    <div class="row text-center mt-3">
                        <div class="col-12">
                            <button type="button" class="btn btn-outline-success mr-3" onclick="updateUser1()">保存</button>
                            <button type="button" class="btn btn-outline-secondary " data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

一个简单的模态窗体就建立好了；

1.0
先在页面中创建模态的窗体；引进JQ和layUI的插件；
对layUI中的layer进行渲染；
var layer；
$(document).ready(function(){
layui.use([‘layer’],function(){
layer=layui.layer;
})
})
2.0
添加一个点击事件弹出模态窗体。
function openImportModal()
{
//重置表单
$(’#formImportStudent [type=“reset”]’).click();
//显示模态框
$("#modImportStudent").modal(‘show’);
}
3.0对页面中输入的数据进行获取
function updateUser1() {
var studentNumber = $("#formInsertStudent input[name=‘studentNumber’]").val();//编号
var studentName = $("#formInsertStudent input[name=‘studentName’]").val();//姓名
var classID = $("#Iclass").val();//班级ID
var className = $("#Iclass").find(“option:selected”).text();//班级名称
var studentSex = $("#formInsertStudent input[name=‘studentSex’]").val();//性别
var telephone = $("#formInsertStudent input[name=‘telephone’]").val();//手机号
var studentIDCard = $("#formInsertStudent input[name=‘studentIDCard’]").val();//身份证号
var userPicture = $("#studentPictureFile").get(0).files[0];//获取用户头像
var layerIndex = layer.load();//文件加载事件
//=使用JQuery Ajax发送FormData数据
//构建FormData数据，添加成一个序列表添加数据到控制器中
var form = new FormData();//将获取到的数据全部都保存在一个实体类中传输回到控制器中去使用
form.append(“studentNumber”, studentNumber);//编号
form.append(“studentName”, studentName);//姓名
form.append(“classID”, classID);//班级ID
form.append(“calssName”, className);//班级名称
form.append(“studentSex”, studentSex);//性别
form.append(“telephone”, telephone);//手机号
form.append(“studentIDCard”, studentIDCard);//身份证号
form.append(“userPicture”, userPicture);//获取用户头像
//=使用JQuery发送FormData数据
var layerIndex = layer.load();//打开加载层
if (telephone != “” ) {
//数据提交到控制器中
$.ajax({
method: “post”,提交数据中只能用post提交，不要问我为什么，因为我也不知道
url: “@Url.Content(”~/Main/UpdateUser")",接受数据的控制器方法
data:form,
contentType: false,
processData: false,
success: function (msg) {
if (msg.State) {
layer.alert(msg.Text, { icon: 1 });
} else {
layer.alert(msg.Text, { icon: 2 });
}
layer.close(layerIndex);
$("#modInsertStudent").modal(“hide”);
tabStudent.reload();//页面刷新方法，当数据传输完成以后，经过这里会自动刷新页面
}
})

        } else {
            layer.alert("用户数据不完整！");
            layer.close(layerIndex);//关闭模态窗体
        }
    }

4.0在控制器中对数据的接受和保存
public ActionResult UpdateUser(S_Student user, HttpPostedFileBase userPicture)//S_User中包含了picture，而userPicture是页面中新选中的图片链接；
//S_Student user;S_Student里面包含了一切
{
ReturnJson msg = new ReturnJson();//创建实体类，用于返回数据。
//===数据验证
if (user.studentNumber!=null&& user.studentName != null && user.studentSex != null && user.telephone != null && user.studentIDCard != null )
{
using (TransactionScope scope = new TransactionScope())
{
try
{
//上传了图片
//==保存新上传的文件
//文件类型
string imgExtension = Path.GetExtension(userPicture.FileName);//图片后缀
//文件名称，Guid.NewGuid()给名字添加128位的自定义字符串
string imgFileName = DateTime.Now.ToUniversalTime().ToString(“yyyyMMddHHmmssffff”) + “_” + Guid.NewGuid() + imgExtension;
//保存文件的路径
string imgFilePath = Server.MapPath("~/Document/studentPicture/") + imgFileName;

                    //保存文件
                    userPicture.SaveAs(imgFilePath);//保存图片在文件夹中。
                                                    //将文件名称设置到用户中
                    user.studentPicture = imgFileName;//把图片名称保存在数据库中。
                                                      //==判断之前是否存在图片，存在就先删除
                    //新增
                    myModel.S_Student.Add(user);
                    if (myModel.SaveChanges() > 0)//判断数据有没有变化
                    {
                        scope.Complete();//事件的提交，不经历这一步，保存的数据一样会给数据库删除
                        msg.State = true;
                        msg.Text = "修改成功";
                    }
                    else
                    {
                        msg.Text = "修改失败";
                    }

                }
                catch (Exception e)
                {
                    Console.WriteLine(e);
                    msg.Text = "数据异常,修改失败";
                }
            }
        }
        else
        {
            msg.Text = "参数异常,修改失败";
        }

        return Json(msg, JsonRequestBehavior.AllowGet);
    }

1. List item