我怎样才能让这个局部视图正确渲染？答案

【问题标题】：How can I get this partial view to render correctly?我怎样才能让这个局部视图正确渲染？
【发布时间】：2011-11-26 15:13:45
【问题描述】：

我在 MVC 3 视图中有以下代码

    <% foreach (var stockItem in Model.Shop.Stock) { %>
        <div class="shopItem">
            <div class="shopItemLeft">
                <% Html.RenderPartial("ItemImageDisplay", stockItem.Item); %>
            </div>
            <div class="shopItemRight">
                <strong><%= stockItem.Item.ToString() %></strong><br />
                <%= stockItem.Item.CalculatePrice() %><br />
                <%= stockItem.Quantity %> in stock<br />
                <%= Html.ActionLink("Buy", "BuyShopItem", new { shopId = Model.Shop.Id, itemId = stockItem.Item.Id }, null) %>
            </div>
        </div>
    <% } %>

当它被渲染时，“ItemImageDisplay”部分视图不在我放置它的 div 标记内，而是像我放置的一样呈现：

    <% foreach (var stockItem in Model.Shop.Stock) { %>
                <% Html.RenderPartial("ItemImageDisplay", stockItem.Item); %>
    <% } %>

    <% foreach (var stockItem in Model.Shop.Stock) { %>
        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong><%= stockItem.Item.ToString() %></strong><br />
                <%= stockItem.Item.CalculatePrice() %><br />
                <%= stockItem.Quantity %> in stock<br />
                <%= Html.ActionLink("Buy", "BuyShopItem", new { shopId = Model.Shop.Id, itemId = stockItem.Item.Id }, null) %>
            </div>
        </div>
    <% } %>

局部视图的html如下：

<%= Html.Image("~/Content/Images/Items/" + Model.Id + ".png", Model.ToString(), new { onmouseover = "tooltip('item:" + Model.Id + "');", onmousemove = "tooltip('item:" + Model.Id + "');", onmouseout = "tooltipRem();" }) %>

请您帮我理解为什么会这样渲染，以及我能做些什么来阻止这种情况发生？

编辑：这是本节的渲染输出：

<img alt="Can of Pineapples" onmousemove="tooltip(&#39;item:1152&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:1152&#39;);" src="/Content/Images/Items/1152.png" title="Can of Pineapples" /><img alt="Kraken Treats" onmousemove="tooltip(&#39;item:1104&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:1104&#39;);" src="/Content/Images/Items/1104.png" title="Kraken Treats" /><img alt="Orange Jelly" onmousemove="tooltip(&#39;item:1279&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:1279&#39;);" src="/Content/Images/Items/1279.png" title="Orange Jelly" /><img alt="Peanuts" onmousemove="tooltip(&#39;item:509&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:509&#39;);" src="/Content/Images/Items/509.png" title="Peanuts" /><img alt="Fourth Year Anaversary Cake" onmousemove="tooltip(&#39;item:859&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:859&#39;);" src="/Content/Images/Items/859.png" title="Fourth Year Anaversary Cake" /><img alt="Taco" onmousemove="tooltip(&#39;item:486&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:486&#39;);" src="/Content/Images/Items/486.png" title="Taco" /><img alt="Can of Blueberries" onmousemove="tooltip(&#39;item:1154&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:1154&#39;);" src="/Content/Images/Items/1154.png" title="Can of Blueberries" /><img alt="Strawberry Jam" onmousemove="tooltip(&#39;item:639&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:639&#39;);" src="/Content/Images/Items/639.png" title="Strawberry Jam" /><img alt="Crisps" onmousemove="tooltip(&#39;item:726&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:726&#39;);" src="/Content/Images/Items/726.png" title="Crisps" /><img alt="Cooked Shrimp" onmousemove="tooltip(&#39;item:521&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:521&#39;);" src="/Content/Images/Items/521.png" title="Cooked Shrimp" /><img alt="Fishy Finger" onmousemove="tooltip(&#39;item:629&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:629&#39;);" src="/Content/Images/Items/629.png" title="Fishy Finger" /><img alt="Can of Peaches" onmousemove="tooltip(&#39;item:1151&#39;);" onmouseout="tooltipRem();" onmouseover="tooltip(&#39;item:1151&#39;);" src="/Content/Images/Items/1151.png" title="Can of Peaches" />

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Can of Pineapples</strong><br />
                940<br />
                10 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=1152">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Kraken Treats</strong><br />
                934<br />
                7 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=1104">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Orange Jelly</strong><br />
                827<br />
                9 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=1279">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Peanuts</strong><br />
                116<br />
                8 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=509">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Fourth Year Anaversary Cake</strong><br />
                1794<br />
                7 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=859">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Taco</strong><br />
                950<br />
                7 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=486">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Can of Blueberries</strong><br />
                317<br />
                8 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=1154">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Strawberry Jam</strong><br />
                1032<br />
                10 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=639">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Crisps</strong><br />
                179<br />
                10 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=726">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Cooked Shrimp</strong><br />
                663<br />
                11 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=521">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Fishy Finger</strong><br />
                974<br />
                10 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=629">Buy</a>
            </div>
        </div>

        <div class="shopItem">
            <div class="shopItemLeft">

            </div>
            <div class="shopItemRight">
                <strong>Can of Peaches</strong><br />
                786<br />
                7 in stock<br />
                <a href="/Market/BuyShopItem?shopId=1&amp;itemId=1151">Buy</a>
            </div>
        </div>

【问题讨论】：

可以添加渲染视图/部分视图的 html 输出吗？
对不起，应该考虑添加。我已经编辑了问题
是页面的实际来源，还是使用 dom 浏览器（如 firebug 或 ie 开发人员工具）检查的页面。 Javascript 可以更改 dom 但不能更改页面源。据我所知，您发布的代码没有任何问题，它应该按照您的预期输出。
我发布的渲染 HTML 是从 IE 中查看源代码的复制和粘贴。它在谷歌浏览器中看起来是一样的。如果我将部分视图中的 html 放在视图中调用部分视图的位置，那么它会按预期输出。不幸的是，这意味着我将不得不在我的网站上多次重复同一行，而且我以后也不容易改变。

标签： c# html asp.net-mvc-3 partial-views

【解决方案1】：

嗯，我怀疑这是因为您使用的是Html.RederPartial 而不是Html.Partial。后者返回一个字符串，而前者直接写入响应流。我有一种鬼鬼祟祟的感觉，MVC 正在执行整个 foreach 循环，然后在最后写入响应以解释您的结果。

【讨论】：