CODEWITHSUNDEEP
c#asp.netasp.net-mvc
YTE 1008
YTE 1008

Reputation: 47

Failed to load resource: the server responded with a status of 404 ()...After I right click and click on "INSPECT" on my view page I get this error

I am a beginner at MVC and trying to create a page. I have three tables in my database. I am using Entity Framework with a database-first approach and I created these three tables as classes in my Models folder. I also created a new class called AllClasses and defined each of this three classes in this new class.

I am trying to get 3 pictures from the tblCharacter tables' CharacterImageURL column.

When I run my code, the program is running without any error. So what is the problem?

The problem is I can not display these three photo on my view page. I will add some screenshots to show you problem more detailed. BY THE WAY I HAVE IMAGE URL'S ON THE DATABASE NOT THE IMAGES LIKE .jpg. What I have on my database is spmething like images/avatar/Chewbacca-icon.png I KNOW THERE ARE SIMILAR QUESTIONS BUT NONE OF THE SOLUTIONS WORKED FOR ME...

This is my controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using StarWars.Models;

namespace StarWars.Controllers
{
    public class HomeController : Controller
    {
        StarWarsFunClubDBEntities myobject = new StarWarsFunClubDBEntities();

        public ActionResult Index()
        {
            var myclass = new All();
            myclass.Characters = myobject.tblCharacters.ToList();

            return View(myclass);
        }

        public ActionResult SWHome()
        {
            var myclass = new AllClasses();
            myclass.Avatars = myobject.tblAvatars.ToList();
            myclass.Characters = myobject.tblCharacters.ToList();
            myclass.Comments = myobject.tblComments.ToList();
            return View(myclass);
        }
    }
}

This is my home page SWHome.cshtml:

@model StarWars.Models.AllClasses

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SWHome</title>
    <link rel="stylesheet" type="text/css" href="~/Content/css.css" />
</head>
<body>
    <div class="box">
        <div class="header">
            <div class="logo"> <img src="~/images/Star_Wars_Logo.png" alt="Alternate Text" /> </div>
            <div class="sitename"><h4>Star Wars Fun Club</h4></div>
        </div>
        <div class="question"><h5>What do you think about the new characters of Star Wars: The Force Awakens(2015)?</h5></div>
        <div class="photo">
            @foreach (var item in Model.Characters)
            {   
                <div class="innerphoto">
                    <img src="@item.CharacterImageURL" alt="" />
                </div>
            }

        </div>
        <div class="comment"></div>
        <div class="addcomment"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

These are my auto-generated classes:

namespace StarWars.Models
{
    using System;
    using System.Collections.Generic;

    public partial class tblAvatar
    {
        public int AvatarID { get; set; }
        public string AvatarName { get; set; }
        public string AvatarImageURL { get; set; }
    }

    public partial class tblComment
    {
        public int CommentID { get; set; }
        public string Expression { get; set; }
        public System.DateTime DateTime { get; set; }
        public int AvatarID { get; set; }
    }

    public partial class tblCharacter
    {
        public int CharacterID { get; set; }
        public string CharacterName { get; set; }
        public string CharacterImageURL { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using StarWars.Models;
using StarWars.Controllers;
using System.Data.Entity;

namespace StarWars.Models
{
    public class AllClasses
    {
        public IEnumerable<tblAvatar> Avatars { get; set; }
        public IEnumerable<tblCharacter> Characters { get; set; }
        public IEnumerable<tblComment> Comments { get; set; }
    }
}

This is my view (SWHome) where I want to show the photos:

enter image description here

This screenshot shows the problem at the bottom:

As you see,in the HTML <div class="innerphoto"> part image sources can be seen but I can't get them on my view page...So I think the problem is not with the DB connection...

As you see, in the HTML <div class="innerphoto">, image sources can be seen but I can't get them to be displayed on my view page. So I think the problem is not with the DB connection.

This is my solution explorer:

enter image description here

I have new screeshoot for the one who interested in: The red ones are the photos which I could not be able to display on my view page...Maybe this would help for one of the guys who trt to solve the problem.

Upvotes: 0

Views: 2840

Answers (1)

Rohan Rao
Rohan Rao

Reputation: 2603

Problem is here:

<img src="@item.CharacterImageURL" alt="" />

You cannot access the image from root directory (i.e. wwwroot) directly.

Try this:

<img src= "@Url.Content(Model.YourImageLocationPropertyHere)" />

Url.Content is used when you wish to resolve a URL for any file or resource on your site and you would pass it the relative path.

Hope this helps.

Upvotes: 1

Related Questions