I have 2 separate solutions. I want to load one of project#1's content from its view in an iframe in project#2. The problem is inside the iframe, it also includes everything in its layout view (the header/footer,etc)
How can I load just the view? (while still using its controller) in the iframe?
If you don't need the layouts then you have to return partial views from those controller actions.
Ex.
return PartialView("ViewName");
In your _Layout view You can generate target link with your IFrame like:-
<li>#Html.ActionLink("Contact", "Contact", "Home", null, new {target ="MainiFrame"})</li>
and in your Content section (in _Layout view) like:-
<section class="content-wrapper main-content clear-fix">
#RenderBody()
<iframe name="MainiFrame" src="" width="920" height="1000" frameborder="0"></iframe>
</section>
Then any view that you like to display in your IFrame you can write the following code in the upper corner of that view.
#model YourProgramName.YourModelClass
#{
Layout = null;
ViewBag.Title = "Your View Title";
}
#* Rest of your codes and mark ups.......... *#
Telling that your view not to use the default Layout, other wise your view will load all of your _Layout elements like menus, banners etc.
Enjoy.
Related
I work on mvc 5 project.
On my _Layout.cshtml I have html element named id="topBar" this element displayed in each page.
But I have page named About.cshtml I don't want this page to display only element id="topBar" all other html elements in _Layout.cshtml I want them to be displayed normal in About.cshtml.
Any idea how can achieve described appearance above?
One simple way of achieving this (without javascript), is to set a value in ViewBag inside your about Action and use it in layout like this:
_Layout.cshtml
#if (ViewBag.ShowTopBar ?? false)
{
<div id="topBar">
</div>
}
Action inside your Controller:
public class MyAwesomeController : Controller
{
public ActionResult About()
{
ViewBag.ShowTopBar = true;
return View();
}
}
There are two options:
1. Add an ID to every body element
You could add an ID to the body of each of your pages that contains for example the Controller and Action name and then add a CSS rule to hide the topBar element on the about page.
First, let's create two string variables for the controller and action name. Do this in your _Layout.cshtml:
#{
string controller = ViewContext.RouteData.Values["controller"].ToString();
string action = ViewContext.RouteData.Values["action"].ToString();
}
Next, add the ID to the body:
<body id="#controller-#action">
In your css, you can now add a rule to hide the topbar in the about page (assuming the controller is called HomeController):
#Home-About #topBar {display:none;}
You could also use an extension method to get the controller and action name. For example something like this.
2. Use jQuery on the About page
You could add a Javascript on your about page and use jQuery to hide the topbar (I assume jQuery is already loaded):
<script>
$("#topBar").hide();
</script>
Easier way, just did that: style your page individually:
<style>
#showcase { display: none; }
</style>
Put this on the page that you want to hide, showcase is my section id. ;)
I want to create a dynamic website in asp.net using MVC model from Visual Studio 2013.
All the columns will have dynamic content, each one changing it's content on different selections based on user actions or by the controllers.
How can I create those three dynamic columns?
I already have my layout in HTML and CSS but I need to separate those three columns and have the possibility to change their content from my controllers.
Later edit:
In my case I have two menus in the website, one to the left and the other one to the right. Actually they are three with the other one from the top. When I select something from the top, the menu from the left must be showed depending on the top selection.
You can populate each column by using ViewBag or ViewData. So in the Layout, use this data to pupulate this columns, for example:
1) Calling this action will change the content for something that you specify:
public ActionResult MyView()
{
// you can put anything in this ViewBag,
// a string, a list of something and then use it in the view
// Its dinamyc
ViewBag.Column1 = "My content column 1";
ViewBag.Column2 = "My content column 2";
ViewBag.Column3 = new string[] {"Product1", "Product1", "Product1"};
}
2) Consume this data in your layout to generate the dynamic content:
<div id='column1'>
#ViewBag.Column1
</div>
<div id='column2'>
#ViewBag.Column2
</div>
<div id='column3'>
<ul>
#foreach(var s in ViewBag.Column3)
{
<li>
#s
</li>
}
<ul>
You should take a look here for more information:
What is ViewData, ViewBag and TempData?
You should use Sections as well, take a look here:
ASP.NET MVC 3: Layouts and Sections with Razor
I would advise you to make three different Controller Actions. For Example:
public ActionResult Part1()
{
return View();
}
public ActionResult Part2()
{
return View();
}
public ActionResult Part3()
{
return View();
}
And then call them in your Common page.
Example:
<div class="row">
<div class="col-md-4">
#Html.Action("Part1")
</div>
<div class="col-md-4">
#Html.Action("Part2")
</div>
<div class="col-md-4">
#Html.Action("Part3")
</div>
</div>
You can have the selection criteria controls inside the view of the controllers. i.e. if you need a drop down list for the First Block. Place it in the Part1 View. Also to make it async you can have Ajax forms in all three views.
I need to refresh a partial view which defined in main view from another partial view. Is that possible.
----MainView.cshtml
{
<div id=1>
#Html.Partial("partial1", Model)
</div>
<div id=2>
#Html.Partial("partial2", Model)
</div>
}
---Partial1.cshtml
{
when i click a button, i want to refreh div#2
}
You can use jQuery to refresh the div2 on click.
1) You can bind the click event and perform some action.
e.g. $("#button1").click(function(){
/// Code to refresh div 2
}
)
2) You can raise an event and to the work in registered event.
I have a left side navigation menu on my page.. using url.action like below.. I am trying to bring in a view immediately adjacent(right side of the menu) based on what link is clicked.. I put in a div next to the navigation menu.. but have no idea how to display the appropriate contents in that div...
<table>
<tr><td><a href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a></td></tr>
<tr><td><a href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a></td></tr>
</table>
<div id="DISPLAYVIEWHERE">DISPLAY VIEW HERE based on link that is clicked</div>
In controller, ActionName1 code I have this...
public ActionResult ActionName1()
{
var model = new ViewModel();
return PartialView("PartialView1", model);
}
When I run this, the partialview1 is opened in a new page. How can I get this partial view opened in the same page as the navigation menu, immediately to the right of the menu..so based on what link is clicked, partialview1 or partialview2 is displayed next to the navigation menu... thanks for your help.
you have to use ajax in that case. you can add some class to your anchor tags like
<a class='handle' href='#Url.Action("ActionName1", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image1.png")'/></a>
<a class='handle' href='#Url.Action("ActionName2", "ControllerName")'>
<img src='#Url.Content("~/Content/themes/base/images/image2.png")'/></a>
and then you can hook up the click event of these links using jquery and send an ajax call like
$('.handle').live('click', function(){
$.ajax({
url:this.href,
type='post',
success:function(data)
{
//data contains the result returned by server you can put it in div here
$('#DISPLAYVIEWHERE').html(data);
}
});
//here you have to return false to prevent anchor from taking you to other page
return false;
});
I am creating a partial view for the login which will be using the default model (AccountModel) and controller (AccountController) which were added when a new MVC 3 project is created.
However, the partial view (Login) does not recognize the controller (AccountController). I am getting "The resource cannot be found" error when I hit the "Register" link. Below is the snippet of the code.
Please advice.
Thanks
_Layout.cshtml
<div>
<div id="SideBar">
<div id="LoginHeader">
Login
</div>
<div id = "Login">
#Html.Partial("UserControls/UserLogin", new BalanzLab.Models.LogOnModel())
</div>
</div>
</div>
UserLogin.cshtml
#model BalanzLab.Models.LogOnModel
#using (Ajax.BeginForm("LogOn", "AccountController", new AjaxOptions { UpdateTargetId = "AccountController" }))
{
if (Request.IsAuthenticated)
{
Html.DisplayFor(Context.User.Identity);
}
else
{
<div >User Name
#Html.TextBox(" ")
</div>
<div>Password
#Html.Password(" ")
</div>
<div>
#Html.ActionLink("Signup", "Register", "AccountController")
</div>
<p><input type="submit" value="Let me in!" /></p>
}
}
This has to do with where you have the UserLogin shared view and how you're referencing it.
First the how:
You're including the partial view from your _layout view. Therefore, it's in every page that uses that layout.
Now consider what you're doing here. When you click that Register link that's supposed to take you to the Account controller Register method, it's hitting the call to #Html.Partial:
#Html.Partial("UserControls/UserLogin", new BalanzLab.Models.LogOnModel())
and trying to include it in the current page. Since the UserLogin control is actually under a folder in the Home views directory, it's not in the standard search path of where the view engine will search. It will check within the Accounts directory of views (the current controller) and it will check the Shared views directory. Since it can't find the partial view in either location, you get your error. (which looks something like this)
The partial view 'UserControls/UserLogin' was not found or no view engine
supports the searched locations. The following locations were searched:
~/Views/Account/UserControls/UserLogin.aspx
~/Views/Account/UserControls/UserLogin.ascx
~/Views/Shared/UserControls/UserLogin.aspx
~/Views/Shared/UserControls/UserLogin.ascx
~/Views/Account/UserControls/UserLogin.cshtml
~/Views/Account/UserControls/UserLogin.vbhtml
~/Views/Shared/UserControls/UserLogin.cshtml
~/Views/Shared/UserControls/UserLogin.vbhtml
The cleanest solution is to move this partial view to the shared views directory. Since it's part of the _layout view, you almost have to do this to make this work as the partial will be included by every view that uses the layout.