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))
Related
I have searched this a lot on the internet and I am looking for a way in where to display a loading message while asp.net is moving from one page to another. I have tried the load method from JavaScript but it does not work for moving from one page to another so how can I do this when a search button is clicked.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<section class="search-sec">
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchLocation" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
}
If you are not using ajax then you could load the new page with a loading message and remove it when the load is complete. I used this one in one of my projects (https://ihatetomatoes.net/create-css3-spinning-preloader/). Basically you activate or deactivate adding a class to the html body.
In the view where I want to show it before anything else i put this:
<script>
$('body').removeClass('loaded');
</script>
and once everything is loaded :
<script>
//...other stuff
$(document).ready(function () {
setTimeout(function () {
$('body').addClass('loaded');
}, 500);
});
</script>
But you would still have time of wait before reaching the page, you should capture the search click and show the loader before leaving the first page.
Anyways I agree with Jerdine and daremachine, you would have more control loading with ajax the search results and showing them in the same page. Maybe is not possible so I hope the workaround works for you
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>
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.
Im new to using partial views in mvc and for some reason could not get this working
Notes.cshtml
#model IEnumerable<SI2.Models.DashboardNote>
#foreach (var item in Model)
{
<div class="col-lg-12">
<div class="well">
<p>#Html.DisplayFor(modelItem => item.Information)</p><br />
<p>#Html.DisplayFor(modelItem => item.DateCreate)</p>
</div>
</div>
}
This is where I'm trying to call the partial view in another controllers view
Home/Index.cshtml
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fc-agenda-view"></i> Notes</div>
<div class="panel-body">
#Html.Partial("~/Views/DashboardNotes/Notes.cshtml")
</div>
</div>
</div>
</div>
Notes controller
public ActionResult Notes()
{
return View(db.DashboardNotes.ToList());
}
Every time I try calling Notes.cshtml as a partial view I receive a System.NullReferenceException with "Object reference not set to an instance of an object" but if I run the view normally it runs perfectly. There is no relation between the two models of the controllers either.
Thanks for any help:)
The code below will render your partial with no notes, hence the null reference, because you have a foreach for null notes.
#Html.Partial("~/Views/DashboardNotes/Notes.cshtml")
There is no mechanism in Html.Partial that triggers a call to the server. You would have to do some type of ajax call in your partial to get notes if you load it in the manner you are now. The easiest way to go about this is to return the Notes in your parent view or page and pass in the model to your partial, see below:
#model MainViewWithNotes
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fc-agenda-view"></i> Notes</div>
<div class="panel-body">
#Html.Partial("~/Views/DashboardNotes/Notes.cshtml",MainViewWithNotes.Notes)
</div>
</div>
</div>
</div>
I am new to ASP/MVC and I am having trouble figuring out how to link a div to a page in HTML markup. This is the current link in pure HTML. I want to accomplish this, but in razor syntax
<div class="col-md-2">
<a href="ambulance.html">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
I've been looking into action links, but if there is a better way to accomplish this, I'm open to it!
Possible duplicate. I'll add a bit of explanation that pertains to the question since it has to do with Razor:
What your backend developer needs is Url.Action helper. This will let you route the link through the MVC framework.
So say:
<div class="col-md-2">
<a href="#Url.Action("Cars", "Ambulance")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
ASP.NET MVC: generating action link with custom html in it
Html.ActionLink method only creates anchor tags for some action method, you need Url.Action method. Using the rest of the markup is fine.
<div class="col-md-2">
<a href="#Url.Action("Index","Home")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>