asp.net中ashx后台接口获取Layui前台ajax传送过来的参数

后台代码：

//可以获取任何方式
string photoId = context.Request.Params["photoid"];
 //POST方式传参
string photoId = context.Request.Form["photoid"];
 //GET方式传参
string photoId = context.Request.QueryString["photoid"];

完整后台代码
ApiEditPhoto .ashx文件代码如下

<%@ WebHandler Language="C#" Class="ApiEditPhoto" %>

using System;
using System.Web;
using MyBlog.BLL;
using Newtonsoft.Json.Linq;
using System.IO;
public class ApiEditPhoto : IHttpHandler
{
    AlbumService albumService = new AlbumService();

    public void ProcessRequest(HttpContext context)
    {

        context.Response.ContentType = "application/json";
        string photoId = context.Request.Params["photoid"];
        string photoName = context.Request.Params["photoname"];
        bool flag=albumService.updatePhoto(int.Parse(photoId),photoName);
        JObject jo;
        if(flag==true)
        {
            jo = new JObject(new JProperty("msg", "修改成功"));
        }
        else
        {
            jo = new JObject(new JProperty("msg", "修改失败"));

        }
        context.Response.Write(jo);

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

ApiGetPhoto.ashx文件代码如下

<%@ WebHandler Language="C#" Class="ApiGetPhoto" %>

using System;
using System.Web;
using System.IO;
using System.Data;
using System.Text;
using Newtonsoft.Json;
using MyBlog.BLL;
using MyBlog.DAL;
using System.Collections.Generic;
using Newtonsoft.Json.Linq;
//获得所有photo表的信息
public class ApiGetPhoto : IHttpHandler
{
    AlbumService albumService = new AlbumService();

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string userid = "2";
        List<photo> photoList = albumService.GetAllPhoto(int.Parse(userid));
        string counts = photoList.Count.ToString();
        //重点掌握json对象，注意引入Newtonsoft.Json.Linq和System.Collections.Generic
        //注意layui中table返回数据的json格式如下，如果是自己独有的json格式，需要在
        //table.render中添加parseData字段，详见官方文档
        JObject res = new JObject();
        res.Add(new JProperty("code", 0));
        res.Add(new JProperty("msg", ""));
        res.Add(new JProperty("count", counts));
        JArray photos = new JArray();
        foreach (var item in photoList)
        {
            JObject p = new JObject();
            p.Add(new JProperty("photoId", item.photoId));
            p.Add(new JProperty("photoName", item.photoName));
            p.Add(new JProperty("photoUrl", item.photoUrl));
            p.Add(new JProperty("photoTime", item.photoTime));
            photos.Add(p);
        }
        res.Add(new JProperty("data", photos));
        context.Response.Write(res);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

ApiAddPhoto.ashx文件代码如下

<%@ WebHandler Language="C#" Class="ApiAddPhoto" %>

using System;
using System.Web;
using System.IO;
using System.Data;
using System.Text;
using Newtonsoft.Json;
using MyBlog.BLL;
using Newtonsoft.Json.Linq;
public class ApiAddPhoto : IHttpHandler
{

    AlbumService albumService=new AlbumService();
    public void ProcessRequest(HttpContext context)
    {

        context.Response.ContentType = "application/json";
        string savePath = HttpContext.Current.Server.MapPath("../UploadFiles/");
        if (!System.IO.Directory.Exists(savePath))
        {
            System.IO.Directory.CreateDirectory(savePath);
        }
        HttpFileCollection hfc = context.Request.Files;
        if (hfc.Count > 0)
        {
            HttpPostedFile hpf = context.Request.Files[0];
            if (hpf.ContentLength > 0)
            {
                string fileName = Path.GetFileName(hpf.FileName);
                savePath = savePath + "\\" + fileName;
                hpf.SaveAs(savePath);
                string path = string.Format("UploadFiles/{0}", fileName);
                //法一
                //string json = "{\"fileName\":\"" + path + "\"}";
                //JObject jo = (JObject)JsonConvert.DeserializeObject(json);

                //法二
                JObject jObject=new JObject(new JProperty("fileName",path)) ;
                context.Response.Write(jObject);
                //获取当前时间
                DateTime dateTime = DateTime.Now.ToLocalTime();
                //插入数据库
                albumService.insertPhoto(2, fileName, path, dateTime);

            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

ApiDeletePhoto.ashx文件代码如下

<%@ WebHandler Language="C#" Class="ApiDeletePhoto" %>

using System;
using System.Web;
using MyBlog.BLL;
using Newtonsoft.Json.Linq;
using System.IO;
public class ApiDeletePhoto : IHttpHandler
{
    AlbumService albumService = new AlbumService();

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        
        string photoId = context.Request.Form["photoid"];
        string url = albumService.delPhoto(int.Parse(photoId));
        JObject jo;
        if (url != null)
        {//成功删除图片
            string savePath = HttpContext.Current.Server.MapPath("../" + url);
            File.Delete(savePath);
            jo = new JObject(new JProperty("msg", "删除成功"));
        }
        else
        {
            jo = new JObject(new JProperty("msg", "删除失败"));
        }
        context.Response.Write(jo);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

前台完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyAlbum.aspx.cs" Inherits="MyAlbum" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Contents/css/layui.css" rel="stylesheet" />
</head>
<body>
    <table class="layui-hide" id="photoTable" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="Contents/layui.js"></script>

    <script>
        layui.use(['table', 'jquery'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            table.render({
                elem: '#photoTable'
                , url: '/Comm/ApiGetPhoto.ashx'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板,指向自定义工具栏模板选择器
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'photoId', title: '照片ID', width: 120, fixed: 'left', unresize: true, sort: true }
                    , { field: 'photoName', title: '照片名', width: 120 }
                    , {
                        field: 'photoUrl', title: '照片地址', width: 200, templet: function (res) {
                            return '<em>' + res.photoUrl + '</em>'
                        }
                    }
                    , { field: 'photoTime', title: '上传时间', width: 180 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , page: true
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('此表格是用于照片管理');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            type: "post",
                            async: true,
                            url: "/Comm/ApiDeletePhoto.ashx",
                            data: { photoid: data.photoId },
                            success: function (res) {
                                console.log(res);
                                obj.del();
                                //关闭弹出层
                                layer.close(index);
                            }
                        })

                    });
                } else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2
                        , title: "编辑照片名"
                        , value: data.photoName
                    }, function (value, index) {
                        $.ajax({
                            type: "post",
                            async: true,
                            url: "/Comm/ApiEditPhoto.ashx",
                            data: { photoid: data.photoId, photoname: value },
                            success: function (res) {
                                console.log(res);
                            }
                        })
                        obj.update({
                            photoName: value
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html>

BLL层服务操作类AlbumService.cs代码如下，MyBlogDataContext 为linq to sql类，是由数据库文件直接转换而来

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MyBlog.DAL;

namespace MyBlog.BLL
{
    
    public class AlbumService
    {
        MyBlogDataContext db = new MyBlogDataContext();
        //插入图片
        public void insertPhoto(int _userId,string _photoName,string _photoUrl,DateTime _dateTime)
        {
            photo photoItem = new photo
            {
                userId = _userId,
                photoName = _photoName,
                photoUrl = _photoUrl,
                photoTime=_dateTime
            };
            db.photo.InsertOnSubmit(photoItem);
            db.SubmitChanges();
        }

        public List<photo> GetAllPhoto(int _userId)
        {
            List<photo> photoList = new List<photo>();

            var x=from r in db.photo
                  where r.userId==_userId 
                  select r ;
            photoList = x.ToList();
            return photoList; 
        }

        public string delPhoto(int _photoId)
        {
            var x = from r in db.photo
                    where r.photoId == _photoId
                    select r;
            string pUrl=null;
            foreach (var item in x)
            {
                pUrl = item.photoUrl;
            }
            db.photo.DeleteAllOnSubmit(x);
            db.SubmitChanges();
            return pUrl;//返回被删除图片的url，从而在服务器上对该图片进行删除
        }

        public bool updatePhoto(int _photoId,string _photoName)
        {
            bool flag = false;
            var x = from r in db.photo
                    where r.photoId == _photoId
                    select r;
            if(x!=null)
            {
                foreach (var item in x)
                {
                    item.photoName = _photoName;
                    flag = true;
                }
            }
            db.SubmitChanges();
            return flag;
        }

    }

    
}

效果图如下