Asp.net WebApi 传递json数据以及上传文件

最新推荐文章于 2022-12-20 11:45:54 发布

huiguoyuan

最新推荐文章于 2022-12-20 11:45:54 发布

阅读量1.2k

点赞数

分类专栏： C#.net Web Api

原文链接：https://blog.csdn.net/wf824284257/article/details/83421178

版权

C#.net 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

Web Api

3 篇文章 0 订阅

订阅专栏

前言

3个月前接手的 java web 项目前几天交付验收成功了，作为该项目开发组的负责人，在苦苦加班2个多月后得到公司及客户的肯定，心里那个叫高兴啊。

所做的 java web 的整体架构非常简单易懂，整个网站以前端为主体，通过ajax与后台数据交互，前后端低耦合，有些面向服务架构的味道。因为博主C#做的比较多，所以也借机用相同的方式玩一玩asp.net。

这篇博客主要总结了 Asp.net WebApi 项目的前后端互传json以及上传文件的方法。

主要思路

在面向服务的架构模式中，整个网站前后端耦合度低，将前端作为主体，通过ajax与后台交换json数据。

上传文件通过input[type=‘file’]来获取file，并通过FormData传给后台。

开始

新建空web项目，添加 Web Api 引用
在这里插入图片描述

修改路由规则。打开/Appstart/WebApiConfig.cs，添加{action}段

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

   
   
   
   1
2
3
4
5

添加Controller。在Controllers文件夹里新建一个空的ApiController,取名为 UserController
在这里插入图片描述

修改UserController.cs代码为如下代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace CommonAction.Controllers
{
public class UserController : ApiController
{

    public JObject Func1([FromBody]JObject postJson)
    {
        postJson.Add("success", true);
        return postJson;
    }

}

}

编写前端代码。右击项目名->添加->Html页，并将新建的html页面的代码替换为下面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        name:<input type="text" id="name"><br />
        age:<input type="text" id="age"><br />
        <input type="button" value="submit" id="btn" οnclick="f1()" />
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function f1() {
            var postData = {
                name: $("#name").val(),
                age: $("#age").val()
            };
            $.post("api/User/Func1", postData, function (resp) {
                console.log(resp);
            });
        }
    </script>
</body>
</html>

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

将HtmlPage1设置为起始页面，F5键运行。待网页加载完毕后，按f12打开浏览器console，填写name以及age，点击submit按钮。可以看到浏览器console中的返回信息。

在这里插入图片描述

可以看出，代码运行的很成功。

网站的所有数据交换，都可以通过这样的方式进行：前端构造json数据，post到后台，后台接收后处理计算，并构造json返回。

但还有一种情况是需要进行文件交互。下载文件比较简单，这里只说一下上传。

文件上传

首先在html页面增加input[type=‘file’];

pic:<input type="file" id="pic">

 
 
 
 1

html的button事件更换

<input type="button" id="submit" value="submit" οnclick="f2()">

增加后台代码

    public JObject Func2()
    {
        JObject returnJson = new JObject();
        var request = System.Web.HttpContext.Current.Request;
        var formData = request.Form;
        string name = formData["name"];
        string age = formData["age"];
        if (request.Files.Count > 0)
        {
            var file = request.Files[0];
            var savePath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "uploadImgs/";
            if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
            file.SaveAs(savePath + file.FileName);
        }
        returnJson.Add("name", name);
        returnJson.Add("age", age);
        returnJson.Add("success", true);
        return returnJson;
    }

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行效果如图

在这里插入图片描述

打开项目文件夹，可以看到图片被成功保存。

在这里插入图片描述

总结

通过这两种ajax，即可完成前后端几乎所有的数据交换工作。使用这种架构，可以很好的分离前后端的工作，代码结构更清晰，写出来漂亮，写的也舒服。

若有不足请不吝赐教，感谢。

                                </div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wf824284257/article/details/83421178&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                <div data-report-view="{&quot;mod&quot;:&quot;popu_387&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/wf824284257/article/details/83421178&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"></div>
                    
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/wf824284257">
                <img src="https://profile.csdnimg.cn/0/F/6/3_wf824284257" class="avatar_pic" username="wf824284257">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/wf824284257" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">Fanstorm丶</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog6.png">                                            </div>
                <div class="text"><span>原创文章 151</span><span>获赞 119</span><span>访问量 35万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息未关注&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=wf824284257" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>