MVC 3 - Entity Framework - Post data from ajax-invoked Partial View

Question

I have a problem with the binding of a complex model from a View that has updatable content, first things first, entites:

public partial class Diagnosis
{
    public Diagnosis()
    {
        this.DiagZones = new HashSet<DiagZone>();
        ...
    }

    public int diagnosisid { get; set; }
    public int playerid { get; set; }
    public int userid { get; set; }
    ...

    public virtual ICollection<DiagZone> DiagZones { get; set; }
}

My DiagZones Collection is the intermediate table between Diagnosis and Zones but it exist in my Model cause has more fields than the id's.

I have a Select control where you can select and unselect the Zones, when onchange fires, I Get a Partial View with an ajax call.

The code:

EditDiagnosis.cshtml

@model Gfire.Models.DiagnosisViewModel

<h2>
    @ViewBag.playername</h2>
@using (Html.BeginForm("EditDiagnosis", "Diagnosis", FormMethod.Post))
{    
    @Html.HiddenFor(d => d.Diagnosis.diagnosisid)   
    <table>
           ...
    </table>
    <table>
        <tr>
            <td>
                Zones:
            </td>
            <td>
                @Html.ListBoxFor(d => d.SelectedZones, new SelectList(Model.Zones, "zoneid", "description"), new
          {
              style = "width:305px;",
              onchange = "QualityMovement(this);",
              id = "lbZone",
              @class = "chzn-select"
          })
            </td>
            <td>
                ...
            </td>
        </tr>

    </table>

    <div id="qualitymovement">
        @Html.Partial("_QualityMovement", Model.Diagnosis.DiagZones)
    </div>

    <div>
        <input type="submit" value="Save" />
        &nbsp | &nbsp @Html.ActionLink("Cancel", "IndexDiagnosisPlayer", new { playerid = ViewBag.playerid })
    </div>
}

Partial View (_QualityMovement.cshtml):

@model List<Gfire.Domain.Entities.Diagnosis.DiagZone>

@if (Model.Count() != 0)
{
    <table>
        @foreach (var dz in Model)
        {
            <tr>
                <tr>
                    <td>
                        Flex:
                    </td>
                    <td>
                        @Html.TextBoxFor(d => dz.flex))
                    </td>
                </tr>
            </tr>


        }
    </table>
}

The Ajax.Get call:

<script type="text/javascript" language="javascript">

    function JointBalance(item) {
    ...
        $.ajax({
            url: '@Url.Action("GetJointBalances", "Diagnosis")',
            data: arrayToParamObject('zonesid', items),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                // Successful requests get here
                $("#jointbalance").html(data);

                $("#jointbalance").fadeIn('slow');
            },
            type: "GET",
            datatype: "json"
        });
    ...
    }
</script>

In server I have a Method that initialize a new list of DiagZones and update correctly the EditView.cshtml.

The problem comes when I try to Submit the complete Diagnosis object with all the fields and the list of DiagZones but my method:

[HttpPost]
public ActionResult EditDiagnosis(DiagnosisViewModel DiagnosisViewModel)
{
    if (ModelState.IsValid)
    {
        // Save the model
        ...

        return RedirectToAction("IndexDiagnosisPlayer", new { playerid = SessionHelper.Player.playerid });
    }
    else 
    {
        return View("EditDiagnosis", new { diagnosisid = DiagnosisViewModel.diagnosisid });
    }
}

My Model has empty the DiagnosisViewModel.DiagZones list.

I've tried to use EditorFor, pass the complete model to the partial View, add several forms... but it was useless, how can I bind that list to my model?

Thanks in advance.

UPDATE

Here is what the server side action is expecting:

[HttpGet]
public ActionResult GetJointBalances(int[] zonesid) { ... }

GET ajax request data looks like:

Request URL:http://localhost/Gfire.WebUI/Diagnosis/GetQualityMovement?zonesid=47
Request Method:GET
Status Code:200 OK
Request Headersview source
...
Connection:keep-alive
Content-Type:application/json; charset=utf-8
...
Referer:http://localhost/Gfire.WebUI/Diagnosis/EditDiagnosis?diagnosisid=0&playerid=23
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.152 Safari/537.22
X-Requested-With:XMLHttpRequest
Query String Parametersview sourceview URL encoded
zonesid:47

Answer 1

I found a temporal solution, not the best of course, but I thougth it would help to understand what I was trying to do and how to solve this. The problem, as Justin said, was binding the list<DiagZones> to main model, the Diagnosis object, following the posts of this:

• ASP.Net MVC4 bind a "create view" to a model that contains List

I understand a little bit of the binding functionality, with that in mind I code my new PartialView _QualityMovement.cshtml:

@model List

@if (Model.Count() != 0)
{
    <table>
        @foreach (var dz in Model)
        {
            <tr>
                <tr>
                    <td>
                        Flex:
                    </td>
                    <td>
                        Html.TextBox("Diagnosis.DiagZones[" + i + "].ext", Model[i].ext)
                    </td>
                </tr>
            </tr>


        }
    </table>
}

It's a bad solution but at least I had my Model binded in server side. The problem is the abstraction made by the entity framework to my entities, as an ICollection so I cannot iterate as a List and found myself "casting" everywhere.

I suppose a better approach should be a CustomBinder to retrieve the data in the Request or type it in a neater and understandable way.

Thanks Justin for all the help you gave me.