我使用引導卡，我希望圖片也可以在現有用戶上編輯，或者我編輯任何成員的圖片
這是我的控制器
這是我的編輯功能，我可以編輯我的會員，所以我想更新所有現有的用戶圖片
public async Task<IActionResult> Edit(int? id)
{
if (id == null)
{
return NotFound();
}
var member = await _context.Member.FindAsync(id);
if (member == null)
{
return NotFound();
}
return View(member);
}
// POST: HomePage/Edit/5
// To protect from overposting attacks, enable the specific properties you want to bind to.
// For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit(int id, [Bind("MemberId,Name,Gender,DOB,MaritalStatus,Address,PhoneNo,Skills,Hobbies,JobTitle,Technology")] Member member)
{
if (id != member.MemberId)
{
return NotFound();
}
if (ModelState.IsValid)
{
try
{
_context.Update(member);
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!MemberExists(member.MemberId))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToAction(nameof(Index));
}
return View(member);
}
這是我的專案的視圖，與創建類相同
<div class="row">
<div class="form-group col-md-4">
<label class="col-md-2 control-label">MemberImage</label>
<div class="col-md-10">
<div id="chooseFile">
<input class="form-control" type="file" name="photo" accept="image/*" />
</div>
</div>
</div>
</div>
當我編輯一個現有成員時
2.我添加影像
并保存它將保存img，但現在他們無法保存影像
打開編輯時發生例外
*編輯頁面代碼
<div class="row">
<div class="form-group col-md-4">
<label class="col-md-2 control-label">MemberPicture</label>
<div class="col-md-10">
<img src="~/ImageName/Cover/@Model.Member.ImageName"
class="rounded-square"
height="50" width="75"
style="border:1px"
asp-append-version="true" accept="image/*" />
<span><a href="@Model.Member.ImageName">@Model.Member.ImageName</a></span>
<div id="chooseFile">
<input class="form-control" type="file" name="photo" accept="image/*" />
</div>
</div>
</div>
</div>
查看模型
using System;
using TeamManagement.Models;
namespace TeamManagement.ViewModel
{
public class MemberViewModel
{
public Member Member { get; set; }
public IFormFile? Photo { get; set; }
}
}
uj5u.com熱心網友回復：
這是我的編輯功能，我可以在其中編輯我的會員，以便我更新所有現有的用戶圖片？
如果您查看成員串列，它通常包含用戶行以及Id. 所以我們必須找到特定的 Id，然后需要檢索它的值，Id最后我們將用新值更新現有值。如下面的螢屏截圖所示
演算法
- 從成員串列中單擊特定的成員 ID
- 通過該 ID 查找會員資訊
- 使用與創建成員頁面相同的 ID 加載編輯頁面
- 需要更改后提交包含帶有 ID 的成員模型資料的編輯頁面
- 首先將影像保存到與創建相同的檔案夾中
- 按 ID 搜索成員物件
- 在步驟 6 中找到的成員物件中設定新值
- 保存背景關系并重定向到成員串列
加載編輯頁面的控制器操作
public async Task<IActionResult> EditMember(int memberId)
{
var memeber = await _context.Members.FindAsync(memberId); // Getting member by Id from database
return View(new MemberViewModel() { Member = memeber });
}
查看模型
public class MemberViewModel
{
public Member Member { get; set; }
public IFormFile? Photo { get; set; }
}
查看編輯
@model DotNet6MVCWebApp.Models.MemberViewModel
<div>
<form asp-action="EditMember" method="post" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly"></div><input type="hidden" asp-for="Member.MemberId" />
<div>
<h4><strong>Member Details</strong> </h4>
<table class="table table-sm table-bordered table-striped">
<tr>
<th> <label asp-for="Member.Name"></label></th>
<td> <input asp-for="Member.Name" class="form-control" placeholder="Enter member name" /><span asp-validation-for="Member.Name"></span></td>
</tr>
<tr>
<th> <label asp-for="Member.Gender"></label></th>
<td>
<select asp-for="Member.Gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<span asp-validation-for="Member.Gender"></span>
</td>
</tr>
<tr>
<th> <label asp-for="Member.DOB"></label></th>
<td> <input asp-for="Member.DOB" class="form-control" placeholder="Enter animal category" /><span asp-validation-for="Member.DOB"></span></td>
</tr>
<tr>
<th> <label asp-for="Photo"></label></th>
<td>
<img src="~/ImageName/Cover/@Model.Member.ImageName"
class="rounded-square"
height="50" width="75"
style="border:1px"
asp-append-version="true" accept="image/*" />
<span><a href="@Model.Member.ImageName">@Model.Member.ImageName</a></span>
<div id="chooseFile"><input type="file" name="photo" accept="image/*" /></div>
</td>
</tr>
<tr>
<th> <button type="submit" class="btn btn-primary" style="width:107px">Update</button></th>
<td> </td>
</tr>
<tr>
<th>@Html.ActionLink("Back To List", "MemberList", new { /* id=item.PrimaryKey */ }, new { @class = "btn btn-success" })</th>
<td> </td>
</tr>
</table>
</div>
</form>
</div>
在這里確保您src="~/ImageName/Cover/@Model.Member.ImageName"根據您的圖片位置是正確的。否則圖片不會顯示
提交編輯時的控制器
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> EditMember(MemberViewModel model, IFormFile photo)
{
if (photo == null || photo.Length == 0)
{
return Content("File not selected");
}
//Save The Picture In folder
var path = Path.Combine(_environment.WebRootPath, "ImageName/Cover", photo.FileName);
using (FileStream stream = new FileStream(path, FileMode.Create))
{
await photo.CopyToAsync(stream);
stream.Close();
}
//Bind Picture info to model
model.Member.ImageName = photo.FileName;
//Finding the member by its Id which we would update
var objMember = _context.Members.Where(mId => mId.MemberId == model.Member.MemberId).FirstOrDefault();
if (objMember != null)
{
//Update the existing member with new value
objMember!.Name = model.Member.Name;
objMember!.Gender = model.Member.Gender;
objMember!.DOB = model.Member.DOB;
objMember!.ImageName = model.Member.ImageName;
objMember!.ImageLocation = path;
await _context.SaveChangesAsync();
}
return RedirectToAction("MemberList");
}
在這里，我們將更新_context.SaveChangesAsync()而不是添加新資料。這是編輯的關鍵點。更新我們得到的資訊ID
輸出
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/490230.html
標籤：网 asp.net 核心 asp.net-mvc-4 asp.net-core-mvc