[RESOLVED]What is the purpose of a partial view in MVC 5?

Hello,

What is the purpose of a partial view in MVC 5?

I thought that one of the purposes was to display text/data on a web page that is already displayed.  It would do this without redisplaying the original web page leaving the original page the way it is.  Just display the text/data from the partial view page
at the end of the original page text/data.

I created a new C# Web Application for MVC 5 in Visual Studio Pro to test Partial Views.

I have been trying for days to make a partial view page display as I have explained above.  Yet, all that it does is display the partial page on a new web page.

Am I wrong in my interpretation of the purpose/functionality of a partial view?

I have included all of my code below.

Any help would be gratefully appreciated.

Thanks,
Tony

This my HomeController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PartialViewTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        public PartialViewResult PartialViewTest()
        {
            ViewBag.Message = "Your Partial View page.";

            return PartialView("PVTest");
        }
    }
}

This is my Home.Index page:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

    @Html.ActionLink("Click Here to do a Partial View Test", "PartialViewTest")

This is my Partial View(PVTest) cshtml page:

<div>
    <h2>
        This is the Partial View Test Page
    </h2>

    What is the purpose of a Partial View in MVC 5?
</div>

 

Hi,

The main function is to reuse the same view other .cshtml. So we do not need to create many of the same code. It’s a reusable purposes, or make a view more simple and manageable.

For example, I make a partial view for treeView, and the one partial view can be used for several different view and on diffrerent controller.

Have fun 

Hello Jannen.

Thanks for your help.

I did understand that as one of the purposes for partial views.

Does that mean a partial view will not do what I am expecting?

Thanks,
Tony

Refer to this:

http://stackoverflow.com/questions/472963/asp-net-mvc-viewresult-vs-partialviewresult

Also, I think what you want to do is just display PVTest as part of your Home Index page? To do this, just change

@Html.ActionLink("Click Here to do a Partial View Test", "PartialViewTest")

to

@Html.Partial("PVTest")

You dont need to have your PartialViewTest() action anymore.

You can certainly use partial views to load the page asynchronously using Ajax and specifying the target like this

 @Ajax.ActionLink("Click Here to do a Partial View Test", "PartialViewTest", new AjaxOptions { UpdateTargetId="partialdiv" })
 <div id="partialdiv"></div>

Just remember to add the unobtrusive ajax nuget package first

Hello Jed.

Thanks for your help.

I tried the @Html.Partial("PVTest") and that did work.  However, it does not give me a link to click.  That is something I need.  I only want to display the partial if the link is clicked.

I will also read your link.

Thanks,
Tony

Hello gunnarrisnes.

Thanks for your help.

This worked for me exactly the way I wanted.

I’m not sure of why the MVC Razor @Html.ActionLink does not work, but as long as this works, I will use it.

Now, I would like to allow the partial view to use the ModelData from the parent view.

Thanks,
Tony

Ajax is in general the tool to use when you want asynchronous loading. @Html.ActionLink is designed to pass in variables to the controller without keeping track of existing pages, and just let the controller decide where to go.

If you are loading the data with the parent view, a better design would maybe be to hide the items within the parent view, however, if you want to pass back an id or any other field to the controller for the partial view you can do that like this

@Ajax.ActionLink("Click Here to do a Partial View Test", "PartialViewTest", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "partialdiv" })

You can also pass back multiple variables separated by a comma { id = Model.Id, name = Model.stringname } The variable name has to be exactly the same as the input name in the controller

TGirgenti

I’m not sure of why the MVC Razor @Html.ActionLink does not work, but as long as this works, I will use it.

Based on one of the comments in the link I gave you, PartialViewResults are also like ViewResults only that it does not have a master page layout. That’s why when you click your link generated by @Html.Actionlink, it goes to a new web page.

Leave a Reply