I am looking at the nopCommerce source code. Somehow the front office page shows Categories, Manufacturers, Poll, Featured Product, Search etc... however I am just looking at the source code of the Index.cshtml and I can't see any code to do this. The source code of the Index is attached. The link to the demo page is http://demo.nopcommerce.com/
I was expecting the Index page to render partial views or will have the code to create these sections but nothing there.
Can anyone explain how nopCommerce renders the views?
Is there any docs to explain technical side of nopCommerce. I have read the user guide but it does not have any details.
#{
Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
<div class="page home-page">
<div class="page-body">
#Html.Widget("home_page_top")
#Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
#Html.Action("HomepageCategories", "Catalog")
#Html.Action("HomepageProducts", "Catalog")
#Html.Action("HomepageBestSellers", "Catalog")
#Html.Action("HomePageNews", "News")
#Html.Action("HomePagePolls", "Poll")
#Html.Widget("home_page_bottom")
</div>
</div>
This is nothing unique to nopCommerce, Html.Partial & Html.Action are normally used in all ASP.NET-MVC applications. Partial and Action act similarly to render reusable partial views. Only difference is that Partial works with current model, while Action retrieves additional data.
HomepageCategories, HomePagePolls etc views are located under Views > Catalog > HomepageCategories.cshtml inside NopCommerce application folder and if you'd like to change them, you can copy the View folder into your theme folder and edit it there so you don't have to modify original files.
Related
Just started learning Laravel not long ago and I've got a question about views.
I have a 2 view files (blade).
The one which shows the categories from database.
The other one is showing the results of as search in products.
I'd like to use them in the same view, in the first section would be the searcher area and the area below is where I would like to list the categories.
I tried a couple of things to make it work, but I'm not sure which is the right approach:
I made a function in a controller where I listed the categories and handled the search and sent that to the view, but i didn't like this approach because I'm handling two different logic in one function.
I tried to yield or #include the view file into the main view. I got an error, because the database query didn't happen that case. I think yield and include only available with static data.
So, I'm don't know how to handle that issue properly.
Can someone suggest me a solution for this problem?
Thanks the help in advance!
There can be several way.
You can try to fetch category data inside blade file.
So, for example, in category.blade, you can fetch category list from database.
Then it would be independent to other views file and controllers.
And you can include category.blade.php for example.
The second way, is to fetch category data via ajax.
In this case, you can not insert script in all pages of using category.
So, in this case, you can use template structure.
For example.
In template.blade.php
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
#stack('style')
#include('admin.layouts.head')
#include('admin.layouts.header')
#include('admin.layouts.page')
#include('admin.layouts.footer')
#stack('script')
</html>
In page.blade.php
<div class="page">
#yield('page-content')
</div>
In individual page,
#extends('admin.layouts.template' ,['menu'=>'coach'])
#section('insert-css')
your custom css content here
#endsection
#section('page-content')
Your page content here
#endsection
You must get $categories just once and pass $categories to all views (or views that need to category or just pass it to categories.blade.php).
for this goal, I suggest that create a partial blade called categories.blade.php and show all cateogories in it and include it wherever necessary, but before before that go to app/Provider/AppServiceProvider.php and in boot() method get categories and share it in categories blade that you created it, like below :
public function boot() {
// pass to first param, address categories blade
View()->composer('categories', function ($view){
// set a name for variable that get it in categories view
$view->with(['categories'=>$categories]);
});
}
If you would like to know more about subscriptions, visit this link or Laravel docs
The page that I'm working with has a couple tabs and the content of each tab is loaded in via ajax by requesting a partial view from the controller. The problem is that the partial view uses knockoutjs, so it is bound to a view model. In this particular scenario, the page is loaded up in its entirety first time through, so all of the bindings work fine. When you switch tabs, it requests a partial view and replaces the tab content area with the new page. When you switch back to the first tab, it'll successfully loads the partial, except it would appear that all of the knockout bindings have been lost so there is a lot of missing data.
I can't place the viewmodel declaration and model bind in the partial because jquery hasn't been loaded by that point. Or so it would seem ($ is not defined).
The view model is declared and bound on the main page that calls the partial view(s), not the partial view itself, so I thought the model would still be available and bind successfully, but it does not. I know I'm doing this wrong, and partial view are super wonky when it comes to javscript so I'm hoping to steal a bit of insight from you guys.
Here's the basic setup:
If you are able to bind to specific non-overlapping areas of the page, then you could choose to call ko.applyBindings(someViewModel, someDomElement) like in this answer: Can you call ko.applyBindings to bind a partial view?
However, if you have an overall view model bound to the page and then "islands" of content that are loaded via a partial that you want to bind later, then one option would be to go for something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html. So, you would set up a binding on the container of where your partial goes that tells Knockout to keep its hands off of that area. Then when you load the partial, you can safely call ko.applyBindings(someViewModel, innerContainer).
The binding might look like:
ko.bindingHandlers.stopBinding = {
init: function() {
return { controlsDescendantBindings: true };
}
};
and you would use it like:
<div id="outerContainer" data-bind="stopBinding: true">
<div id="innerContainer">
...load your partial here
</div>
</div>
Then, ko.applyBindings(someViewModel, document.getElementById("innerContainer"));
I am trying to figure out the best way to handle pages in our application like the dashboard, where there are a number of different panes with various bits of data in it.
The main issue is that the controller action becomes unwieldy when the page needs so much data. The client side can be broken up into partial views to make it more manageable, but all the data still needs to passed into the View to be distributed down to the partials. Or does it?
Obviously some of the panels could be loaded dynamically or something like that, but I was looking for the best approach besides loading individual piece of the page from the browser.
Have you considered using Html.Action in your view? You would pass enough data to the main view to enable you to give the required data to each of the child actions. The main action would render the main view which would call actions for each pane. Each action would be responsible for that pane, rendering its own partial view. Additionally, you could call back to each of the child actions directly from the client to update that pane dynamically via AJAX.
Here's an example with some mocked up actions of what your main view might look like.
<div class="left-pane">
#Html.Action("Summary", new { id = Model.ID } )
</div>
<div class="middle-pane">
#Html.Action("PendingItems", new { id = Model.ID, timestamp = DateTime.Now } )
</div>
<div class="right-pane">
#Html.Action("News")
</div>
I have two questions regarding partial views...
When to use Partial views vs #helper methods, i have used both
interchangeably and would like to get more consistent in their
usage. What do you guys do?
How do you reference a partial view from another area.
I have an area called admin and i have a partial view in the regular Views directory. How do i use it .. i have tried the following which dont work as it cant be found.
#Html.Partial(VirtualPathUtility.ToAbsolute("~/Views/ControllerName/_PartialView"),
Model)
other i have tried -
#Html.Partial("~/Views/ControllerName/_PartialView", Model)
I'm not sure if you mean Html helpers, or razor helpers when you say "helpers" In any case, I only create Html helpers when it's a small, idividual item like a control.
If you mean Razor helpers, then they are different from Partials in that you can call them like functions, passing whatever parameters you want. Partials are largely stuck with the "model" system (and of course Temp/ViewData/Bag.
It's all about how you want to work with the code.
As for your Partial. You have to include the suffix.
#Html.Partial("~/Views/ControllerName/_PartialView.cshtml", Model)
Since the questioner asked about areas here's how to do it in an area
#Html.Partial("~/Areas/Store/Views/Pages/Checkout.cshtml")
I am just giving specific and simple example of what I'm trying to do.
I need to be able to logoff from an area page using the partialview located in the main shared folder. Here's what I did:
At the area view I reference the partial view by
<div class="float-right">
<section id="login">
**#Html.Partial("~/Views/Shared/_LoginPartial.cshtml")**
</section>
</div>
At the Main shared folder where the _LoginPartial code was located I added {new = area ("")}, from:
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
to:
using (Html.BeginForm("LogOff", "Account", **new { area = "" },** FormMethod.Post, new { id = "logoutForm", #class = "navbar-right" }))
Hope that helps in some way!
Another option is to make the partial view you want to share between areas SHARED.
So you put it in the main ~/Views/Shared/ folder, e.g.
~/Views/Shared/_MyPartialView.cshtml.
You can then refer to it from any area by saying
#Html.Partial("_MyPartialView")
Make sure your Controllers in Areas have the [Area("MyArea")] annotation. As of this post, pulling in Partial Views from across Area boundries via Ajax div updates in ASP.NET Core works for me with Tag Helpers and #Html.ActionLink.
I've been using Codeigniter in order to get accustomed to the Model-View-Controller architecture, and to try and speed up the process of making and implementing sites.
I keep seeing references to "Partial Views" but can't find a definition for the term.
Can anyone tell me what a partial view is, and where it is used?
A partial view is just a sub-view that you can include in a parent view. Let's take a look at a common example:
// Controller:
$data['myvar'] = array('element1', 'element2', 'element3');
$this->load->view('myview', $data);
// Myview:
<ul>
foreach ($myvar as $var) {
$this->load->view('partialview', array('var', $var));
}
</ul>
// Partialview:
<li><?= $var ?></li>
This is useful to repeat content according to a list.
Note that nothing differs between a view and a partialview, it's just the way you include it that defines the term.
The best way to describe a "partial view" is to think of it as a template, it displays a chunk of html with Model data passed to it.
Good examples of where to use one would be where you plan on displaying the same html over and over, like a menu or a page header or even better yet use them to display content requested using ajax.
Basically you call an action on the controller that returns the partial view from lets say jQuery and then put the returned markup into a select or div tag. Here is an example of doing that from my blog easy ajax with aspnet mvc and jquery, yes I know it asp.net mvc not php and codeigniter, but the principal is the same.