How to post back a nested model in asp.net mvc

Question

First of all sorry if the question is misleading but I don't really get how to ask the question so I will try to explain myself with examples.

If you can suggest a better title for the question I will gladly change it

I have these model:

Public Class Tag
    Property TagID As Integer
    Property Name As String
    <Column(TypeName:="image")>
    Property Image As Byte()
    Property ImageMimeType As String
    Property CategoryID As Integer

    Overridable Property Category As Category
End Class

Public Class Category
    Property CategoryID As Integer
    Property Name As String

    Overridable Property Tags As ICollection(Of Tag)
End Class

Then my controller is like this:

Function EditCategories() As ActionResult
        Dim categories As IEnumerable(Of Category) = UW.CategoryRepository.GetAll
        Return View(categories)
End Function

Now is when I start complicate things (at least for me)

My view is like this:

@modeltype IEnumerable(Of Category )
@Using Html.BeginForm("EditCategories", "Admin", FormMethod.Post,  New With {.enctype = "multipart/form-data"})
@Html.ValidationSummary(True)
    @<fieldset>
        <legend>Product</legend>
        @Html.EditorForModel()
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
End Using

in my EditorTemplate folder I have this view

@ModelType ProcesadoraVizcaya.Category 
<div class="category-edit">
    <div>
        @Html.HiddenFor(Function(model) model.CategoryID)
        <div class="info-area">
            <div class="editor-label">
                @Html.LabelFor(Function(model) model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(model) model.Name)
                @Html.ValidationMessageFor(Function(model) model.Name)
            </div>
        <hr />
        </div>
        <div class="tags-area">
                @Html.Partial("EditTags",Model.Tags )
        </div>
    </div>
</div>

as you can see I'm using a partial view to render Tags inside each Categories

so my partial view is like this

@ModelType IEnumerable(Of ProcesadoraVizcaya.Tag)

@Html.EditorForModel()

again in my EditorTemplate folder I have a view like this

@ModelType ProcesadoraVizcaya.Tag
<div>
    <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>
    <div>
    </div>

</div>

To this point everything goes well and lazzy load runs without any trouble rendering all my categories and tags respectively.

but when I post back using:

<HttpPost()>
Function EditCategories(Categories As IEnumerable(Of Category)) As ActionResult
     Return View(Categories)
End Function

I get this:

As you can see Tags is nothing.

So my question is like this how do I return to the server those tags?

(I have others methods to do that but I will like to know if is possible to do it using this approach)

(if you have the answer in C# please let me know I will work from that)

thxs!

Answer 1

as you can see I'm using a partial view to render Tags inside each Categories

That's your problem. You should use an editor template:

<div class="tags-area">
    @Html.EditorFor(Function(model) model.Tags)
</div>

and then you should have the corresponding ~/Views/Shared/EditorTemplates/Tag.vbhtml template. You don't need the EditTags.vbhtml partial.