附加隐藏的输入字段并将它们绑定到模型

Append Hidden input fields and bind them to the Model

本文关键字：绑定 模型 隐藏 输入 字段      更新时间：2023-09-26

我正在使用第三方文件上传器（Backload）上传图像&JavaScript获取上传的图像名称。我想将图像名称列表绑定到我的MVC模型中。我的要求是在提交表单时动态创建隐藏的输入。我知道，我必须在这里使用带循环的顺序绑定。有人能帮助我如何使用正确的语法来实现这一点吗。它应该类似于这个

for (int i= 0; i< noOfImages; i++)
{
    <input type="hidden" name="Model.Images[i].Name"  value=file.name />
}

（请注意，我不想要Ajax解决方案，请向我展示在我的Razor视图中使用的代码，或者如果有其他更好的解决方案请告诉我）。谢谢。

public class ItemModel
{
    public int ID { get; set; }
    public string Name { get; set; }      
    public virtual ICollection<ImageModel> Images { get; set; }
}
public class ImageModel
{
    public int ID { get; set; }
    public string Name { get; set; }      
    public virtual ItemModel Items { get; set; }
}

我使用以下JavaScript代码来获取上传文件名的值，并在单击#ItemCreate表单的提交按钮时创建隐藏输入。

$('#ImageUplodedtable input[name="ImageName"]').each(function () {
    $('#ItemCreateForm').append('<input  name="ImageName" value="' + this.value + '"/>');

我将在我的问题中添加以下部分。我错过了单引号和两个加号['+I+']，现在一切都很好。

  $('#ImageUplodedtable input[name="ImageName"]').each(function () {
    for (int i= 0; i< noOfImages; i++)
{
    <input type="hidden" name="Images[+'i'+].Name"  value="' + this.value + '" />
}

我不能在这里将.each（）与for循环一起使用。有人能建议一种方法来获取Uploded表中的所有图像名称吗？

您已经在顶部的for循环中完成了这项工作，但一旦进入JavaScript部分，您就会搞砸名称。保持输入的名称与第一个for循环的样式相同，就可以了，即Images[N].Name，其中N是集合中项目的索引。

我最终决定使用这个函数来创建隐藏文件。我希望这能在将来帮助像我这样的新手。

function CretaeHiddenFields(){
var uploadedImages = $('#ImageUplodedtable input[name="ImageName"]') ;
var divArea = $(#CreateInputDiv);
    for (var i = 0; i < uploadedImages .length; i++) {
        var imageName = document.createElement("input");           
        imageName.type = "hidden";
        imageName.name = "Images[" + i + "].Name";
        imageName.value = uploadedImage[i].value; // value of #ImageUplodedtable ImageNameinputs
        formCreteItm.append(imageName);
    }
}
相关文章：