添加多个部分视图和第一个缺少表单

时间:2013-10-02 20:13:23

标签: javascript asp.net-mvc asp.net-mvc-4

我有以下内容:

_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>
}

当我使用Chrome开发工具检查页面元素时,第一个元素缺少周围的表单。如果我检查页面源(使用右键),则单击该表单。这让我相信一些JS正在删除表单,所以我禁用了JS,但它仍然缺失。

如果更改 _ImageGalleryPartial ,那么就像这样(注意添加空模型):

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

然后所有“正确”元素都会获得一个表单,但是第一个项目却没有。

我仍然倾向于认为这是一个JS问题,但我有点难过,因为禁用JS无法修复它。这是MVC的一些关闭行为吗?

请注意,我已经简化了上面的布局,我实际上有一个或两个嵌套的表单,但是假设其他一切都好,那就是好的,这只是第一个部分被打破了。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

Html表单不能嵌套。

Chrome会忽略非法标记,因此无法显示。

您可以阅读此post以获取更多信息。