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

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

这是我项目的视图，与创建相同class

<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.i 添加图片

并保存它会保存 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; }
    }
}

Answer 1

This is my edit Functionality where I can edit My Member so i want i update all existing user picture?

如果您查看会员列表，它通常包含用户行和 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

获得的信息

输出

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

How to Edit Image in Existing Member

asp.net

asp.net-core

asp.net-mvc-4

asp.net-core-mvc