在ASP.net MVC 4中重复部分视图

时间:2014-06-09 10:53:15

标签: asp.net-mvc asp.net-mvc-4

伙计我正在尝试在我的测试网络应用程序上生成通知以学习MVC。这个功能与facebook的新闻源相同。我创建了一个通知模型,一个部分通知视图,并在控制器中执行存储过程以从数据库中检索值(SQL Server 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....

现在我该如何获得该功能?如何每次使用不同的值多次重复部分视图?

在上面的代码中,我只输入数据表的第0行来建模...我想动态地这样做,即改变每个局部视图的行数。我真的很感激一些帮助。

编辑: 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();
    }

}

2 个答案:

答案 0 :(得分:1)

将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

答案 1 :(得分:1)

你可以使用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>