I'm new in SailsJS so i have a question about rendering partial views.
I've came from .NET world and partial views in ASP.NET MVC are much more clever than in sails. In .NET MVC i can provide some controller as partial view path and this controller will be executed and partial view will be rendered with that controller data.
For example I want to show some account info in the corner of my website. So in .NET i can call partial view, providing controller path, this controller will query account info, provide it to partial view, and then this result will be inserted to main view.
In Sails i can call partial view, but all data (locals) for partial view will be pushed there from main view. So i have to put account information in every controller in application?
How can i solve this problem?
In other questions i've found that I can take username from req.session but it does not solve all cases. How can i show three random topics in page footer for example?
I think you are looking at the wrong place about the partial views.
This is a front-end problem .What I use for such partial views is Angular UI-router . Actually I am not sure if using angular is in the scope of the solution for you,So I'll keep this short . If you feel my method is useful ,you can comment it ,and I'll elaborate further on how to do it .
Depends on the template engine, that you use.
With ejs you can use <%- include('someview') %> or <%- include('someview', { mydata: { foo: bar} }) %>
The latter allows the include file to be called several times with diff data. E.g. <%- include('someview', { mydata: foo }) %> will copy foo (from locals) to the mydata key. This will be added to locals, so all other locals are available too.
As for providing the actual data, you can use a sails service. Just add data to res.locals.myKeyForTheInclude.
You will have to call the service each time.
But you can add it in config/http as a middleware.
middleware: {
myFoo: myService.myFunc,
order: [
...
'myFoo', // before router
'router',
...
],
All that is left is that each template needs the include.
You can not avoid that, only the template knows where the include should be.
But if you use a layout, that maybe it fits into the layout.
Related
I'm currently making a web application with Asp.net MVC 5 (.Net Framework 4.6) and AngularJS 2.0 .
I take care the back-end and my friend takes care the front-end.
Now, he sends me 3 js files, 1 html file.
Can anyone help me to import those file to MVC 5 please ?
Thank you,
I´m assuming you are new to MVC...
Create a new MVC project.
Copy your js files to Scripts. (Drag from explorer to visual studio)
The best way to go with js is to make a bundle:
In app_start, open BundleConfig.cs
Create a new Bundle like this:
bundles.Add(new ScriptBundle("~/bundles/mybundle").Include(
"~/Scripts/myjs1.js",
"~/Scripts/myjs2.js",
"~/Scripts/myjs3.js"));
Now to render this bundle, open Views->Shared->_Layout.cshtml
Go to the bottom, find #Scripts.Render("~/bundles/jquery")
Add your bundle: #Scripts.Render("~/bundles/mybundle") Now, your js is available to all pages.
We need to create a controller. Right click Controllers folder -> add -> Controller
Select MVC5 Controller Empty.
Give it the name you like for this page.
You will see this:
public class testeController : Controller
{
// GET: teste
public ActionResult Index()
{
return View();
}
}
11. Right Click the Index in the code -> click in add View
12. VS will open the view. Paste your HTML here.
You are good to go!
Things to keep in mind 1 - ROUTES:
MVC default route (URL) is /controller/Action/id
In the example above, your url will be: /teste or /teste/index because it´s the controllers name.
If not provided MVC uses Home as controller name and Index as action name and id is optional.
So, if your page is the home page for the site put it in the Views -> Home -> index.cshtml
Things to keep in mind 2 - BUNDLES:
Bundles are available for all pages, if you need your js in only one page, to this:
Open your View, go to the bottom of the file and do this:
#section scripts{
<script src="~/Scripts/js1.js"></script>
<script src="~/Scripts/js2.js"></script>
<script src="~/Scripts/js3.js"></script>
}
Things to keep in mind 2 - LAYOUT:
MVC works divides your content into 2 files, stuff common to all pages, like navigation bar, footer, css and js calls reside in:
Views -> Shared -> _Layout.cs
Views are the changeable content in the middle of the page, look for the method #RenderBody() in _Layout.cshtml to find where your view will be rendered.
Maybe you will have to divide your friend´s html to have some in _layout and some in the View. This is quite common.
Good luck and Happy Coding!!
Sure,
Create an ../app folder and drop the js files
The html file you have, I suggest you copy paste its content into a razor view, ../Views/App/MyPage.cshtml
Then create a c# controller that will return that view AppController
public class AppController : Controller
{
public ActionResult MyPage()
{
return PartialView();
}
Like this https://github.com/victorantos/AngJobs/blob/master/AngJobs/Controllers/AppController.cs
Another important note, make sure your router is configured properly, like this
https://github.com/victorantos/AngJobs/blob/master/AngJobs/App_Start/RouteConfig.cs
I have some partial views loaded at runtime, based on user input.
$("#Categories").change(function () {
$.ajax({
url: "/Product/Create" + $("#Categories option:selected").text().replace(/\s+/, ""),
type: "Get"
}).done(function (partialViewResult) {
$("#partialDiv").html(partialViewResult);
});
});
The POCO's that are used in the view model are decorated with data annotations, but they are not triggered.
The partial views each contain a form (Html.BeginForm()).
I guess I'm doing something wrong, but not sure what. Any advice greatly appreciated.
Just Include JS files i.e Jquery Unobtrusive js file in your Partial View also then it work fine ,some times this problem comes in partial view in asp.net mvc.
Just include this js file in your Partial View also :
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
------------------OR try this in Partial View--------------------------
$.validator.unobtrusive.parse($("form"));
try this if you are appending form in html
var formid = $("#frmAddProduct");
formid.unbind();
formid.data("validator", null);
$.validator.unobtrusive.parse($("#frmAddProduct"));
OR use in partial view on document ready
$.validator.unobtrusive.parse($("form"));
I need to define the skeleton for my node.js app with a menu that needs to be different for logged and anonymous user.
I think that the correct way should be the use of partials (i use Express 2.5) but i don't know how to pass data from the app and the partial. Do i need to add a condition in the layout to embed loggedPartial.ejs or anonymousPartial.ejs?
I'm sure there must be a cleaner way to do it.
In your route:
res.render('main', { menu : 'loggedPartial' }); // or 'anonymousPartial'
Your main template:
<%- partial(menu) %>
No need to use a conditional statement, menu is expanded dynamically during rendering.
I need to do the following,
I have a <select> (a list of team names), when the user selects a team, I get relevant information re: the team and display it.
How do I do this in jade?
I'm trying the following, (but I'm wrong obviously, I don't see a lot of documentation out there).
Briefly, I'm doing a include test.jade on my main page, and a res.render('test', {team: team_obj});
jade:
h1 #{team}.name
h2 #{team}.homeGround
h3 #{team}.manager
h4 #{team}.aka
nodejs:
collection.findOne(query, function(err, team_obj){
res.render('test', {team: team_obj});
});
I'm getting the information correctly in team_obj.
Get the following error when I run the app,
team is not defined
Now this is happening because test.jade is getting rendered before I feed it the team_obj.
Questions:
1) Am I doing this right? is include the correct way of partially rendering jade views? if yes, how do I make sure it renders only when the user has selected an option?
2) Is there a partial views concept in jade I'm unaware of?
1) you should use #{team.name}
2) you can't change the team object once the selector is changed. the template was rendered once with the database result. - such functionality should be handled by client side JavaScript and AJAX calls. partials in templates are just a way to share common pieces of templates, and its done in Jade via include.
I don't know what you're rendering and including and when.. but id you use a template variable like #{team.name} you have to make sure that the template was rendered with the team object.
I've created a web site using Asp.Net and the Razor view engine (which is the same as using WebMatrix). Up to now, I've been using SQL to query databases directly, but now I have a page which needs to query a WCF service that returns XML (getting that to return JSON or ODATA maybe is for a separate question).
On doing this, I was looking at the best way to do this, and it seems that jQuery may be the answer (unless you have other thoughts).
The problem is I'm using SiteLayout using the Layout="~/SiteLayout.cshtml" and I can't work out how to override or insert extra information specific to this page into the head tag that is in the SiteLayout, such as the script I need to add?
I'm pretty sure I'm thinking about this wrong, so if anyone has the answer to point me in the right direction, that would be great.
Thanks in advance for any assistance.
You can to define a Head section in the child pages:
#section Head {
<script> ... </script>
}
You can then call RenderSection("Head") in the <head> in the layout page to render this section.
You may want to pass , required: false.
For more information, see ScottGu's blog post