這里下面有兩種 第一種是form表單里面添加了數據，並且含有上傳的圖片，第二種是from表單中不含有圖片 只有普通數據
第一種form表單中包含有圖片的類型：
<form method="post" id="addForm" enctype="multipart/form-data">
<table class="table table-bg">
<tbody>
<tr>
<th class="text-r">Banner圖片：</th>
<td><input type="file" style="width:300px" class="" name="file" multiple datatype="*2-120" nullmsg="Banner圖片不能為空"></td>
</tr>
<tr>
<th class="text-r">跳轉地址：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="url" name="url"></td>
</tr>
<tr>
<th class="text-r">備注：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="remark" name="remark"></td>
</tr>
<tr>
<th></th>
<td><button class="btn btn-success radius" type="button" onclick="addBanner()"><i class="icon-ok"></i> 確定</button></td>
</tr>
</tbody>
</table>
</form>
如上可以看到 這里有一個form表單 enctype="multipart/form-data" 是用來表示表單可以上傳文件/圖片類型 這里最后是將所有的數據一起發送到服務器的
我的ajax是這么寫的
function addBanner() {
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
url: '/Admin/Banner/AddBanner',
data: formData,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}
這里就整個將form表單的數據拿到並且發送到后台 下面是后台接收數據的寫法
public async Task<JsonResult> AddBanner(AddBanner banner, IFormCollection collection)
{
var files = collection.Files;
if (files.Count > 0)
{
string absolutePath = "wwwroot/BannerPic/";
string[] fileTypes = { ".gif", ".jpg", ".jpeg", ".png", ".bmp" };
string extension = Path.GetExtension(files[0].FileName);
if (fileTypes.Contains(extension.ToLower()))
{
if (!Directory.Exists(absolutePath))
{
Directory.CreateDirectory(absolutePath);
}
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + extension;
var filePath = Path.GetFullPath(absolutePath + "\\" + fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await files[0].CopyToAsync(stream);
}
banner.Image = "/BannerPic/" + fileName;
//https://localhost:44395/BannerPic/20200203232630.jpg
return Json(_bannerService.AddBanner(banner));
}
else
{
return Json(new ResPonseModel { code = 0, result = "上傳圖片格式不正確" });
}
}
else
{
return Json(new ResPonseModel { code = 0, result = "請上傳圖片文件" });
}
}
這里的寫法中 AddBanner banner, IFormCollection collection
AddBanner是要映射的模型 .net是可以自動映射 IFormCollection 是接收的圖片/文件
第二種 簡單的form表單 只有普通數據
如下是html表單
<form method="post" id="addForm">
<table class="table table-bg">
<tbody>
<tr>
<th class="text-r">類別名稱：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Name" name="Name" datatype="*2-120" nullmsg="類別名稱不能為空"></td>
</tr>
<tr>
<th class="text-r">排序：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Sort" name="Sort"></td>
</tr>
<tr>
<th class="text-r">備注：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Remark" name="Remark"></td>
</tr>
<tr>
<th></th>
<td><button class="btn btn-success radius" type="submit" onclick="add()"><i class="icon-ok"></i> 確定</button></td>
</tr>
</tbody>
</table>
</form>
接下來是js的寫法 如何發送數據到服務器
function add() {
var data = $("#addForm").serialize();
//alert(data);
$.ajax({
type: 'post',
async: false,
url: '/Admin/News/Addclassify',
data: data,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}
重點就在於這里只有form表單中的name屬性和后台model類型的屬性一一對應 那么.net就可以實現在動映射
這里是直接拿到表單數據 然后直接序列化 傳入后台就ok
服務器端的寫法：
[HttpPost]
public JsonResult Addclassify(AddNewsClassify addNewsClassify)
{
if (string.IsNullOrEmpty(addNewsClassify.Name))
{
return Json(new ResPonseModel { code = 0, result = "請輸入新聞類別名稱" });
}
return Json(_newsService.AddNewsClassify(addNewsClassify));
}
做這個記錄主要是因為自己以前一直很傻很傻的form表單只知道用jquery的方法一個一個的去獲取數據 所以寫下來