I have an MVC3 C#.Net project. When I initially load my Web site, I want to route to an Index page and have the navigation tabs at the top of the screen be disabled until a selection is made. Once a selection is made, the site routes to a details page. I would then like to enable the navigation menu itmes. How can I do this? Pass a ViewBag around? Not sure
I think the problem is that Index page doesn't follow a layout of the rest of the website, therefore index page shouldn't use a master layout.
On your index page:
#{
ViewBag.Title = "Index page";
// Null or a custom layout
Layout = null;
}
<p>Your content below</p>
If you want to render a menu on some condition, then store menu in a partial view model, e.g. SiteNavigation.cshtml
You can then render this view based on some condition. E.g.
#if(true){
#{ Html.RenderPartial("SiteNavigation"); }
}
I found an answer to my question. #CodeRush's answer is cool, which I will use in another scenario. But I like the implementation, below, for my prticular situation. In the Object1Controller Index get Action, I added the below code:
ViewBag.Hidden = "hidden";
Then in the Details get Action, which is the Action called when a link is clicked on the Index view, I added this code:
ViewBag.Hidden = "visible";
Then in the _Layout.cshtml I added this code:
<li style="visibility: #ViewBag.Hidden">#Html.ActionLink("About", "About", "Home")</li>
Which renders as:
<li style="visibility: hidden">About</li>
or
<li style="visibility: visible">About</li>
In the other Controllers, I don't need to set the ViewBag.Hidden property since the default for the visibility attribute is "visible". For the other Controllers, the ViewSource shows:
<li style="visibility: ">About</li>
Which renders as visible
Related
Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.
I'm working on an ASP.NET MVC3 project. I'm using Twitter Bootstrap for my styling (not sure if that's important). The problem I have is that my Index.cshtml view of the Home controller has slightly different layout from the other pages (additional image navigation at the top which I don't show once the user select where he wants to go) but this is causing problems so I remove this part from the Index view to another partial view _ImageNavigation.cshtml and what I want to do is render the content of this partial view when Home/Index.cshtml is opened and I want to render it before the #RenderBody() also independently from it so I get the page the way I want it.
Right now in my _Layout.cshtml I have:
<div id="main">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">#RenderBody() </div>
<div class="col-md-2">
//some static content
</div>
</div>
</div>
So I have two ideas first - adding #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") right before #RenderBody() like :
<div class="row">
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
<div class="col-md-10">#RenderBody() </div>
which produces the effect I want, but as you may guess _ImageNavigation is rendered on every page which is not what I want. I want it only on my Home/Index.cshtml so I guess the maybe some kind of check could be made to see what view is loading and render _ImageNavigation only if it's the correct view. Something like :
if (LoadingView == Home/Index.cshtml)
{
#RenderPage("~/Views/Shared/_ImageNavigation.cshtml")
}
Of course the above is just pseudo code, I don't know if it's possible and how to make such a check. And also I wonder if there is a way to do it in the page itself. I tried to put #RenderPage("~/Views/Shared/_ImageNavigation.cshtml") directly in my Home/Index.cshtml but obviously this way the page is rendered as if the code is written directly in the View and not loaded explicitly.
Maybe there's other way. This seems like pretty standard problem but I don't seem to find a proper solution.
When you have a smaller number of exceptions I like to use Sections. Here is a very simlified example:
Layout:
#if (IsSectionDefined("Nav"))
{
RenderSection("Nav")
}
else
{
<nav>default nav</nav>
}
#RenderBody()
Page with alternative nav:
#section Nav
{
<nav>My alternate nav</nav>
}
<div>This is the body for RenderBody</div>
You can read more on Defining Default Content For A Razor Layout Section - Phil Haacked.
I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.
I am trying to do this to display a breadcrumb on a page:
#if (ViewContext.RouteData.Values["controller"] != "MainController")
{
<li>
#Html.ActionLink(ViewContext.RouteData.Values["controller"]
.ToString(), "Index",
ViewContext.RouteData.Values["controller"].ToString())
</li>
}
#if (ViewContext.RouteData.Values["action"] != "Index")
{
<li>
#Html.ActionLink(ViewContext.RouteData.Values["action"]
.ToString(), ViewContext.RouteData.Values["action"].ToString(),
ViewContext.RouteData.Values["controller"].ToString())
</li>
}
This works well to display "Controller" or "Controller > Action" (without the ">" - am using jBreadcrumbs to display a divider).
However, if my Action names are like ScheduleAppointment, for example, then it's displayed as "Controller > ScheduleAppointment" whereas I'd like it displayed as "Schedule Appointment" (i.e., a space is inserted).
Is it possible to do that in a #{} function on the page? Or do I have to write an extension?
In either case a code example would help greatly. Thanks.
You can create your custom attribute with "DisplayName" property and put it on your action. Then in view you can access current controller
ViewContext.Context
and get current action's custom attribute instance using reflection and get "DisplayName" property value.
Or you can set property in ViewBag and then use it in view.
I have a website and I want to link page1 to page2:
Page2
-has a submenu which displays information like this:
$("#element").click(function(){
$("#another_element").load("page3.html");
});
on Page1, I have links, and I want to know if it is possible to have a href="page2.html/call_ajax_function_from_page2" with the ajax call. How can i click on an element in page1 and go to page2 an call it's load() so that it displays the info as if an element from its submenu were clicked?
Thanks!
Additional info By clicking an element in page1.html i want to redirect o page2.html with certain ajax content loaded to it. page2.html is the one with ajax
More info: I want to do this because on page1 I have a carousel, and each button I want it to link to a completely different page, page2 to display info relevant to that carousel. I have already built that page2 and it loads content based on .load when a link from its submenu was clicked.
I may be wrong as your question is hard to understand, but I think you're looking for something along the lines of this:
$('#foo li a').each(function() {
$(this).click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#bar').load(href + ' #someContainer'); // Load the href + an ID.
});
});
So for example take this html:
<ul id="foo">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
If you were to click link 2, the preventDefault() will 'prevent' your browser location from changing (changing page) then you will store the attribute of that anchor link in a variable called href. Then finally you will load the contents of that variable into your specified div, in this case 'bar'.