Question

我正在遇到.net和MVC的问题。我正在尝试选择正确在网页上呈现的一组图像，通过复选框选择一些图像，然后删除这些图像。但是，控制器为空，没有数据，因此我无法对其进行任何操作。有人能引导我朝正确的方向前进吗？

EditImages.cshtml

@model Images

@{
ViewBag.Title = "EditImages";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section CSS
{
<style>
    .Image {
        position: relative;
        float: left;
        margin-left: 10px;
        border-color: white;
        border-style: solid;
        border-spacing: 100px;
        margin-top: 10px;
        color: red;
    }

    .checkbox {
        position: relative;
    }
</style>
}
<h2>EditImages</h2>

@using (Html.BeginForm("DeleteImages", "Image", FormMethod.Post))
{
for (var i = 0; i < Model.ImageList.Count(); i++)
{
    var modellist = Model.ImageList.ToList();
    <div class="Image">            
        <p class="Image.Font">@Html.DisplayFor(m =>     modellist[i].FileName</p>
        <p>@Html.DisplayFor(m => modellist[i].FullImage.Width) x @Html.DisplayFor(m => modellist[i].FullImage.Height)</p>

        <img src="data:image/jpg;base64,@(Html.Raw(Convert.ToBase64String( modellist[i].ByteArray)))" height="225" width="400" />          
        <p>@Html.CheckBoxFor(m => modellist[i].isSelected, new {  id = modellist[i].id  })</p>
        <label>@modellist[i].id</label>            
    </div>
}

<p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>
}

Controller - ImageController

    [HttpPost]
    public ActionResult DeleteImages(Images model)
    {
        //var temp = new Lobby_Monitor.Models.Images();
        //temp = model;

        string a = "";

        return View();
    }

模特 - 图片

 public class Images
{
    public int id { get; set; }
    public string FileName { get; set; }
    public string Extension { get; set; }

    public byte[] ByteArray { get; set; }

    public string UserId { get; set; }

    public string UserName { get; set; }

    public HttpPostedFileBase postedFile { get; set; }

    public string stream_id { get; set; }

    public Image FullImage { get; set; }

    public IEnumerable<DBImages> ImageList { get; set; }

    public Boolean isSelected { get; set; }

}

我已经通过Fiddler来看看发布了什么。有数据发布。我相信通过这个测试，我点击了前两张图片。

Name                      Value
modellist[0].isSelected    true
modellist[0].isSelected    false
modellist[1].isSelected    true
modellist[1].isSelected    false
modellist[2].isSelected    false
modellist[3].isSelected    false
modellist[4].isSelected    false

生成的HTML示例

    <div class="Image">            
        <p class="Image.Font">Capture.PNG</p>
        <p>1667 x 866</p>

        <img src="image stuff" height="225" width="400" />


        <p><input data-val="true" data-val-required="The isSelected field is required." id="2" name="modellist[1].isSelected" type="checkbox" value="true" /><input name="modellist[1].isSelected" type="hidden" value="false" /></p>
        <label>2</label>
        <p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>
    </div>
    <div class="Image">            
        <p class="Image.Font">tunein.png</p>
        <p>703 x 753</p>

        <img src="image stuff" height="225" width="400" />


        <p><input data-val="true" data-val-required="The isSelected field is required." id="3" name="modellist[2].isSelected" type="checkbox" value="true" /><input name="modellist[2].isSelected" type="hidden" value="false" /></p>
        <label>3</label>
        <p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>
    </div>
    <div class="Image">            
        <p class="Image.Font">Qatar-Museum-1920x1080.jpg</p>
        <p>1920 x 1080</p>

        <img src="" height="225" width="400" />


        <p><input data-val="true" data-val-required="The isSelected field is required." id="4" name="modellist[3].isSelected" type="checkbox" value="true" /><input name="modellist[3].isSelected" type="hidden" value="false" /></p>
        <label>4</label>
        <p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>
    </div>
    <div class="Image">            
        <p class="Image.Font">Brooklyn-College-1920x1080.jpg</p>
        <p>1920 x 1080</p>

        <img src="image info" height="225" width="400" />


        <p><input data-val="true" data-val-required="The isSelected field is required." id="5" name="modellist[4].isSelected" type="checkbox" value="true" /><input name="modellist[4].isSelected" type="hidden" value="false" /></p>
        <label>5</label>
        <p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>
    </div>
<p><input type="submit" id="delete" title="Delete1" value="Delete Images" /></p>

Answer 1

从循环中删除var modellist = Model.ImageList.ToList();并将其更改为（为简单起见，删除了额外的html）

for (var i = 0; i < Model.ImageList.Count; i++)
{
    @Html.DisplayFor(m => m.ImageList[i].FileName
    @Html.DisplayFor(m => m.ImageList[i].FullImage.Width) x @Html.DisplayFor(m => m.ImageList[i].FullImage.Height)
    <img src="data:image/jpg;base64,@(Html.Raw(Convert.ToBase64String( Model.ImageList[i].ByteArray)))" height="225" width="400" />        
    @Html.CheckBoxFor(m => m.ImageList[i].isSelected)
    @Html.LabelFor(m => m.ImageList[i].isSelected, Model.ImageList[i].id)
    // Add inputs for oher properties of the model that you want to be submitted
    @Html.HiddenFor(m => m.ImageList[i].FileName)
}

将生成与您的模型相关的正确name属性（例如name="ImageList[0].isSelected"，name="ImageList[1].isSelected"等）

最后，您需要将属性更改为public IList<DBImages> ImageList { get; set; }（不是IEnumerable<DBImages>）。如果无法更改媒体资源，那么您需要为EditorTemplate类型设置自定义DBImages。

MVC选中的复选框在回发时为null

1 个答案: