Repeating Partial View in ASP.net MVC 4 - asp.net-mvc

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

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

Answer 2

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>