How to add site navigation (ascx) to MVC _Layout.cshtml page - asp.net-mvc

I am migrating a WebForm asp.net project to MVC. I copied and pasted the masterpage content to the _Layout.cshtml page. Now I got the side panel for the site Navigation. In the Webform, as shown in the code below, the put the site navigation to the far left. I tried both the enf and ~/Views/SiteNavigation.ascx, but the site navigation control is not appearing when I load up the page. Just a blank left panel. Any help is appreciated.
<div class="horizontalTabBarContent" id="mainTabContent">
<enf:SiteNavigation ID="ISRNavigation" />
#*~/Views/SiteNavigation.ascx*#
<div id="main">
<asp:ContentPlaceHolder ID="ISRContent" >
</asp:ContentPlaceHolder>
</div>
</div>
</asp:Panel>

I gess you're looking for Html.RenderPartial helper.
In Razor syntax it will be:
#{ Html.RenderPartial("~/Views/SiteNavigation.ascx"); }

First of all,
A view in MVC is basic HTML code in which you can add razor syntax. The "Razor code" will be parsed server side and will generate html output to bind models, generate valid url etc.
Here is an example of what your _Layout.cshtml view might look like:
<div class="horizontalTabBarContent" id="mainTabContent">
<div ID="ISRNavigation" />
#Html.Partial("~/Views/YourPartialNavigationView") //Your navigation bar will be rendered here
<div id="main">
#RenderBody() //Body html code will be rendered here
</div>
</div>
MVC Projet don't support the asp:htmltags syntax

in MVC instead of web forms user control, you should use partial views and by using of Helper functions like RenderPartial and Partial you could render it througth your view !!
and also instead of using PlaceHolder you should use Section !
you can Google for both topics : partialView , Section

Related

How to get to partial views in ASP.NET Core 3.0

I have a Core 3.0 project using Areas and in an Area view I am trying to reference a partial view from the main project Views>Shared folder.
Project>Views>Shared>_layout_partial.cshtml << desired view partial.
Project>Areas>MyArea>Views>Index.cshtml << this view is trying to access the partial described above.
<div>
<div class="container-fluid">
<partial name= "~/Views/Shared/_layout_partial1.cshtml"/>
<partial name="~Views/Shared/_layout_partial2.cshtml"/>
<partial name="~/Views/Shared/_layout_partial3.cshtml"/>
</div><!-- container -->
</div>
This works fine when the main view is in Project>Views>Home>Index.cshtml but the partial view is not recognized all when the main view is in an area and no warnings or errors.
Is it possible to access this partial view from an area or do I have to do serious could duplication.
For partial, it is using Microsoft.AspNetCore.Mvc.TagHelpers, here are two options for you:
Change to use
#await Html.PartialAsync("/Views/Shared/_layout_partial1.cshtml")
If you prefer partial tag, you need to reference the Microsoft.AspNetCore.Mvc.TagHelpers by copying _ViewImports.cshtml from Views Folder to your Areas Folder

ASP.Net MVC page with a section that contains partial view being submitted as part of the form post?

I have a view that contains a partial view that is brought into a #section on the layout page.
How can I include the fields in that partial view in a section in the form collection on submission?
If I put it into the using(Html.BeginForm()){#section } the section does not get placed in the proper place on the form. If I don't include it in the using section the fields don't get submitted as part of the form collection.
Any way to make this work?
#using(Html.Beginform("MyMethod","home", FormMethod.Post)){
#Html.Partial(MyModel)
<input type="submit" value="continue"/>
}
#section LowerLeftBlock{
#HtmlPartial("partials/_additionalformfields")
}
And the layout page:
<div id="body">
#RenderSection("LeftBlock",false)
#RenderBody()
</div>
You could easily use jQuery to copy the additional fields into the form, either when the page is fully loaded or just before the form is submitted. Something like this might do:
<script type="text/javascript">
$(document).ready(function(){
$('#theform').submit(function(){
$("#lowerleftblock input").appendTo("#destinationform");
});
});
</script>
You would obviously need to adjust the css selectors in the sample code above for this to work.
You may want to
See the jQuery docs for more info on appendTo.
See the jQuery docs for more info on selectors.

asp.net mvc : multiple layout

I have a main layout(layout1) of my website as a start page and now I want to add another page(layout) that gets some information from user and then after saving the information in database render the main layout.
right now in start page :
Layout = "~/Views/Shared/_Layout.cshtml";
and in layout :
<div id="main" class="container">
#RenderBody()
#RenderSection("~/Views/AskGroup/_Layout1.cshtml");}
</div>
the error : Section not defined: "~/Views/AskGroup/_Layout1.cshtml". how should I add thid layout1 to the layout page? do I need to add a controller as well ?
Since it's basic HTML content, use RenderPartial instead:
#Html.RenderPartial("_Layout1.cshtml");

ASP.Net MVC3 and jQuery UI Tabs

I have created a HTML layout below with jQuery UI tabs
All the tab information are related to Employee
HTML Code:
<div id="tabs">
<ul>
<li>Details</li>
<li>Deparment</li>
<li>Salary Info</li>
</ul>
<div id="tabs-1">
<p>Some fiels here</p>
</div>
<div id="tabs-2">
<p>Some fiels here</p>
</div>
<div id="tabs-3">
<p>Some fiels here</p>
</div>
</div>
All i need is i want to keep this in MVC page.
Can i have all tabs in one View or i can use #Html.Partial? or PartialViewResult? for each tab.
Some time the user may update only Department information. Here i should save only that tab information.
I want all these tabs loaded at first time and not in on demand using ajax.
Can anyone suggest how can i organize my need in MVC?
Note: Also another thing is i want to use the same for Add and Edit employee. In case of Add Employee i should able to view only Basic Detail as enabled and other tabs in disabled mode. Once the user save basic detail other tab should get enabled.
View fragmentation:
You can do either single view, or split it on multiple partials. It doesn't really matter till they render necessary html.
To save information from each tab separately, wrap each tab content in <form />, so you'll have multiple forms instead of one.
To show next tab on submit, solution will depend on submit process. If you have synchronous Post(Get) then you'll have to pass pass tab parameter with Response and depend on response open next tab on DOM ready (use jQuery for that). Otherwise, if you submit tabs with ajax, you may switch tab in your handler.

How to render partial view in asp.net mvc 2 using Controller and Action?

<body>
<div id="header">
<div class="title">SPORTS STORE</div>
</div>
<div id="categories">
<% Html.RenderAction("Menu", "Nav"); %>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
This is a sample code from Steven Sandersons' book "Pro ASP.NET MVC Framework."
This code works with MVC V1 and MvcContrib. What it does, it renders a "Menu()" view of "Nav : Controller". Since ASP.NET MVC V2 includes the Partial() and RenderPartial() functionality, I tried to implement it, but this code doesn't work. I tried to modify it in several ways, but it seems there's no overload function that renders partial views, taking as parameters:
1) Controller name
2) View name
I'm sure I'm not the first person who is implementing RenderAction() in this way, so, there must be a workaround. Please help.
I found the problem. I always remove {controller}/{action} route and customize all my routes with lowercase REST like URLs. But for Html.RenderAction it is necessary to have such general route. I added that general route to the end of my routes list and it worked. – Mahdi Feb 22 at 14:42
Although i still don't understand, how EXACTLY this works, why is suck route nessesary, and what are route's constraints. Maybe i will do some research later.
RenderAction is in MVC2 (docs here). It sounds like you've changed your code to use RenderPartial instead which is completely different. Change it back to use RenderAction and you should be ok. If you don't have it in your version, perhaps you need to update to the latest beta?

Resources