如何在现有成员中编辑图像

Question

我使用bootstrap卡，我希望图片也可以在现有用户上进行编辑，或者我编辑任何成员的图片

这是我的控制器

这是我的编辑功能，我可以在其中编辑我的会员用户图片

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，但现在它们无法保存image

时会出现Edit Edit 时会发生异常。

*编辑页面代码

 <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; }
    }
}

Answer 1

这是我的编辑功能，我可以在其中编辑我的会员，以便我想更新所有现有用户图片？

如果您查看成员列表，它通常包含用户行，以及id。因此，我们必须找到特定的id，然后需要检索该id的值，最后我们将使用新值更新现有值。 下方的屏幕截图上可以看到

如在

算法

1. 从成员列表中单击特定成员ID
2. 查找成员信息，以通过ID
3. 加载编辑页面，该ID与创建成员页面相同
4. 需要更改后，提交编辑页面，其中包含具有ID的成员模型数据的编辑页面，
5. 将图像保存到文件夹中，与创建
6. 搜索成员对象相同，以ID
7. 设置新值，将新值设置为您在步骤6中找到的成员对象，
8. 并将上下文保存并重定向到成员列表

加载编辑页面的控制器操作

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.SaveChangEnsAsync（）而不是添加新数据。这是编辑的关键点。更新我们通过ID

输出