从多个表单中挑出嵌入到表单中的图像的id以显示回控制器

Question

我正在建立一个个人资料页面，我必须显示用户的个人资料图片以及他/她以前选择的其他3张图片。现在我传入一个ProfileViewModels"视图模型，它包含另外两个视图模型:其中一个是视图模型的列表。

我的图像都显示正确。每个图像都包含在一个引导卡类中，其中包含两个按钮;删除和更新卡中的每个图像。现在，我用一个表单标签包围每个按钮，并嵌入一个包含每个图像id的隐藏字段，以便当用户单击包含图像的特定卡片的"删除"或"更新"时，它将所选图像的id传递回删除所需的控制器。

然而，在运行我的代码，每当我点击"删除"或"更新"我得到空值在我的控制器，因此，我不能删除也不能更新我的图片。下面是我的视图模型，cshtml视图页面和控制器。

注入VIEWPAGE:

public class ProfileViewModels
{
public List<PicturesViewModel> Pictures { get; set; }
public ProfilePicViewModel ProfilePic { get; set; }
}

public class ProfilePicViewModel
{
public string PictureId { get; set; }
public string PictureAddress { get; set; }
[Required]
public IFormFile Picture { get; set; }
}

public class PicturesViewModel
{
public string PictureId { get; set; }
public string Picture { get; set; }
public IFormFile PictureForm { get; set; }
[Required]
[MaxLength(140, ErrorMessage = "picture description should not be more than 140 characters")]
public string Description { get; set; }
}

@model ProfileViewModels
@{
var imgAddresses = new List<string>();
var imgIds = new List<string>();
}
@{ var path = "~/images/" + Model.ProfilePic.PictureAddress; }
@foreach (var pic in Model.Pictures)
{
imgAddresses.Add(pic.Picture);
imgIds.Add(pic.PictureId);
}
<div class="row mt-5">
<div class="col-sm-3 mb-5">
<img asp-append-version="true" src=@(path) alt="User Profile pic" class="rounded-circle" width="150" height="150" />
</div>
<!---other codes --->
<div class="col-sm-9">
<div class="card">
<div class="card-body m-0">
@for (int i = 0; i < Model.Pictures.Count; i++)
{
<div class="card d-inline-block mr-1 mb-3" style="width: 31%;">
<img src="~/images/@(imgAddresses[i])" alt="user_pictures" class="card-img-top" width="200" height="150" />
<div class="card-body">
<p class="card-text">@Model.Pictures[i].Description</p>
@using (HtmlHelperFormExtensions.BeginForm(Html, "DeletePicture", "User", FormMethod.Post, imgIds[i]))
{
<div asp-validation-summary="All"></div>
<input type="text" hidden value="@Model.Pictures[i].PictureId" />
<input type="text" hidden value="@(imgIds[i])" />
<button type="submit" class="card-link btn btn-outline-danger">Delete</button>
}
@using (HtmlHelperFormExtensions.BeginForm(Html, "AddPicture", "User", FormMethod.Post, imgIds[i]))
{
<div asp-validation-summary="All"></div>
<input type="text" hidden value="@Model.Pictures[i].PictureId" />
<input type="text" hidden value="@(imgIds[i])" />
<button type="submit" class="card-link btn btn-outline-success">Update</button>
}
</div>
</div>
}
}

控制器:

[HttpPost]
public async Task<IActionResult> AddPicture(ProfileViewModels model)
{
//code block for performing action
RedirectToAction("Profile");
}
[HttpPost]
public async Task<IActionResult> DeletePicture(ProfileViewModels model)
{
//code block for performing action
RedirectToAction("Profile");
}

我做错了什么?

Answer 1

<input type="text" hidden value="@Model.Pictures[i].PictureId" />

请注意，如果省略输入字段的name属性，则根本不会发送<form>内的输入字段的值。

imgIds.Add(pic.PictureId);

在你的代码中，我们可以发现你用你通过视图模型传递的PictureId(s)填充List<string> imgIds，所以<input type="text" hidden value="@(imgIds[i])" />可能与<input type="text" hidden value="@Model.Pictures[i].PictureId" />相同。

当用户点击'删除'或'更新'包含图像的特定卡时，它将所选图像的id传递给删除所需的控制器。

要将所选图像的id传递给控制器以进行删除，您可以尝试如下修改代码:

指定name="SelectedPictureId"为隐藏字段

@using (HtmlHelperFormExtensions.BeginForm(Html, "DeletePicture", "User", FormMethod.Post, imgIds[i]))
{
<div asp-validation-summary="All"></div>
<input type="hidden" name="SelectedPictureId" value="@Model.Pictures[i].PictureId" />
<button type="submit" class="card-link btn btn-outline-danger">Delete</button>
}

DeletePicture操作方法

[HttpPost]
public async Task<IActionResult> DeletePicture(string SelectedPictureId)
{
//code block for performing action
return RedirectToAction("Profile");
}

此外，本文还解释了模型绑定是什么以及它是如何工作的，您可以参考它以获得详细信息。

https://learn.microsoft.com/en - us/aspnet/core/mvc/models/model binding?view=aspnetcore - 5.0