Ajax做添加(删除)包含图片

最新推荐文章于 2022-11-23 14:41:19 发布

L＆wy

最新推荐文章于 2022-11-23 14:41:19 发布

阅读量288

点赞数

分类专栏： Ajax MVC 文章标签： mvc ajax

本文链接：https://blog.csdn.net/weixin_44719554/article/details/106139222

版权

Ajax 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

MVC

4 篇文章 1 订阅

订阅专栏

1.Add视图


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        jQuery(function () {
            $("#btn").click(function () {
                //获取值
                var name = $("#name").val();
                var pwd = $("#pwd").val();
                alert(name);
                //获取文件
                var file = document.getElementById("File").files[0];
                //需要formdata  包
                var fd = new FormData();
                fd.append("uname",name); //""里面的值，要和数据库的字段名称一致
                fd.append("pwd", pwd);
                fd.append("file",file);
                $.ajax({
                    url: '/my/AddInfo',
                    type: 'post',
                    data: fd,
                    //
                    processData: false,
                    contentType: false,
                    success: function (.data) {
                        if (data == "true") {
                            alert("添加成功");
                        } else if (data=="false") {
                            alert("添加失败");
                        }
                    },
                    error: function () {
                        alert("失败");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div>
        姓名：<input type="text" id="name" /> <br />
        年龄：<input type="text" id="pwd" /> <br />
        图片：<input type="file" id="File" /> <br />
        <input type="button" id="btn" />
    </div>
</body>
</html>

Index 视图

{
    Layout = null;
}
@using Ajax做添加包含图片.Models;
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <script>
        //删除方法1
        jQuery(function () {
            $(".btn").click(function () {
                var id = jQuery(this).attr("title");
                $.ajax({
                    url: '/my/Del',
                    type: 'POST',
                    data: { "Id": id },
                    success: function (data) {
                        if (data == "true") {
                            window.location.href = "/my/Index";
                        }
                    },
                    error: function () {
                        alert("未知错误");
                    }
                })
            })
        })
        //删除方法2
        function Del(id) { 
            $.ajax({
                url: '/my/Del',
                type: 'POST',
                data: { "Id": id },
                success: function (data) {
                    if (data == "true") {
                        window.location.href ="/my/Index";
                    }
                },
                error: function () {
                    alert("未知错误");
                }
            })
        }
    </script>
    <div> 
        <table border="1">
            @foreach (var item in ViewBag.use as List<Usera>)
            {
            <tr>
                <td>@item.Id</td>
                <td>@item.uname</td>
                <td>@item.img</td>
                <td><a href="" title="@item.Id" class="btn">删除1</a></td>
                <td><a href="" onclick="Del(@item.Id)">删除2</a></td>
            </tr>
            }
        </table>
    </div>
</body>
</html>

3.控制器

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ajax做添加包含图片.Models;
namespace Ajax做添加包含图片.Controllers
{
    public class myController : Controller
    {
        MVCTwoEntities1 db = new MVCTwoEntities1();
        // GET: my
        public ActionResult Index()
        {
            ViewBag.use = db.Usera.ToList();
            return View();
        }
        public ActionResult Add()
        {
            return View();
        }
        public ActionResult AddInfo(Usera u,HttpPostedFileBase file) 
        {
            if (file != null)
            {
                if (file.ContentLength == 0)
                {
                    //图片大小为空
                }
                else
                {
                    //获取文件夹路径
                    var url = Server.MapPath("~/images");
                    //判断文件夹是否存在
                    if (!Directory.Exists(url))
                    {
                        Directory.CreateDirectory(url);
                    }
                    //存储
                    file.SaveAs(Server.MapPath("~/images/" + file.FileName));
                }
            }
            else
            {
                //图片为空     //如何返回到这个页面一个值，并判断
            }
            Usera ua = new Usera();
            ua.uname = u.uname;
            ua.pwd = u.pwd;
            ua.img = file.FileName;
            db.Usera.Add(ua);
            if (db.SaveChanges()>0)
            {
                return Content("true");
            }
            else
            {
                return Content("false");
            }
        }
        //删除
        public ActionResult Del(Usera u) 
        {
            Usera us = db.Usera.FirstOrDefault(a => a.Id == u.Id);
            db.Usera.Remove(us);
            if (db.SaveChanges()>0)
            {
                return Content("删除成功");
            }
            else
            {
                return Content("删除失败");
            } 
        }
    }
}

L＆wy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax做添加(删除)包含图片

1.Add视图@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Add</title> <script src="~/Scripts/jquery-3.4.1.min.js"></script> &l
复制链接

扫一扫