[英]Repeating Partial View in ASP.net MVC 4
伙计们,我正在尝试在我的测试Web应用程序上生成通知以学习MVC。 这有功能相同,Facebook的新闻源。 我已经建立通知的模式,通知的局部视图和控制器执行存储的程序来从数据库(SQL服务器2012)检索值。
现在我要做的是,在加载页面时,它应该显示3条通知(部分视图每次重复3次,每次使用不同的值),然后在滚动事件中应加载5条通知。
这是我的模型:
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; }
}
这是我的部分观点:
<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>
这是我的控制器:
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....
现在我该如何获得该功能? 如何多次重复使用不同值的局部视图?
在上面的代码,我只是进入的数据表来模拟零行......我想要做的每部分鉴于这种动态变化,即行。 我真的很感谢您的帮助。
编辑: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();
}
}
将List传递到主视图,然后像这样在循环中调用Html.RenderPartial
:
@model List<NameSpace.Models.Notice>
@forach(var item in Model)
{
Html.RenderPartial("YourPartialView", item)
}
部分视图:
@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>
您需要使用jquery和ajax来实现这一点,我在我的一个项目中实现了这一点,并制作了一个教程,您可以在这里看到:
http://developmentpassion.blogspot.com/2013/12/infinite-scroll-paging-in-aspnet-mvc-4.html
您可以使用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
});
});
});
部分观点
@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>
}
索引页:
<div id="mynotices">
//your notice
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.