Question

编辑14:19 UTC 2017年5月10日星期三

生成的HTML已根据要求添加到帖子的底部。我还用我的更改更新了视图。

我正在尝试创建一个允许用户对我的数据库中的模型进行排序（更改索引）的视图。排序是通过JavaScript中的拖放完成的，模型的Index会根据需要进行更新。我的问题是，在发布表单时，我的模型的IList为空。

模型

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity;
using System.Web;

namespace WebApplication2.Models
{
    public class Slide
    {
        public static int CurrentIndex = 0;

        [Key]
        [Column(Order = 0)]
        public int Id
        {
            get;
            set;
        }

        [Index(IsUnique = true)]
        public int Index
        {
            get;
            set;
        }

        public string Section
        {
            get;
            set;
        }

        public string Title
        {
            get;
            set;
        }

        public string Content
        {
            get;
            set;
        }

        [Display(Name = "Image")]
        public byte[] ImageData
        {
            get;
            set;
        }

        [Display(Name = "Image Description")]
        public string ImageDescription
        {
            get;
            set;
        }

        [NotMapped]
        public HttpPostedFileBase UploadedImage
        {
            get;
            set;
        }
    }

    public class SlideDbContext : DbContext
    {
        public DbSet<Slide> Slides
        {
            get;
            set;
        }
    }
}

视图

@model IList<WebApplication2.Models.Slide>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Reorder</title>
    <script src="../../Scripts/jquery-3.1.1.min.js"></script>
    <script src="../../Scripts/jquery-ui-1.12.1.min.js"></script>
</head>

<body>
@using (Html.BeginForm())
{
    <table class="table grid" id="sort">
        <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Single().Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Index)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Section)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Content)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().ImageData);
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().ImageDescription)
            </th>
        </tr>
        </thead>
        <tbody>
        @for (var i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.HiddenFor(m => Model[i].Id)
                    @Html.DisplayFor(m => Model[i].Id)
                </td>
                <td class="index">
                    @Html.EditorFor(m => Model[i].Index, new
                    {
                        htmlAttributes = new
                        {
                            name = $"slides[{i}].Index",
                            @readonly = true
                        }
                    })
                </td>
                <td>
                    @Html.HiddenFor(m => Model[i].Section)
                    @Html.DisplayFor(m => Model[i].Section)
                </td>
                <td>
                    @Html.HiddenFor(m => Model[i].Title)
                    @Html.DisplayFor(m => Model[i].Title)
                </td>
                <td>
                    @Html.HiddenFor(m => Model[i].Content)
                    @Html.DisplayFor(m => Model[i].Content)
                </td>
                <td>
                    @Html.HiddenFor(m => Model[i].ImageData)
                    <img src="@Url.Action("RenderImage", new
                              {
                                  id = Model[i].Id
                              })" alt="@Model[i].ImageDescription"/>
                </td>
                <td>
                    @Html.HiddenFor(m => Model[i].ImageDescription)
                    @Html.DisplayFor(m => Model[i].ImageDescription)
                </td>
            </tr>
        }

        </tbody>
    </table>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save Order" class="btn btn-default" name="slides"/>
        </div>
    </div>
}

<script>
    $(function() {
        $('#sort tbody').sortable({
            stop: function(event, ui) {
                $("#sort tbody tr").each(function(index, element) {
                    var hiddenInput = $(element).children(".index").children().first();
                    hiddenInput.val(index);
                });
            }
        });
    });
</script>

</body>
</html>

控制器（相关部分）

public ActionResult Reorder()
{
    return View(_database.Slides.ToList());
}

[HttpPost]
public ActionResult Reorder(IList<Slide> slides)
{
    Debug.WriteLine(slides.Count);
    for (var i = 0; i < slides.Count; i++)
    {
        var slide = _database.Slides.Find(slides[i].Id);

        if (slide == null)
        {
            return HttpNotFound($"Slide with Id {slides[i].Id} not found.");
        }

        Debug.WriteLine(slide.Title);
        slide.Index = i;
    }

    _database.SaveChanges();

    return RedirectToAction("Index");
}

调试行是我检查IList中的项目数的位置，无论数据库中有多少项（因此都传递到视图中），该项为0。

加载时视图如下所示：在我重新排序之后再这样：但是当我点击＆＃34; Save＆＃34;时，这些变化并未正确发布。按钮。

我在其他地方读过，列表问题通常是由于没有对列表项使用连续索引引起的，但是我使用了一个带索引器的循环，因此不应该成为问题。另外，我有所有模型属性，因此表单应该能够发布正确的Slide对象。

生成的HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Reorder</title>
    <script src="../../Scripts/jquery-3.1.1.min.js"></script>
    <script src="../../Scripts/jquery-ui-1.12.1.min.js"></script>
</head>

<body>
<form action="/Slide/Reorder" method="post">    <table class="table grid" id="sort">
        <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Index
            </th>
            <th>
                Section
            </th>
            <th>
                Title
            </th>
            <th>
                Content
            </th>
            <th>
                Image;
            </th>
            <th>
                Image Description
            </th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." name="[0].Id" type="hidden" value="1" />
                    1
                </td>
                <td class="index">
                    <input class="text-box single-line" data-val="true" data-val-number="The field Index must be a number." data-val-required="The Index field is required." name="[0].Index" readonly="True" type="number" value="0" />
                </td>
                <td>
                    <input name="[0].Section" type="hidden" value="Colors" />
                    Colors
                </td>
                <td>
                    <input name="[0].Title" type="hidden" value="Red" />
                    Red
                </td>
                <td>
                    <input name="[0].Content" type="hidden" value="This is the color red." />
                    This is the color red.
                </td>
                <td>
                    <input name="[0].ImageData" type="hidden" value="/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5rooor8DP9oAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==" />
                    <img src="/Slide/RenderImage/1" alt="Red"/>
                </td>
                <td>
                    <input name="[0].ImageDescription" type="hidden" value="Red" />
                    Red
                </td>
            </tr>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." name="[1].Id" type="hidden" value="2" />
                    2
                </td>
                <td class="index">
                    <input class="text-box single-line" data-val="true" data-val-number="The field Index must be a number." data-val-required="The Index field is required." name="[1].Index" readonly="True" type="number" value="1" />
                </td>
                <td>
                    <input name="[1].Section" type="hidden" value="Colors" />
                    Colors
                </td>
                <td>
                    <input name="[1].Title" type="hidden" value="Green" />
                    Green
                </td>
                <td>
                    <input name="[1].Content" type="hidden" value="This is the color green." />
                    This is the color green.
                </td>
                <td>
                    <input name="[1].ImageData" type="hidden" value="/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDLooor8XP4DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z" />
                    <img src="/Slide/RenderImage/2" alt="Green"/>
                </td>
                <td>
                    <input name="[1].ImageDescription" type="hidden" value="Green" />
                    Green
                </td>
            </tr>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." name="[2].Id" type="hidden" value="3" />
                    3
                </td>
                <td class="index">
                    <input class="text-box single-line" data-val="true" data-val-number="The field Index must be a number." data-val-required="The Index field is required." name="[2].Index" readonly="True" type="number" value="2" />
                </td>
                <td>
                    <input name="[2].Section" type="hidden" value="Colors" />
                    Colors
                </td>
                <td>
                    <input name="[2].Title" type="hidden" value="Orange" />
                    Orange
                </td>
                <td>
                    <input name="[2].Content" type="hidden" value="This is the color orange." />
                    This is the color orange.
                </td>
                <td>
                    <input name="[2].ImageData" type="hidden" value="/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2yiiiv89z/RwKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//9k=" />
                    <img src="/Slide/RenderImage/3" alt="Orange"/>
                </td>
                <td>
                    <input name="[2].ImageDescription" type="hidden" value="Orange" />
                    Orange
                </td>
            </tr>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." name="[3].Id" type="hidden" value="5" />
                    5
                </td>
                <td class="index">
                    <input class="text-box single-line" data-val="true" data-val-number="The field Index must be a number." data-val-required="The Index field is required." name="[3].Index" readonly="True" type="number" value="3" />
                </td>
                <td>
                    <input name="[3].Section" type="hidden" value="Colors" />
                    Colors
                </td>
                <td>
                    <input name="[3].Title" type="hidden" value="Blue" />
                    Blue
                </td>
                <td>
                    <input name="[3].Content" type="hidden" value="This is the color blue." />
                    This is the color blue.
                </td>
                <td>
                    <input name="[3].ImageData" type="hidden" value="/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Pooor/RA+DCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q==" />
                    <img src="/Slide/RenderImage/5" alt="Blue"/>
                </td>
                <td>
                    <input name="[3].ImageDescription" type="hidden" value="Blue" />
                    Blue
                </td>
            </tr>
            <tr>
                <td>
                    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." name="[4].Id" type="hidden" value="6" />
                    6
                </td>
                <td class="index">
                    <input class="text-box single-line" data-val="true" data-val-number="The field Index must be a number." data-val-required="The Index field is required." name="[4].Index" readonly="True" type="number" value="5" />
                </td>
                <td>
                    <input name="[4].Section" type="hidden" value="Colors" />
                    Colors
                </td>
                <td>
                    <input name="[4].Title" type="hidden" value="Yellow" />
                    Yellow
                </td>
                <td>
                    <input name="[4].Content" type="hidden" value="This is the color yellow" />
                    This is the color yellow
                </td>
                <td>
                    <input name="[4].ImageData" type="hidden" value="/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9aKKKK/wTP2gKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//9k=" />
                    <img src="/Slide/RenderImage/6" alt="Yellow"/>
                </td>
                <td>
                    <input name="[4].ImageDescription" type="hidden" value="Yellow" />
                    Yellow
                </td>
            </tr>

        </tbody>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save Order" class="btn btn-default" name="slides"/>
        </div>
    </div>
</form>
<script>
    $(function() {
        $('#sort tbody').sortable({
            stop: function(event, ui) {
                $("#sort tbody tr").each(function(index, element) {
                    var hiddenInput = $(element).children(".index").children().first();
                    hiddenInput.val(index);
                });
            }
        });
    });
</script>


<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"3cb43da0b95a4e85b5516b7a9fd604d5"}
</script>
<script type="text/javascript" src="http://localhost:63777/83db435e9ea240748a606c667677694e/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Answer 1

HttpPost上的模型将使用表单中提交的值填充。在您的情况下，您似乎没有生成任何输入字段来标识行。

您应该拥有的是Id的一个隐藏字段和每行Index的一个隐藏字段。

DisplayFor仅为您生成标签，并且不会使用表单提交标签。与每个标签（DisplayFor）一起，也生成一个隐藏字段（HiddenFor），至少为Id和索引，如果不是所有其他字段。

除此之外，问题在于您的提交按钮的名称设置为＆＃39;幻灯片。这也是POST操作中参数的名称。更改按钮名称或更改IList

上Action参数的名称

这是你的观点应该是这样的：

@model IList<WebApplication2.Models.Slide>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Reorder</title>
    <script src="../../Scripts/jquery-3.1.1.min.js"></script>
    <script src="../../Scripts/jquery-ui-1.12.1.min.js"></script>
</head>

<body>
@using (Html.BeginForm())
{
    <table class="table grid" id="sort">
        <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Single().Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Index)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Section)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().Content)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().ImageData)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Single().ImageDescription)
            </th>
        </tr>
        </thead>
        <tbody>
        @for (var i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(m => Model[i].Id)
                    @Html.HiddenFor(m => Model[i].Id)
                </td>
                <td class="index">
                    @Html.EditorFor(m => Model[i].Index, new
                    {
                        htmlAttributes = new
                        {
                            @readonly = "true"
                        }
                    })
                </td>
                <td>
                    @Html.DisplayFor(m => Model[i].Section)
                </td>
                <td>
                    @Html.DisplayFor(m => Model[i].Title)
                </td>
                <td>
                    @Html.DisplayFor(m => Model[i].Content)
                </td>
                <td>
                    <img src="@Url.Action("RenderImage", new
                              {
                                  id = Model[i].Id
                              })" alt="@Model[i].ImageDescription"/>
                </td>
                <td>
                    @Html.DisplayFor(m => Model[i].ImageDescription)
                </td>
            </tr>
        }

        </tbody>
    </table>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save Order" class="btn btn-default" name="noslides"/>
        </div>
    </div>
}

<script>
    $(function() {
        $('#sort tbody').sortable({
            stop: function(event, ui) {
                $("#sort tbody tr").each(function(index, element) {
                    var hiddenInput = $(element).children(".index").children().first();
                hiddenInput.val(index);
                });
            }
        });
    });
</script>

</body>
</html>

Answer 2

List的问题是，name为所有View元素生成的input属性不包含必需的前缀。

在您的情况下，当您使用List在View中生成HTML helper个输入时，生成的名称不包含slides[i]前缀。您可以使用HTML调试程序进行检查。

//to be readable by the controller, it should be like this:
<input type="text" name="slides[0].TypeName" ...>

//but by using HTML helper Html.EditorFor, the following is generated
<input type="text" name="TypeName" ...>

因此，而不是将所有输入都放在适当位置（具有slides[i]前缀）。您有多个具有相同名称的项目！

我建议你在HTML创建中添加HTMLAttribute名称，并为你的名字指定前缀slides[i]，如下所示：

@Html.EditorFor(m => Model[i].Index, new
                {
                    htmlAttributes = new
                    {                            
                        name = "slides[" + i + "].Index"
                    }
                })

对于Index属性。你可以为休息做同样的事。

否则，您还可以使用HTML helper生成HTML 而不使用。以您的Index为例，这就是它的样子（从您发布的HTML中获取和编辑）：

<input class="text-box single-line" data-val="true" 
       data-val-number="The field Index must be a number." 
       data-val-required="The Index field is required." 
       name="slides[" + @i + "].Index" 
       readonly="True" type="number" 
       value="@Model[i].Index" />

Answer 3

使用

@Html.DisplayFor(x=> x.FieldName)
@Html.HiddenFor(x=> x.FieldName)

或

@Html.TextBoxFor(x=> x.FieldName)

如上所述，DisplayFor不会绑定到模型。

将IList <model>从View传递给Controller

编辑14:19 UTC 2017年5月10日星期三

模型

视图

控制器（相关部分）

生成的HTML

3 个答案: