I am in the process of converting my website from aspx to cshtml (Razor). This is going fine apart from an issue I have with my 2 or 3 column master pages and trying to convert these to a cshtml Layout Page.
In Razor I have basically created separate pages for all of my sections and am then calling these from the Layout Page using #RenderPage. Maybe this in itself is wrong? Basically what all the sections are displaying fine apart from the Main content section which is basically a wrapper for the 3 (or 2) columns that I wish to be displayed within this. I have tried various ways to do this but either just get the 1 main column displayed across the width of the page or get the column displayed above each other but the formatting of the other 2 is incorrect. I know all of the CSS etc works fine in aspx but I am obviously doing something wrong in Razor.
CSHTML New Layout Page
<body>
<div id="container">
<div id="top">
#RenderPage("~/Views/Shared/_Top.cshtml")
</div>
<div id="header">
#RenderPage("~/Views/Shared/_Header.cshtml")
</div>
<div id="nav">
#RenderPage("~/Views/Shared/_Nav.cshtml")
</div>
<div class="main">
#RenderPage("~/Views/Shared/_Main.cshtml")
<div class="columnVerySmall">
#RenderPage("~/Views/Shared/_ColumnVerySmall.cshtml", false)
</div>
<div id="columnLarge">
#RenderBody()
</div>
<div id="columnSmall">
#RenderPage("~/Views/Shared/_ColumnSmall.cshtml", false)
</div>
</div>
<div id="footer">
#RenderPage("~/Views/Shared/_Footer.cshtml")
</div>
<div id="scripts">
#RenderPage("~/Views/Shared/_Scripts.cshtml")
</div>
</div>
</body>
Old ASPX Master Page:
<div class="main">
<main role ="main" class="mainWrapper">
<div class="columnVerySmall">
<asp:ContentPlaceHolder ID="columnVerySmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnLarge">
<asp:ContentPlaceHolder ID="columnLargeContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="columnSmall">
<asp:ContentPlaceHolder ID="columnSmallContent" runat="server"></asp:ContentPlaceHolder>
</div>
</main>
</div>
I have managed to solve this by changing the Main section as shown in the code block below. I basically added the "Main" code to my layout and then #Render for the Columns. I don't really see how I can do this by having a separate page for "Main" and then calling it from the Layout Page using #RenderPage as I was originally trying. This is what I changed:
<div class="main">
<main role="main" class="mainWrapper">
<div class="columnVerySmall">
#RenderPage("_ColumnVerySmall.cshtml")
</div>
<div class="columnLarge">
#RenderBody()
</div>
<div class="columnSmall">
#RenderPage("_ColumnSmall.cshtml")
</div>
</main>
</div>
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
I have an ASP.NET MVC app. In my app, I have multiple layout files (~10). I have a block of HTML that is similar across the layout files. For that reason, I want to put it into a reusable control, because I anticipate some change will be needed to it.
On some of the pages that reference my layout files that use this control, I want to insert something into that a content area of the control. To demonstrate, imagine I have a layout file like this:
_Layout.cshtml
#** MY REUSED BANNER CONTROL GOES HERE **#
<div class="container">
#RenderBody()
</div>
Banner.file [not sure what to use]
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3">
#RenderSection("bannerContent", required: false)
</div>
<div class="col-lg-3">
Leave
</div>
</div>
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml"
}
<div>
Main content goes here
</div>
#section bannerContent {
<div>This goes into Banner.file</div>
}
The above code does not work. It is there to communicate the idea. From my understanding, a partial view won't work because partial's don't support sections. What are my options here?
If I could understand you need something like this.
Create _banner.cshtml in ~/Views/Shared.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
Hello
</div>
<div class="col-lg-3" id="banner_content"> // Here your page specific content will go
</div>
<div class="col-lg-3">
Leave
</div>
</div>
_LayOut.cshtml
#Html.Partial("_banner"); // Reusable banner html
<div class="container">
#RenderBody()
</div>
MyPage.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>
Main content goes here
</div>
#section Scripts {
$(document).ready(function(){
$('#banner_conten').html('Your dynamic part.');
});
}
I am not sure whether I understood your requirement completely or not. But check if it helps you.
EDIT: It would seem all I needed to do was add data-position="fixed" to the header and that ensured it was encapsulated by a separate wrapper than content.
According to the panels docs, a panel must be a sibling of the header, content and footer elements within a page. So this is my basic markup (heavily stripped down):
<body>
<div data-role="panel"></div>
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</body>
However, when JQM re-renders the DOM, it creates this:
<body>
<div data-role="page">
<div data-role="panel"></div>
<div class="ui-panel-content-wrap ...">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</div>
</body>
As you can see, it wraps the header, content and footer in the content wrap instead of just the content. How can I force it to behave correctly?
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.
I have the following _Layout.cshtml page that has a bunch of #Html.Action() calls to several partial views.
<div class="wrapper">
<div class="header">
<a style="text-decoration:none;" href="#Url.Action("Index", "Home")"><div class="logo"><p>fisharwe</p><span class="greenText float-right">:</span></div></a>
<div class="searchBar">
#Html.Action("Search", "Item")
</div>
<div id="hearGreenBar"></div>
</div>
<div class="pageContent">
#RenderBody()
</div>
<div class="rightColumn">
<div id="help">
<div id="allHelpContent">
<span id="helpIcon"></span> <span id="helpTitle">help</span> <span id="helpArrow"></span>
</div>
</div>
<div id="userPanel">
#if(!Request.IsAuthenticated)
{
<div id="loginForm">#Html.Action("Login", "User")</div>
<div id="registerForm">#Html.Action("Register", "User")</div>
<hr class="greyLine" />
<div id="recentlyViewedItems">
<div id="recentItemsTitle">
<span class="recentItemsIcon"></span><span class="theRecentTitle">Recently Viewed</span>
</div>
</div>
}
else
{
<div id="userInfoSummary">#Html.Action("Summary", "User")</div>
}
</div>
</div>
</div>
At the top you can see the #Html.Action("Seach", "Item") call which renders a search bar and allows users to search for items/categories/sub-categories...etc. I got this working now, but it generated a new problem! When the user searches for something, and the results are rendered, the Login and Register partials in the sidebar (userPanel) are displaying validation errors such as "Email cannot be empty". I understand that the View is rendered regardless of what partial posted back but there has to be a way to prevent that from happening... Do I have to get rid of partials and render everything into the _Layout.cshtml page? But in that case I need to make this page typed which will cause yet another issue... So what can be done? I'm open to any suggestions...
Thank you.
Do you have different forms for the search and what is in the "userPanel"?. You may want to make sure your search is doing a get and not a post.
#using (Html.BeginForm("Search", "YourController", FormMethod.Get))