Updates by partialview not affected to model

Question

I have a problem with updating ViewModel by PartialView. PartialView includes Devices along with the location that varies depending on the DropDownList selected by the Customer. (At the bottom I present sample screenshot). The problem is that after accepting the submit button the property Devices in the ViewModel(FiscalizationViewModel) is not updating. Here are examples of models. I'm not sure I'm trying to solve this problem properly.

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>();
        }
    }

}

Here is the method that is called by the Customer DropDownList event

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);
            }
        });
    });

This is little partial of Views (Fiscalization create view)

    @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>

Here is a screenshot of how it looks click and here is screenshot from debugger with bad result bad

I'm guessing the partial is not aware of the expected naming prefixes that are needed to model bind the values back to your model. What does the rendered HTML look like? Do the partial fields have a prefix like `Devices.DeviceName` or just `DeviceName`? See: https://stackoverflow.com/questions/20693698/mvc4-partial-view-model-binding-during-submit — stephen.vakil, Sep 06 '17 at 18:03
Also, there's a good chance you will have binding issues when using `foreach` instead of `for(var i = 0; i < ...` — stephen.vakil, Sep 06 '17 at 18:10
Because you cannot use a partial to generate form controls for a collection property unless you pass the `HtmlFieldPrefix` - refer [this answer](https://stackoverflow.com/questions/29808573/getting-the-values-from-a-nested-complex-object-that-is-passed-to-a-partial-view/29809907#29809907), but the correct approach is to use an `EditorTempate` for typeof `Devices` - refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , Sep 06 '17 at 22:44
It works :) The good advice was to check what the table looks like after rendering. For example, the column for the selection was 'item.Selected'. The first thing I did was to change ‘IEnumerable’ to ‘List’ and ‘foreach’ to ‘for’ loop. After this change, my table already has a value of '[0] .Selected. Close but not yet working :) When I applied HtmlFieldPrefix all seemed to work (table column looks like Devices[0].Selected, which is correct, but only until I called the ‘CustomerChanged’ function and then the table again looked like ‘[0] .Selected’. To be continued... — ahkmenraha, Sep 07 '17 at 09:17
So, I changed the models of partial view on the same as in the main view 'TestMVC.ViewModels.FiscalizationViewModel', while turning off HtmlFieldPrefix because then table looks like Devices.Devices[0].Selected . After that change everything works as I expected. Thank you all very much for good help :) — ahkmenraha, Sep 07 '17 at 09:17

score 0 · Answer 1 · answered Sep 06 '17 at 20:28

0

Based on my understating from your views, your issues is using different models for main view and partial view. You should use exactly the same model in both the model binding could update the model on server side. keep both models TestMVC.ViewModels.FiscalizationViewModel or IEnumerable<TestMVC.ViewModels.DevicesToFiscalizationViewModel>

answered Sep 06 '17 at 20:28

Hadee

1,392
1
14
25

Thx for help, I implemented your advice and all works as I expected – ahkmenraha Sep 07 '17 at 09:19
So please score! – Hadee Sep 07 '17 at 20:13
"Votes cast by those with less than 15 reputation are recordered, but do not change the publicly displayed score" – ahkmenraha Sep 08 '17 at 00:09

ahkmenraha · Answer 2 · 2017-09-07T12:19:49.460

It works :) Below I show how it looks after changes

main view:

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

Partial view:

@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>

and CustomerChanged method:

    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);
    }

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

I'm trying to write this using EditorFor but I have a problem with correctly writing the CustomerChanged method that returns a list of Devices and not expecting this EditorTemplate that looks as follows:

@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>

Main View:

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

As I noted in previous comments. The correct solution id to use an `EditorTemplate` which is what its designed for, not hacks like this. — , Sep 07 '17 at 10:23

Updates by partialview not affected to model

2 Answers2