Adding multiple partial views and first one is missing form

Question

I have the following:

_ImageGalleryPartial

@if (Model != null)
{
    foreach (var item in Model)
    {
        @Html.Partial("_ImageItem", item);
    }
}

_ImageItemPartial

@model WebsiteEngine.Models.PortfolioImage

@{
    string url = VirtualPathUtility.ToAbsolute(String.Format("~/{0}", Html.DisplayFor(m => m.FileName)));
}

@using (Html.BeginForm("DeleteImage", "Portfolio", FormMethod.Post, new { @class = "deleteImageForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true);

    @Html.HiddenFor(m => m.Name)
    @Html.HiddenFor(m => m.FileName)
    @Html.HiddenFor(m => m.Order)
    @Html.HiddenFor(m => m.PortfolioID)
    @Html.HiddenFor(m => m.PortfolioImageID)

    <div class="span3">
        <div class="item">
            <a class="fancybox-button" data-rel="fancybox-button" title="Photo" href="@url">
                <div class="zoom">
                    <img src="@url" alt="Photo" />                    
                    <div class="zoom-icon"></div>
                </div>
            </a>
            <div class="details">
                <a href="#" class="icon deleteImage" data-form=""><i class="icon-remove"></i></a>
            </div>
        </div>
    </div>
}

When I inspect the page elements using Chrome dev tools, the first element is missing the surrounding form. If I inspect the page source (using right) click then the form is there. This lead me to believe some JS was removing the form so I disabled JS but it was still missing.

If change _ImageGalleryPartial so it's like this (notice the addition of an empty model):

@if (Model != null)
{
    @Html.Partial("_ImageItem", new WebsiteEngine.Models.PortfolioImage());
    foreach (var item in Model)
    {
        @Html.Partial("_ImageItem", item);
    }
}

Then all the "correct" elements get a form but again, this first item doesn't.

I'm still inclined to think this is a JS issue but I'm a little stumped as disabling JS doesn't fix it. Is this some off behaviour with MVC?

Just to note, I have simplified my layout above, I do actually have one or 2 nested forms but assume that's Ok as everything else is Ok, it's just this first partial that's broken.

Any ideas?

Community · Accepted Answer · 2017-05-23 12:21:37Z

1

Html forms can't be nested.

Chrome will ignore illegal tags, thus they are not showing.

You can read this post for further information.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 2, 2013 at 23:49

Yan Brunet

4,9272 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webnoob Over a year ago

I was thinking this as well but seeing as the others were working OK I assumed all was fine. I will take a look into this when I get home.

webnoob Over a year ago

Thanks Yan, although I knew about multiple forms, your answer made me focus my efforts on re-writing how my forms worked which has resolved the issue.

Collectives™ on Stack Overflow

Adding multiple partial views and first one is missing form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related