部分视图不显示任何内容 生成错误 404

Question

我正在尝试解决此问题我在部分视图路径 url 上收到错误 404：localhost:49259/Panier/TableContent。此 TableContent 位于 Panier 文件夹下。 我无法弄清楚 URL 有什么问题。

TableContent 是否应该在这个文件夹 ViewModels 下，因为它正在使用这个模型 @model Tp1WebStore3.ViewModels.ShoppingCartViewModel?

谢谢

来自 Panier 的 TableContent.cshtml（部分视图）

 @model Tp1WebStore3.ViewModels.ShoppingCartViewModel

 @{
     ViewBag.Title = "Table Content";
 }

 <a href="#" class="TableContent">
     <table>
         <tr>
             <th>
                 Produit
             </th>
             <th>
                 Prix (unitaire)
             </th>
             <th>
                 Quantite
            </th>
            <th></th>
         </tr>
         @foreach (var item in Model.CartItems)
         {
             <tr id="row-@item.ProduitId">
                 <td>
                     @Html.ActionLink(item.Produit.Description, "Details", "Produit", new { id = 
                         item.ProduitId }, null)
                 </td>
                 <td>
                     @item.Produit.Prix
                 </td>
                 <td id="item-count-@item.PanierId">
                     @item.Quantite
                 </td>
                 <td>
                     <a href="#" class="RemoveLink" data-id="@item.PanierId"> Enlever du panier 
                     </a>
                 </td>
             </tr>
         }
         <tr>
             <td>
                 Total
             </td>
             <td></td>
             <td></td>
             <td id="cart-total">
                 @Model.CartTotal
             </td>
         </tr>
     </table>
 </a>

来自 Panier 的 Index.cshtml

 @model Tp1WebStore3.ViewModels.ShoppingCartViewModel

 @{
     ViewBag.Title = "Shopping Cart";
 }
 <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

 <script type="text/javascript">
     $(function () {
         $('.RemoveLink').click(function () {
             $.ajax({
                 url: '/Panier/RemoveFromCart',
                 data: { id: $(this).data('id') },
                 type: 'POST',
                 cache: false,
                 success: function (result) {
                     $('#row-' + result.DeleteId).remove();
                     $('#row-' + result.DeleteId).fadeOut('slow');
                     $('#cart-status').text('Cart (' + result.CartCount + ')');
                     $('#update-message').text(result.Message);
                     $('#cart-total').text(result.CartTotal);
                     $.get("/Panier/TableContent").done(function (data) {     <==error 404
                          $("#TableContent").html(data); });
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) { 
                       alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                  }       
             });
             return false;
         });
     });
 </script>
 <h3>
     <em>Details</em> du panier:
 </h3>
 <p class="button">
     @Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
  </p>  
  <div id="update-message">
  </div>
  <div id="table-content">
      @Html.Partial("TableContent")    <=== partial view call
  </div>

PanierController.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using Tp1WebStore3.Models;
 using Tp1WebStore3.ViewModels;

 namespace Tp1WebStore3.Controllers
 {
     public class PanierController : Controller
     {
         //
         // GET: /Panier/
         Tp1WebStoreDBEntities dbProduit = new Tp1WebStoreDBEntities();

         //
         // GET: /ShoppingCart/
         public ActionResult Index()
         {
             var cart = ShoppingCart.GetCart(this.HttpContext);

             // Set up our ViewModel
             var viewModel = new ShoppingCartViewModel
             {
                 CartItems = cart.GetCartItems(),
                 CartTotal = cart.GetTotal()
             };
             // Return the view
             return View(viewModel);
         }
         //
         // GET: /Store/AddToCart/5
         public ActionResult AddToCart(int id)
         {
             // Retrieve the album from the database
             var addedProduit = dbProduit.Produits
                  .Single(produit => produit.ProduitId == id);

             // Add it to the shopping cart
             var cart = ShoppingCart.GetCart(this.HttpContext);

             cart.AddToCart(addedProduit);

             // Go back to the main store page for more shopping
             return RedirectToAction("Index");
         }
         //
         // AJAX: /ShoppingCart/RemoveFromCart/5
         [HttpPost] 
         public ActionResult RemoveFromCart(int id)
         {
             // Remove the item from the cart
             var cart = ShoppingCart.GetCart(this.HttpContext);

             // Get the name of the album to display confirmation
             string produitDescription = dbProduit.Paniers
                 .Single(item => item.PanierId == id).Produit.Description;

             // Remove from cart
             int itemCount = cart.RemoveFromCart(id);

             // Display the confirmation message
             var results = new ShoppingCartRemoveViewModel
             {
                 Message = Server.HtmlEncode(produitDescription) +
                     " has been removed from your shopping cart.",
                 CartTotal = cart.GetTotal(),
                 CartCount = cart.GetCount(),
                 ItemCount = itemCount,
                 DeleteId = id
             };
             return Json(results);  
         /*    return View("CartSummary");  */
         }
         //
         // GET: /ShoppingCart/CartSummary
         [ChildActionOnly]
         public ActionResult CartSummary()
         {
             var cart = ShoppingCart.GetCart(this.HttpContext);

             ViewData["CartCount"] = cart.GetCount();
             return PartialView("CartSummary");
         }
     }
 }

Answer 1

您需要将部分视图保留在视图文件夹中（而不是视图模型）...具体的子目录由您决定，但我相信它会默认查看共享。

我建议您在调用局部视图时指定更多的 URL，看看是否能解决您的问题...

例如：

Html.Partial("~/Views/Shared/TableContent.cshtml")

更多信息在这里：

Render partial from different folder (not shared)

---

好的，我意识到我误解了这个问题，并且 404 是由脚本调用而不是文件底部的 @Html.Partial 生成的。

我要通过 cmets 的这个 sn-p...

$.get("~/Views/Shared/TableContent").done(function (data) {        $("#TableContent").html(data); });

我在这里看到两个问题...首先是您将希望以不同的方式解决您的路径，因为“~”运算符不会在 javascript 中提供帮助。在这种情况下，您可以使用 @url.Action("TableContent") 来获取服务器上的实际 url 并将其传递给您的 get 语句。

第二个问题是我认为 TableContent 只是一个没有相应操作的视图。这对于使用 Html.Partial 进行内联渲染很好，但是服务器将无法在该上下文之外渲染它。您需要添加相应的操作并从您的 ajax 中调用它。

Answer 2

您的控制器Panier 似乎没有一个名为TableContent 的方法，它应该返回部分视图TableContent.cshtml。

此外，当您引用 url 时，请尝试在 ajax / get 调用中使用 Url.Action：

url: '/Panier/RemoveFromCart',

应该是：

url: '@Url.Action("RemoveFromCart","Panier")',

Answer 3

解决这个问题的另一种方法是在 Panier 控制器中创建一个动作 TableContent，它将调用部分视图 TableContent。 TableContent.cshtml 应与 Index 位于同一目录中（即 /Views/Panier）

public PartialViewResult TableContent()
{
    return PartialView("TableContent");
}

然后您需要在 ajax 调用中替换一行

$.get("/Panier/TableContent") 

变成

$.get('@Url.Action("TableContent", "Panier")')