I am working on a DotNetNuke module that obviously uses web controls to show different pages.
I would like to have some shared content on all pages(web controls). In fact I am using bootstrap to render my menu items which it has a markup like this :
<div id="pageWrapper" class="active">
<div id="sidebar-wrapper">
my menu content
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
</div>
</div>
So what I really want is to have a way to have this markup in all of my web controls and to be able to put the control content in the page content section.
If I could use pages I would use a master page to achieve this but the question is how can I do the same with web controls ?
Related
I've been tasked with updating my company's website and one of the first things I've noticed that they have they drop down menu coded on each page (roughly 60) So the first thing I would like to do is create the menu once, and call it from each page, so that I don't need to create the same menu 60 times. I know in php I could just throw in an #include and everything would be fine, but the company has forbidden me from using php and I have to work with their aspx. After doing a little research I found that asp.net has the #RenderPage statement which looked like it would work, I tried it out in Visual Studio Express on a simple test.vbhtml program and everything worked fine. I then went to the company's Default.aspx page and tried it and instead of rendering my menu it just displayed the #RenderPage("_Menu.vbhtml") line and not the menu file. Thinking I messed something up, I commented out the entire page and left a simple program at the bottom
<html>
<head>
<title>Main Page</title>
</head>
<body>
#RenderPage("_test.vbhtml")
<h1>Index Page Content</h1>
<p>This is the content of the main page.</p>
</body>
</html>
and I still get the same results, It doesn't Render the page and just displays my command as if I had wrapped it in a p tag. What am I doing wrong? Is .aspx incompatible with #RenderPage? If so how would you recommend I go about bringing in a menu from an outside file
Go to Views > Shared and see if there is an _Layout.vbhtml, that is kind of your master page, if the menu is located in that then every page which uses the layout should display the menu.
Many MVC apps use the bootstrap theme out of the box, and the _Layout.vbhtml contains:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Exceptions", "Index", "Exceptions")</li>
<li>#Html.ActionLink("Output File","Index", "MasterFile")</li>
<li>#Html.ActionLink("Reports","Index","Reports")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
That sort of thing to render the menu across every page which uses the layout.
I believe you are making a big confusion between ASP, ASP.NET MVC and Razor view engine.
Simply put: #RenderPage won't work in .aspx. The page itself has to be a vbhtml file as a Razor view.
Or you may use <% RenderPage(...) %> with correct tagging.
I am new to ASP MVC.
Im trying to build a website with a header, footer, menu and a place to the main content.
What is the best approach for that?
Partial views, areas?
Thanks
Use layout.chtml file, This will work as Master page to your site and will be available for all your views.
For MVC3 you may see: ASP.NET MVC 3: Layouts and Sections with Razor
What are Layouts?
You typically want to maintain a consistent look and feel across all of the pages within your web-site/application.
ASP.NET 2.0 introduced the concept of “master pages” which helps
enable this when using .aspx based pages or templates. Razor also
supports this concept with a feature called “layouts” – which allow
you to define a common site template, and then inherit its look and
feel across all the views/pages on your site.
You can use partial views for Header and Footer. For most of my Asp.Net MVC Projects, I use partial Views in master page. You can add your menu in the header partial view.
<body>
<div class="contentdiv">
<% Html.RenderPartial("Header"); %>
<div class="row-fluid">
<div class="container containerbg" >
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% Html.RenderPartial("Footer"); %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
</body>
So, using the aspx rendering engine for the MVC3 framework, it is easy to define a section in the master layout page and insert html or asp code inside those sections that will appear on every page, like so:
On the master layout
<!-- Secondary content -->
<div id="content-secondary">
<asp:ContentPlaceHolder ID="NavigationSecondary" runat="server">
<% Html.RenderAction("Menu", "Navigation", new { #id = "nav-secondary"}); %>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphSecondary" runat="server" />
</div>
<!-- /Secondary content -->
You can see that a Menu is rendered inside the ContentPlaceHolder called NavigationSecondary. So on every page that I create, the menu is displayed by default and any other extra content is displayed below that.
Now, how would I interpret this in the Razor engine? I couldn't find much info online. I did find something that shows how to use default content. But would that default content be erased when inserted with content from another page?
Razor view engine allows checking (in _Layout.cshtml) if layout section has been implemented by views so with this you could mimic putting code inside ContentPlaceHolder.
<div id="content-secondary">
#if (IsSectionDefined("NavigationSecondary"))
{
Html.RenderAction("Menu", "Navigation", new {#id = "nav-secondary"});
#RenderSection("NavigationSecondary")
}
</div>
Hope this is what you are looking for.
I need to display a submission form inside a lightbox of an ASP.NET page.
If there is an error in the submission form such as user name not being unique, the postback then renders the ASP.NET page outside the lightbox.
How can I solve that problem?
Here is a code snippet of the .aspx page that includes the lightbox:
<...>
<p>
QunatumMotors is located in Detroit. Please use the link below to contact us.</p>
<p>
<!--START CONTACT FORM OVERLAY-->
<!-- first overlay. id attribute matches the selector -->
<a href="**../informational/contactform.aspx"** rel="#overlay" style="text-decoration:none">
> Click here to contact us
</a>
<div class="simple_overlay" id="form_contact">
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
</div>
<!--END CONTACT FORM OVERLAY-->
<p> </p><p> </p>
<...>
contactform.aspx is just a standard .aspx page with form fields, field validators, label to display errors (e.g. username not unique) and submit button.
When a postback occurs on contactform.aspx then (of course) it is rendered outside the lightbox. How can I display the postback of contactform.aspx inside the lightbox?
Thanks for your help!
The lightbox content isn't like another tab or window: it becomes part of the host page.
In other words, it incorporates the HTML generated by contactform.aspx into the host page's document object model (DOM). Activating the lightbox adds a form to the host page that posts to the contact page:
<html><body>
<!-- host page content here -->
<!-- contact form content -->
<form action="contactform.aspx">
<!-- text boxes, buttons, etc. -->
</form>
</body></html>
When the user submits, their browser issues a new request: a POST to contactform.aspx. That request returns the contact form's HTML.
There are several ways you might work around that:
Use ajax to perform the update asynchronously. (You might even be able to do this by using an UpdatePanel in contactform.aspx, but I don't use them much anymore and haven't though that through).
Convert contactform.aspx into a control (if you're using it in several places) and embed it in the host page.
At the end of the contact form's submit handler, redirect to the host page with a flag that instructs the page to immediately activate the lightbox. (This has numerous issues and sounds pretty fragile ... but it's plausible.)
I need to put two tabs on my aspx page (c#). Is there already done tabs control for aspx ?
Ajax has tabs you can use:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/tabs/tabs.aspx
jQuery also has tabs you could use, which in my opinion is the better choice:
http://jqueryui.com/demos/tabs/
In strictly ASP.NET you can use multiview, and make tabs, here is a tutorial for that:
http://www.codeproject.com/KB/custom-controls/TabControl.aspx
Bootstrap is commonly used with aspx so I used it on my webpage for tabs.
This is a tutorial page.
Please find below an example for two tabs:
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Settings tab</li>
<li>Information tab</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="settings">
</div>
<div role="tabpanel" class="tab-pane" id="info">
</div>
</div>
</div>
You need to have bootstrap.css and bootstrap.js references in page head section.
[Reposting my answer because 3 people felt the need to trash my first attempt. One person made it worse by making the URL opaque, so that you can't see it's w3schools.com, a known good tutorial site. Another criticized it for not providing context, like why its approach might be desirable. And a moderator deleted it summarily for none of the reasons I can see posts are supposed to be deleted. Go ahead and remove this commentary, but don't sandbag me and destroy my effort to help others from an ivory tower.]
If you want to send down all the tabs' contents and just have a locally (and instantly) swapped experience, I recommend https://www.w3schools.com/howto/howto_js_tabs.asp. You put your content in divs, and use just a tiny bit of JavaScript to swap out which one is visible. No extra/3rd-party component or framework, just simple HTML/JS that just works.
Super simplistic subset from the above: Content in divs like <div id="tab1">content</div>, then show one with document.getElementById("tab1").style.display = "block"; and hide the others with none instead of block.
There is no standard ASP.NET component, but you can use Microsoft's ASP.NET AjaxControlToolkit library.
Here is the component
You can create simple menus using CSS. This site shows you step by step how to create one, which you can then customise as required.
http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html