Repeating Partial View in ASP.net MVC 4

Question

Guys I am trying to generate notices on my test web application for learning MVC. This has functionality same as facebook's newsfeed. I have created a model of notice, a partial view of notice and executing a stored procedure in controller to retrieve the values from database (SQL server 2012).

Now what I want to do is, upon loading the page, it should display 3 notices (partial view repeated 3 times with different values each time) and then on scroll event it should load 5 more notices..

This is my model :

public class Notice
{
  public string Subject { get; set; }
  public DateTime Date { get; set; }
  public string Department { get; set; }
  public string Body { get; set; }
  public string NoticeImage { get; set; }
  public string Icon { get; set; }
}

This is my partial view :

<article class="feed payroll new" data-slide="items1">
                    <div class="sideicon"><img src="@Model.notice.Icon" alt="payroll" width="52" height="52"></div>
                    <section>
                        <header>
                            <h3> @Model.notice.Subject</h3>
                            <p><span> @Model.notice.Department</span> | @Model.notice.Date </p>
                        </header>
                        <article>
                            @Model.notice.Body
                            <br />
                            <img src="@Model.notice.NoticeImage" width="100" height="100"/>
                        </article>
                    </section>
                </article>

This is my controller :

Query = "uSP_GetNotices";
cmd = new SqlCommand(Query, Connection);
cmd.CommandType = CommandType.StoredProcedure;
DataTable dtNotice = new DataTable();
Connection.Open();
dtNotice.Load(cmd.ExecuteReader());
Connection.Close();
Notice objNotice = new Notice();
objNotice.Subject = dtNotice.Rows[0]["Subject"].ToString();
objNotice.Date = Convert.ToDateTime(dtNotice.Rows[0]["IssueDate"]);
objNotice.Department = dtNotice.Rows[0]["Department"].ToString();
objNotice.Body = dtNotice.Rows[0]["Body"].ToString();
objNotice.NoticeImage = dtNotice.Rows[0]["NoticeImage"].ToString();
objNotice.Icon = dtNotice.Rows[0]["Icon"].ToString();
//returning Main view....

Now how do I go about getting that functionality ? how do I repeating partial view multiple times with different values each time ?

In the above code, I am only entering row 0 of datatable to model...I want to do this dynamically i.e. change rows per partial view. I would really appreciate some help.

EDIT : NoticeUserWrapper

public class NoticeUserWrapper
 {
    public User user;
    public List<Notice> noticeList;
    public NoticeCount noticeC;

    public NoticeUserWrapper()
    {
        user = new User();
        noticeList = new List<Notice>();
        noticeC = new NoticeCount();
    }

}

Answer 1

You can do using ajax:

//you method on the controller
    public ActionResult GetNotice(Param param)
    {
       //retrive notice
       IList<Notice> viewModels = GetNotices();
       return PartialView("_NoticePartial",viewModels)
    }

JavaScript:

$(document).ready(function()
{
    //ID of your div
   $("#mynotices").scroll(function() {
      var param = "your param";
      $.post("/Notice/GetNotice",{param: param}, function(data) {
             $("mynotices").append(data);//append all notice retrieved from your controller
      });
   });
});

the partial view

 @model IList<Notice>

    @foreach(item in Model)
    {
    <article class="feed payroll new" data-slide="items1">
                        <div class="sideicon"><img src="@Model.notice.Icon" alt="payroll"    width="52" height="52"></div>
                        <section>
                            <header>
                                <h3> @item.notice.Subject</h3>
                                <p><span> @item.notice.Department</span> | @item.notice.Date </p>
                            </header>
                            <article>
                                @item.notice.Body
                                <br />
                                <img src="@item.notice.NoticeImage" width="100" height="100"/>
                            </article>
                        </section>
                    </article>
    }

Index page:

<div id="mynotices">
 //your notice
</div>

Answer 2

Pass the List to main view and then in loop call Html.RenderPartial like this:

@model List<NameSpace.Models.Notice>

@forach(var item in Model)
{


Html.RenderPartial("YourPartialView", item)

}

Partial View:

@model NameSpace.Models.Notice

<article class="feed payroll new" data-slide="items1">
                    <div class="sideicon"><img src="@Model.notice.Icon" alt="payroll" width="52" height="52"></div>
                    <section>
                        <header>
                            <h3> @Model.notice.Subject</h3>
                            <p><span> @Model.notice.Department</span> | @Model.notice.Date </p>
                        </header>
                        <article>
                            @Model.notice.Body
                            <br />
                            <img src="@Model.notice.NoticeImage" width="100" height="100"/>
                        </article>
                    </section>
                </article>

UPDATED:

You need to use jquery and ajax to achieve this, i implemented this in my one project and made a tutorial you can see here:

http://developmentpassion.blogspot.com/2013/12/infinite-scroll-paging-in-aspnet-mvc-4.html