I have a view in which I have a DIV which opens up as a JQuery dialog. This DIV has many elements including buttons and static text (No element inside this DIV is assigned any data from any model and it's not making use of any Razor syntax). Now I want to move this DIV to
another page so as the make it reusable. So that this DIV can be used in other views. What is the best way achieve this? Should I be using MVC user control?
Please Suggest
Thanks
Put the whole DIV in a partial view in your Views/Shared-folder in MVC (or another folder if you want to) . Let's assume you call this file '_DialogView.cshtml'. You can call this partial view from your normal page as a partial view, like this:
#Html.RenderPartial('_DialogView')
keep the page in a seperate htm. then use jquery.load('mypage.htm'). you can also use hash function in load as well jquery.load('main.htm#divname')
You can also use declarative helpers. See chapter "Reusing #helpers across multiple views" in ScottGu's blog here.
MyHelpers.cshtml
#helper GiveMeInput()
{
<input type="text" name"something"/>
}
Usage
#MyHelpers.GiveMeInput()
Related
I am using MVC3, C# and Razor.
I have template paragraghs, which are stored and edited in the DB, like
"The sales data can be shown as follows: {SalesTable1}"
I would wish to substitute the {SalesTable1} bit with the result of some code(most likely razor) that iterates through the "Sales" class, ie
<table>
#foreach var item in Sales
{
<tr>
<td>#item.Product</td>
<td>#item.Sales</td>
</tr>
}
</table>
Code above may be not quite right, but it shows the idea.
In XSLT one would call a "template" with say a name of "SalesTable1".
What would be a good approach to solving this in Razor? BTW I am using a ViewModel where I can put my template data and my real data for processing by my View.
Thanks.
EDIT: I do not need {MySection} type tags(specifically) in the template if there is a better way of doing it. However it is important that "Admins" can edit the text around these tags within the application.
EDIT2: I have a main View which calls different Partial Views depending on different topic types. Within each Partial View I am hoping to replace the {tags} with the runtime #section templates which are also specificied in the Partial View. This seems not to work. I guess because "RenderSection" commands should appear in the Layout or parent View.
EDIT3: I think I would be better off using another RenderPartial from my Partial View. However I am unsure how I would replace the {myTable} tag with #{Html.RenderPartial("myTable");}.
<text>This is a test sentence. {myTable} After table </text>
to produce:
<text>This is a test sentence. #{Html.RenderPartial("myTable");} After table </text>
Finally I do have one issue with this approach in that if the "myTable" partial does not exist, or the {myTable} is misspelled ie {MyTablee} then the application would crash. I would want it to just carry on without running the Partial View.
You can use MVC3 Sections... they are defined as follows..
#section SideBar {
// Side bar code...
}
then when you need to render them, you simply call
#RenderSection("SideBar");
There is a great post by the GU here...
http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
I have sorted this now by using replacing the tags for Partial Views.
Many thanks.
I'm using ASP.NET MVC3 with razor engine.I want to apply css class on body tag according to page call.
I want to add class name in child page and it will affect on layout page which has body tag.
and don't want to use jquery because it execute after page render.
How can i do this?
While you may have full control of the HTML a solution was what was needed so here is one ;-)
In the _layout.cshtml page
<body class="#RenderSection("BodyClass", false)">
This will look for a section in all the child pages but says don't worry if it can't find one
Then in your child views just do this
#section BodyClass {productList}
Keep it on one line and then the outputted HTML will look fine, also you can then build up the class names as well.
#section BodyClass {productList generic}
This idea goes perfect with DOM-Ready page specific code, why not checkout
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
Or my extended version here
https://github.com/AaronLayton/H5BP-Core
My way lets you do page specific code, but allows you to keep all of the Javascript in separate pages so each page becomes easily manageable. The final step would be to concatenate and minify all the JS into 1 file ;-)
Aaron's answer above works great for MVC 3, but I found that MVC 4 chokes on the single line section statement:
#section BodyClass {productList}
Instead, you need to use:
#section BodyClass {#("productList")}
First of all jQuery's .ready function executes after the DOM is available so it's the optimal moment to start interaction with your page's elements. ( http://api.jquery.com/ready/ ) If you experience a behavior that results in styles 'flicker' you may wan't to apply display:none to body element, and removing it after you css class has been applied.
but if you really don't want to use jQuery you should consider either making a variable to hold your css class name as a part of a viewmodel your controller will be sending to Views, or going with ViewBag.CssClass that should be declared in each of your controller's actions (or in base controller's OnActionExecuting method.
Thing to consider here is understanding and following MVC pattern, where View and Business Logic should be separated. So in my opinion you should rather avoid involving controllers in view building process.
It's much easier to simply put the following in your main layout
<body class="#ViewBag.BodyClass">
Then in the content pages put:
#{
ViewBag.BodyClass = "myClass";
}
Problem solved!
Im using joomla MVC and I want to build a form that has different tabs which are different sections of the form with inputs in it. There are some tabs that are common to other forms that I need to include.
I would like to be able to load this common content from a separate file or view so i dont have duplicate code, plus is easier when I need to do a change to the form so I dont have to do it in all the forms. It's like displaying a view inside another view.
Is there a way to accomplish this?
A Joomla! provides the loadTemplate method to views.
So if you're currently in a tmpl file loaded for layout edit (ie. tmpl/edit.php ) you can call $this->loadTemplate('tab1'); and Joomla! will load the tmpl/edit_tab1.php file in the same view as your edit.php.
In that same view if you wanted to include say tmpl/other_tab1.php you would have to temporarily set the layout to other, eg. in one of our components during the Run template we need a tab from the Edit template, so we use:
<?php $this->setLayout('edit'); // This is ugly
echo $this->loadTemplate('plan');
$this->setLayout('run'); ?>
To load a template from another view alltogether, I think you would have to temporarily over-ride the view value, load the template then restore the view. eg.
$jinput = JFactory::getApplication()->input;
$jinput->set('view', 'other');
$this->loadTemplate('tab2');
$jinput->set('view', 'original');
NB: this last bit I haven't had time to test but it should work.
You can load a different template file for a different view manually, by simply requiring it. The following is for a view called "nameofotherview" with the layout "layoutname". If this is for an admin view use JPATH_COMPONENT_ADMINSTRATOR instead.
require(JPATH_COMPONENT_SITE . '/views/nameofotherview/tmpl/layoutname.php');
Remember that the data set up in the view class needs to be compatible with the main layout as well as the layout you're loading from elsewhere.
A side effect of doing this is that template overrides won't work. The loadTemplate function is doing a require but it checks the template paths for overrides first.
You can use vews in other views as described in Joomla documentation: Sharing layouts across views or extensions with JLayout
I've read a couple of articles on using asp.net mvc3 razor (which I am fairly new to). I have a couple of .cshmtl pages which are like shared content (e.g. header). They are basically just html pages with one or two divs etc.
To embed this in my main page, do I just use #renderPage("page address"). Do I also need a call to #renderbody? Do I need to specify the/a page in the layout property?
Thanksa
I would put the common elements in a layout (or perhaps a partial view rendered by the base layout). In fact, that's what I did in an application I am now building and it works quite nicely. The one issue is whether or not you need View Model data populated by the controller and passed to that partial view. I did, so I used a base controller and populated the common elements in the view model (all of those also inherited from a base class that had the common properties) and used sections and then in the sections renderered the partial view or not, depending on the view's need.
You can create a Partial View for each of these and call:
#Html.Partial("ViewName")
Or you can use sections, or this article on sections might help too.
As you may or may not know, ASP.NET accepts HTML tagging.
So why not include your .aspx file with the HTML include tag?
Here's how:
<!-- #include virtual="path to file/include-file.html" -->
Ex:
<!--#include virtual="header.aspx"-->
I do this all of the time when writing an ASP.NET website.
Just place it wherever you want the code, from the included page, to show up.
I want to display different navigation links based on the page that is loaded in my _layout.cshtml file.
I thought about checking the url and just calling Html.RenderPartial within an if block but that seems clunky.
Is there a way to control this with a controller?
If you truly need different navigation links on different pages then I think you should specify different layouts pages on these separate pages. These different layouts should then specify your _layout as their layout, making it the master layout
Ex:
_navlinks1.cshtml
#{
Layout = "_layout"
}
#RenderBody()
#section navlinks
{
#*create navlinks specific to current page*#
}
Then in your _layout page you can put #RenderSection("navlinks", false) where you want the navigation links to go.
But, if for some reason you need a distinct set of navigation links for every single page, then putting navigation links in your layout might not make sense. Might be better off having all your models inherit a base model with a list of items containing navigation link data. Then call a partial view that processes this data into the correct links in your views.