繁体   English   中英

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

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM