Partial View returning null model

Question

Now I bet this is a problem that happens often, I just can't seem to find anything related to it, or notice myself what is wrong with it. The view provided at bottom always returns null on foreach line.

I'm making a simple currency list.

Model:

public class Currency
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Sign { get; set; }
    public float BuyValue { get; set; }
    public float MidValue { get; set; }
    public float SellValue { get; set; }

    public string CurrencyIcon { get; set; }

    [DisplayFormat(DataFormatString = "{0:dd MMM yyyy}")]
    public DateTime DateCreated { get; set; }
}

And it should be posted as partial view, on several different ways so to say. For example, partial view that will get all of them (for today), and partial view that will get random 6 (also for today).

I'm doing the first part now, all of them, for today.

Controller

public ActionResult FrontPagePartial()
{
    DateTime today = DateTime.Now.Date; //i'm filtering it by date only
    var currencies = db.Currencies.Where(c => c.DateCreated.Equals(today));

    return View(currencies);
}

I've checked the filtering it's working correctly. So my view goes like this:

@model IEnumerable<CurrencyList.Models.Currency>

<div id="currencyList_Partial">
    <div id="bg_currencyList_Partial">
        <img src="@Url.Content("~/Content/Resources/img.png")" />
    </div>
    <div id="header_currencyList_Partial">
        <div style="padding: 10px;">
            <p style="font-size: 18px;">
                Currency List<br />
                <span class="header_currencyList_Partial_Day">FOR TODAY</span>
            </p>
            <p class="header_currencyList_Partial_Link" >
                <a href="#">DETAILS ></a>
            </p>
        </div>
        <div id="table_currencyList">
            @foreach (var item in Model)
            { 
                <table>
                    <tr>
                        <td style="text-align: center;"><img src='@item.CurrencyIcon' title='@item.Sign' /><p style="font-size: small;">@Html.DisplayFor(modelItem => item.Name)</p><p>@Html.DisplayFor(modelItem => item.Sign)</p></td>
                        <td style="text-align: center;">@Html.DisplayFor(modelItem => item.BuyValue)</td>
                        <td style="text-align: center;">@Html.DisplayFor(modelItem => item.MidValue)</td>
                        <td style="text-align: center;">@Html.DisplayFor(modelItem => item.SellValue)</td>
                    </tr>
                </table>
            }
        </div>
    </div>
</div>

Parent view

@{
    ViewBag.Title = "Currency List Home Page";
}

@section HeadSection{
    <link rel="stylesheet" href="@Url.Content("~/Content/layerslider.css")" type="text/css" media="screen" />
    <link rel="stylesheet" href="@Url.Content("~/Content/defaultskin/skin.css")" type="text/css" media="screen" />
    <noscript>
        <link rel="stylesheet" href="@Url.Content("~/Content/noscript.css")" type="text/css" media="screen" />
    </noscript>
}

@section ScriptSection{
    <script src="@Url.Content("~/Scripts/jqueryui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/plugins.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/page.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/layerslider.kreaturamedia.jquery.js")" type="text/javascript"></script>
}
<div id="content">
    <div id="statusbar"></div>
    <div id="slider">
        <div id="layerslider">
            <div class="ls-layer" style="slidedelay: 3000">
                <img class="ls-bg" src="@Url.Content("~/Content/images/slider_gallery/slide1_layer1.png")" alt="layer" />
                <img class="ls-s2" src="@Url.Content("~/Content/images/slider_gallery/behind_text_layer.png")" alt="sublayer" style="durationin: 0; top: 247px;/*easingin: easeOutElastic*/" />
                <img class="ls-s3" src="@Url.Content("~/Content/images/slider_gallery/text_layer1.png")" alt="sublayer" style="durationin: 2000; top: 255px;left: 15px; easingin: easeOutElastic " />
            </div>
            <div class="ls-layer" style="slidedelay: 3000">
                <img class="ls-bg" src="@Url.Content("~/Content/images/slider_gallery/slide2_layer1.png")" alt="layer" />
                <img class="ls-s2" src="@Url.Content("~/Content/images/slider_gallery/behind_text_layer.png")" alt="sublayer" style="durationin: 0; top: 247px;/*easingin: easeOutElastic*/" />
                <img class="ls-s3" src="@Url.Content("~/Content/images/slider_gallery/text_layer1.png")" alt="sublayer" style="durationin: 2000; top: 255px;left: 15px;easingin: easeOutElastic " />
            </div>
            <div class="ls-layer" style="slidedelay: 3000">
                <img class="ls-bg" src="@Url.Content("~/Content/images/slider_gallery/slide3_layer1.png")" alt="layer" />
                <img class="ls-s2" src="@Url.Content("~/Content/images/slider_gallery/behind_text_layer.png")" alt="sublayer" style="durationin: 0;top: 247px;" />
                <img class="ls-s3" src="@Url.Content("~/Content/images/slider_gallery/text_layer1.png")" alt="sublayer" style="durationin: 2000; top: 255px; left: 15px; easingin: easeOutElastic " />
            </div>
        </div>
    </div>
    <div id="converter">
        <h2>CONVERTER</h2>
        <p class="shadowedText">
            VALUE:
        </p>
        <p>
            <input type="text" id="tb11" class="tb11" />
        </p>
        <p class="shadowedText">
            FROM CURRENCY
        </p>
        <div class="select1 select1p">
                <select id="select1">
                    <option>EUR - EURO</option>
                    <option> $  - DOLLAR</option>
                </select>
            <span class="selectArrow"><img src="@Url.Content("~/Content/images/select_arrows.png")" /></span>
        </div>
        <p class="shadowedText">
            TO CURRENCY
        </p>
        <div class="select1 select1p">
                <select id="select2">
                    <option> $ - EURO</option>
                    <option> EURO  - DOLLAR</option>
                </select>
            <span class="selectArrows"><img src="@Url.Content("~/Content/images/select_arrows.png")" /></span>
        </div>
        <div class="select1p addMargin">
            <span class="boldResult">100 EUR = 11710.55 $</span><br />
            <span class="lightResult">100 $ = 0.84882 EUR</span>
        </div>
    </div>

</div>

<div id="lowerContent">
    <div id="blog"><img src="@Url.Content("~/Content/images/vesti.png")" /></div>


    //This is where Partial View is rendered
    <div id="listC">@Html.Partial("FrontPagePartial")</div>


</div>

<div id="portals">

</div>

Answer 1

<div id="listC">@Html.Partial("FrontPagePartial")</div>

This is trying to render the partial view, FrontPagePartial, with the model of the parent view, which is not defined.

public ActionResult FrontPagePartial()

This creates an action so you can go, siteurl/controller/FrontPagePartial

---

What you need to do is

<div id="listC">@Html.Partial("FrontPagePartial", currencies)</div>

If you don't mind ViewBag, you can set ViewBag.Currencies in the Action method and

<div id="listC">@Html.Partial("FrontPagePartial", ViewBag.Currencies)</div>

Answer 2

The @Html.Partial just renders the html partial directly from the file view (in the Shared folder, not through the FrontPagePartial method in the controller) using the model that the parent owns. In your case Razor try to use the Model from the parent view but apparently you never defined it. That's the reason for the null object

@foreach (var item in Model) { ... } 

You want to call a partial view that returns another kind of object model; that's not possible with @Httml.Partial nor @Html.RenderPartial. Two solutions:

Ajax call:

$(document).ready(function() { 
    $.get('@Url.Action("FrontPagePartial")',null,function(data) {
        $('#listC').html(data);
    });
});

Using Html.RenderAction or Html.Action:

<div id="listC">@Html.RenderAction("FrontPagePartial")</div>

Don't forget to change the return in the FrontPagePartial method. Without this the result will be the list of currencies inside the layout page (you are returning a simple page, not a partial view):

public ActionResult FrontPagePartial()
{
....
return PartialView(currencies);
}