通過partialview更新不影響模型

Question

我通過PartialView更新ViewModel時遇到問題。 PartialView包含設備以及位置 ，該位置根據客戶選擇的DropDownList而有所不同。 （在底部，我提供了示例屏幕截圖）。 問題在於，接受提交按鈕后，ViewModel（FiscalizationViewModel）中的設備屬性不會更新。 這是模型的例子。 我不確定我是否要嘗試正確解決此問題。

namespace TestMVC.ViewModels
{
    public class FiscalizationViewModel
    {
        public int CustomerId { get; set; }
        public string FiscalizationDate { get; set; }

        public List<DevicesToFiscalizationViewModel> Devices { get; set; }

        public FiscalizationViewModel()
        {
            Devices = new List<DevicesToFiscalizationViewModel>();
        }

        public IEnumerable<DevicesToLocalization> GetSelectedIds()
        {
            return (from d in Devices where d.Selected select new DevicesToLocalization() { DeviceId = d.DeviceId, LocalizationId = d.LocalizationId }).ToList();
        }
    }

    public class DevicesToFiscalizationViewModel
    {
        public int DeviceId { get; set; }

        public string DeviceName { get; set; }
        public bool Selected { get; set; }
        public string SerialNumber { get; set; }

        public int LocalizationId { get; set; }
        public IEnumerable<Localization> Localizations { get; set; }

        public DevicesToFiscalizationViewModel()
        {
            Localizations = new List<Localization>();
        }
    }

}

這是Customer DropDownList事件調用的方法

public PartialViewResult CustomerChanged(int CustomerId)
{
    var localizations = db.Localizations.Where(i => i.CustomerId == CustomerId).ToList();

    var devicesToFsc = (from d in db.Devices
                        select new DevicesToFiscalizationViewModel()
                            {
                                DeviceId = d.DeviceId,
                                DeviceName = d.Name,
                                SerialNumber = d.SerialNumber,
                            }).ToList();
    foreach (var item in devicesToFsc)
    {
        item.Localizations = localizations;
    }

    return PartialView("~/Views/Fiscalizations/EditorTemplates/DevicesToFiscalizationViewModel.cshtml", devicesToFsc);

//--------------------------------
    $("#customerChanged").on("change", function () {
        $.ajax(
        {
            url: '/Fiscalizations/CustomerChanged?CustomerId=' + $(this).val(),
            type: 'GET',
            data: "",
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $("#devicesToFiscalization").html(data);
            }
        });
    });

這只是視圖的一部分（Fiscalization創建視圖）

    @model TestMVC.ViewModels.FiscalizationViewModel
    <table class="table" id="devicesToFiscalization">
        <thead>
            ...
        </thead>
              @Html.Partial("~/Views/Fiscalizations/EditorTemplates/DevicesToFiscalizationViewModel.cshtml", Model.Devices)
    </table>

PartialView：

@model IEnumerable<TestMVC.ViewModels.DevicesToFiscalizationViewModel>
@foreach(var item in Model)
{ 
<tbody>
   <tr>
       <td style="text-align:center">
        <div class="checkbox">
            @Html.EditorFor(m => item.Selected)
        </div>
    </td>
    <td>
        @Html.DisplayFor(m => item.DeviceName)
    </td>
    <td>
        @Html.DisplayFor(m => item.SerialNumber)
    </td>
    <td>
        @Html.DropDownList("LocalizationId", new SelectList(item.Localizations, "LocalizationId", "Name"), "Select", htmlAttributes: new { @class = "form-control", style = "width: 200px;" })
    </td>
    <td>
        @Html.HiddenFor(m => item.DeviceId)
    </td>
  </tr>
</tbody>

這是單擊外觀的屏幕截圖，這是調試器的屏幕截圖，結果不好

Answer 1

根據我對您觀點的低估，您的問題是對主視圖和局部視圖使用不同的模型。 您應該在兩個模型綁定中使用完全相同的模型，這樣可以在服務器端更新模型。 保留兩個模型TestMVC.ViewModels.FiscalizationViewModel或IEnumerable<TestMVC.ViewModels.DevicesToFiscalizationViewModel>

Answer 2

它的工作原理是：）下面我展示了更改后的外觀

主要觀點：

@model TestMVC.ViewModels.FiscalizationViewModel
    <div id="devicesToFiscalization">
        @Html.Partial("~/Views/Fiscalizations/EditorTemplates/DevicesToFiscalizationViewModel.cshtml", Model)
    </div>

部分視圖：

@model TestMVC.ViewModels.FiscalizationViewModel
<table class="table">
<thead>
    <tr>
        <th>
            Select
        </th>
        <th>
            Name
        </th>
        <th>
            Serial number
        </th>
        <th>
            Localization
        </th>
    </tr>
</thead>
<tbody>
    @for (int i = 0; i < Model.Devices.Count; i++)
    {
        <tr>
            <td style="text-align:center">
                <div class="checkbox">
                    @Html.EditorFor(m => m.Devices[i].Selected)
                </div>
            </td>
            <td>
                @Html.DisplayFor(m => m.Devices[i].DeviceName)
            </td>
            <td>
                @Html.DisplayFor(m => m.Devices[i].SerialNumber)
            </td>
            <td>
                @Html.DropDownListFor(m => m.Devices[i].LocalizationId, new SelectList(Model.Devices[i].Localizations, "LocalizationId", "Name"), "Select", htmlAttributes: new { @class = "form-control", style = "width: 200px;" })
            </td>
            <td>
                @Html.HiddenFor(m => m.Devices[i].DeviceId)
            </td>
        </tr>
    }
</tbody>

和CustomerChanged方法：

    public PartialViewResult CustomerChanged(int CustomerId)
    {
        var localizations = db.Localizations.Where(i => i.CustomerId == CustomerId).ToList();
        var Devices = (from d in db.Devices
                       select new DevicesToFiscalizationViewModel()
                       {
                           DeviceId = d.DeviceId,
                           DeviceName = d.Name,
                           SerialNumber = d.SerialNumber,
                       }).ToList();

        foreach (var item in Devices)
        {
            item.Localizations = localizations;
        }

        var fsc = new FiscalizationViewModel();
        fsc.Devices = Devices;

        return PartialView("~/Views/Fiscalizations/EditorTemplates/DevicesToFiscalizationViewModel.cshtml", fsc);
    }

================================================== ======================

我正在嘗試使用EditorFor編寫此代碼，但是正確編寫CustomerChanged方法（返回設備列表）並且不希望看到如下所示的EditorTemplate時遇到問題：

@model TestMVC.ViewModels.DevicesToFiscalizationViewModel

<tr>
    <td style="text-align:center">
        <div class="checkbox">
            @Html.EditorFor(m => m.Selected)
        </div>
    </td>
    <td>
        @Html.DisplayFor(m => m.DeviceName)
    </td>
    <td>
        @Html.DisplayFor(m => m.SerialNumber)
    </td>
    <td>
        @Html.DropDownListFor(m => m.LocalizationId, new SelectList(Model.Localizations, "LocalizationId", "Name"), "Select", htmlAttributes: new { @class = "form-control", style = "width: 200px;" })
    </td>
    <td>
        @Html.HiddenFor(m => m.DeviceId)
    </td>
</tr>

主視圖：

    <table class="table" id="devicesToFiscalization">
         ...
        <tbody>
            @Html.EditorFor(m => m.Devices)
        </tbody>
    </table>