加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

asp.net-mvc-3 – 如何用另一个替换局部视图?

发布时间:2020-12-16 03:34:26 所属栏目:asp.Net 来源:网络整理
导读:我想显示“最新新闻”文章列表,并点击“阅读更多”链接,以显示所点击文章的完整内容.为此,我在Index.cshtml视图中使用局部视图.第一次显示“索引”视图时,将使用文章列表填充局部视图.我想要的是:重复使用相同的局部视图来显示完整的文章,点击. 出于某种原
我想显示“最新新闻”文章列表,并点击“阅读更多”链接,以显示所点击文章的完整内容.为此,我在Index.cshtml视图中使用局部视图.第一次显示“索引”视图时,将使用文章列表填充局部视图.我想要的是:重复使用相同的局部视图来显示完整的文章,点击.

出于某种原因,我无法做到这一点,我不明白为什么.使用调试器和Firebug,我可以捕获没有错误.此外,应用程序遍历所有步骤,甚至似乎显示_Details局部视图,但实际上,在屏幕上仍然是列表.

谢谢你指出我的错误.

编辑:

我在_Layout.cshtml中引用了所有必需的脚本:jquery-1.8.2.min.js,jquery-ui-1.8.24.custom.min.js,jquery.ui.core.min.js,jquery.validate. min.js,jquery.validate.unobtrusive.min.js和jquery.unobtrusive-ajax.js以及web.config中的“UnobtrusiveJavaScriptEnabled”=“true”.

Index.cshtml

@model MyApp.ViewModels.NewsViewModel

<div id="content" class="content_style"> 
   <text>Some static content</text>
   <div class="active_part">
        @Html.Partial("_List",Model.NewsList)
   </div><!-- end active_part -->
</div><!-- end content -->

_List.cshtml

@model IEnumerable<MyApp.Models.News>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "active_part",InsertionMode = InsertionMode.Replace }))
{
    foreach (var item in Model)
    {
    <h2 class='title">
    @Ajax.ActionLink(item.Title,"Details","News",new { id = item.News_ID },new AjaxOptions { UpdateTargetId = "active_part" },null)
        </h2>

        <div class="body">
            @Html.Raw(item.Body)
            @Ajax.ActionLink("Read more",null)
    </div>
    }
}

_Details.cshtml

@model MyApp.Models.News
@using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId = "active_part",InsertionMode = InsertionMode.Replace }))
{

    <div class="single">
        <h2 class="title">@Model.Title</h2>
        <div class="entry-content">
            @Html.Raw(Model.Body)
        </div>
    <div class="clear"></div>    
    </div>
}

视图模型

public class NewsViewModel
{
    // Properties
    public News CurrentNews { get; set; }
    public List<News > NewsList {get; set;}

    // Constructor
    public NewsViewModel() { }

    public NewsViewModel(News pCurrentNews,List<News> pNewsList)
    {
        CurrentNews = pCurrentNews ;
        NewsList = pNewsList;
    }
}

调节器

public ViewResult Index()
    {
        return View( new NewsViewModel(null,repository.FindAllNews()));
    }

    public ActionResult Details(long id)
    {
        News article = repository.FindAnArticleByID(id);
        return PartialView("_Details",article);
    }


    public ActionResult ListNews()
    {
        return PartialView("_List",repository.FindAllNews());
    }

解决方法

在Index.cshtml视图中:

<div class="active_part">

应该:

<div id="active_part">

在AjaxOptions中指定UpdateTargetId =“active_part”时,它正在查找id =“active_part”的DOM元素,而不是class =“active_part”.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读