19 CEO Dashboard Examples for Business Leaders
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Kapil Panchal - June 23, 2021
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
Table of Content
Partial view in Asp.Net MVC is a special type of view that returns the portion of view content. It is the same as user control of a web form application but the difference is partial view can be reusable in multiple views. It is used to help the duplication and reduce code.
ViewPart view is included with its copy of the ViewDataDictionary object available from the parent view so that partial view can access the parent view’s data.
Show in the figure how to create the view
Partial view is a mostly reusable component so it's good practice to create a partial view inside a shared folder. The Identity that provides the built-in for a partial view is LoginPartial view and is bind in a layout file.
To create a partial view, select, create as a partial view option
You can provide a partial view of parental views with the help of HTML help methods. There are three types of partial methods:
@Html.Partial()
@ Html.RenderPartial()
@Html.RenderAction()
@Html.Partial() method renders the partial view. It accepts a partial view name in the format of string as a parameter and return HtmlString
The @Html.RenderPartial () method writes the result directly into the HTTP response stream. That is similar to @Html.Partial () except that it writes HTML results to the response stream, making this method faster. Here is the @Html.RenderPartial code
@ Html.RenderAction () method uses the action method and gives results. Action method should be marked with the [ChildActionOnly] annotation and retrieve PartialviewResult using the PartialView () method.
To give a partial view using the RenderAction () method, first, create an [HttpGet] action method and use the ChildActionOnly icon as shown below.
public class HomeController: Controller { [ChildActionOnly] public ActionResult LoginMenu() { return PartialView("_LoginPartial"); } }
You can now call @Html.RenderAction () in your Structure code as shown below.
here are various ways to bind partial view and show it to a viewer. But what is the best way to capture a view that is part of improving the performance of our website?
There are several ways to bind the partial view to data from a database or static data. There are some examples to bind the partial view to data.
To Bind Some static data with the partial view as shown below
@Html.Partial(“MenuBar”)
We can also bind partial view directly from a model.
@Html.Partial(“Article” ,Model.Article)
We can also bind partial view with ViewBag.
@Html.Partial(“_Article” ,(double)@ViewBag.Name)
Binding all the partial views into one request. Try to get all the partial view data as an entity on an action result and restore the view with the model data. As in the following example, you can see that I need the latest Article and the Popular Article
public class ArticleViewModel { public ListRecentArticle { get; set; }; public List PopularArticle { get; set; }; }
But on the controller, I have utilized only one Action Result to get the data for both views.
public ActionResult GetArticle() { var model = new ArticleViewModel(); model.RecentArticle = _db.getRecentArticleList(); model.PopularArticle = _db.getPopularArticleList(); return View(model); }
It reloads the whole code in a single view, I transfer multiple partial views where data appears in a single request.
@model PartialViewDemo.ViewModels.ArticleViewModel @Html.RenderPartial("RecentPostPartialView", model.RecentArticle); @Html.RenderPartial("PopularPostPartialView", model.PopularArticle);
So as per the performance aspect, this way of using a partial view is not good. If we bind a single view it will not affect our website on a performance basis.
The best way is to tie multiple partial views into a single view using an Ajax call and provide all the partial views separately. Every partial view will make its request to retrieve data from the database and bind it with a partial view. Using an Ajax call, we can upload data without refreshing our page.
If we process a separate request for each view, then it will not affect the performance and loading of the site. The page will be loaded and the partial view will try to get the details in sync.
In this example, you create multiple partial views and make a separate request to retrieve data from the database.
public class RecentsController : Controller { private readonly IPostRepository _postRepository; private readonly ICategoryRepository _categoryRepository; public RecentsController(IPostRepository postRepository, ICategoryRepository categoryRepository) { _postRepository = postRepository; _categoryRepository = categoryRepository; } [HttpGet] public ActionResult RecentArticles() { var postEntity = _postRepository.GetPosts().OrderByDescending(x => x.PostUpdatedDate).Take(3).Select(x => new PostViewModel() { PostTitle = x.PostTitle, PostAddedDate = x.PostAddedDate, PostUrl = x.PostUrl, postCategory = _categoryRepository.GetSingleCategoryInfo(x.CategoryId) }); return PartialView("RecentArticles", postEntity); } [HttpGet] public ActionResult PopularArticles() { var postEntity = _postRepository.GetPosts().OrderByDescending(x => x.NumberOfViews).Take(3).Select(x => new PostViewModel() { PostTitle = x.PostTitle, PostAddedDate = x.PostAddedDate, PostUrl = x.PostUrl, postCategory = _categoryRepository.GetSingleCategoryInfo(x.CategoryId), NumberOfViews = x.NumberOfViews }); return PartialView("PopularArticles", postEntity); } }Jquery For Ajax
function LoadRecentArticle() { $.ajax ({ url: "/Recents/RecentArticles", contentType: "application/html; charset=utf-8", type: "GET", datatype: "html", success: function(data) { $("#RecentArticle").html(data) }, error: function() { $("#RecentArticle").html("Post Not Found") } }) } function LoadPopularArticle() { $.ajax ({ url: "/Recents/PopularArticles", contentType: "application/html; charset=utf-8", type: "GET", datatype: "html", success: function(data) { $("#PopularArticle").html(data) }, error: function() { $("#PopularArticle").html("Post Not Found") } }) } $(document).ready(function() { LoadRecentArticle(), LoadPopularArticle() });
By using this method, you can increase the performance of your website. The website gets fully loaded rather than waiting for the whole content to completely load.
Using a second method, we can upload our website faster. The website does not wait to upload all content using Ajax, our page is updated in accordance with the data exchange with the server and its update page without reloading whole the page.
Using this way, you can increase the performance of your website. Initially, the website will be loaded, and do not wait for the content that is still in the loading stage. So in short a website would simply get loaded without waiting for all the loading content.
Build Your Agile Team
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Clear insights mean smarter decisions, and this is what data storytelling does. It helps you speak a language that you quickly understand. Like for example, you are a CTO dealing with...