partial view is not display back anything error 404 is generated

Question

I am trying to fix this problem I got an error 404 on the partial view path url: localhost:49259/Panier/TableContent. This TableContent is under the Panier folder. I can't figure out what is wrong with the URL.

Does the TableContent should be under this folder ViewModels instead since it is using this model @model Tp1WebStore3.ViewModels.ShoppingCartViewModel?

Thanks

TableContent.cshtml (partial view) from Panier

 @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>

Index.cshtml from Panier

 @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

You'll want to keep your partial view inside the view folder (not view models)... the specific subdirectory is up to you but I believe it will default to looking in shared.

I'd suggest specifying more of the URL when you call the partial view and see if that fixes your issue...

For Example:

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

More Info Here:

Render partial from different folder (not shared)

---

Ok I realize I misunderstood the question and the 404 was being generated by the script call not the @Html.Partial at the bottom of the file.

I'm going by this snippet from the comments...

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

I see two issues here... First is that you are going to want to resolve your path differently as the "~" operator isn't going to help in javascript. You can use @url.Action("TableContent") in this case to get the actual url on the server and pass it in to your get statement.

The second issue is that I believe TableContent is just a view without a corresponding action. This is fine for rendering inline with a Html.Partial, however the server isn't going to be able to render it outside of that context. You'll want to add a corresponding action and call that instead from your ajax.

Answer 2

Your controller, Panier, doesn't seem to have a method called TableContent which should return the partial view TableContent.cshtml.

Also, when you refer the urls, try to use the Url.Action in the ajax / get calls:

url: '/Panier/RemoveFromCart',

Should be:

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

Answer 3

Another way of solving this is to create an action TableContent in the Panier Controller which would call the partial view TableContent. The TableContent.cshtml should be in the same directory as Index (ie /Views/Panier)

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

You'll then need to replace a line in the ajax call

$.get("/Panier/TableContent") 

becomes

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