Display views side by side - asp.net-mvc

I am very new to MVC hence maybe its a basic problem.
I have created a controller called HomeController which would have a view displaying a navigation panel which behaves like a menu but should always be visible as the folders in Windows Explorer. On clicking on an item, I want to load another view to the right hand side (similar to master detail). Each item has a view and a model. To load the navigation panel I have the following code
#foreach (var service in Model.Services)
{
#Html.ActionLink(service.Label, "Details", new { serviceName = service.ServiceName })
}
This code works fine but is code opens another view and my navigation list disappears. Please guide how to open my Details view along with the Home view

You need to use ajax to do this.
Split your page into 2 parts. The left - link container div and right preview div. When you click on a link, using ajax to call that link and update the DOM (preview div) of the same page.
<div>
<div class="pageLeftMenuContainer">
#foreach (var service in Model.Services)
{
#Html.ActionLink(service.Label, "Details",
new { serviceName = service.ServiceName },new { #class="ajaxLink"})
}
</div>
<div class="pageRight" id="preview"></div>
</div>
Now listen to the click event on the links with the css class ajax link and load the preview div. You can use jquery load() method.
$(function(){
$(".ajaxLink").click(function(e){
e.preventDefault(); // prevent the normal link click behavior
$("#preview").load($(this).attr("href"));
});
});

Related

How do I preserve a hamburger menu when linking from a contentpage?

I've been using the MasterPageDetail approach in creating a hamburger menu for my Xamarin Forms app. The menu itself works fine as taken from the Xamarin documentation https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/. What I noticed was that if I create a simple link to a page in one of my views, the hamburger menu and it's icon are replaced with a back button.
What I would like to know is how to create a link in a content page that will preseve my hamburger menu instead of showing a back button. Any link you click from the MasterPage takes you to the corrosponding view but you can still see the hamburger menu, if you click a link within one of the pages however you are taken to the page but with a back button instead. It's causing a very confusing navigational experience for my users.
The following code demonstrates how the manu is created in the hamburger menu just now.
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
public MasterPage()
{
InitializeComponent();
//var master = new MasterPage();
var masterPageItems = new List<MasterPageItem>();
masterPageItems.Add(new MasterPageItem
{
Title = "Dashboard",
IconSource = "dashboard-icon-24.png",
TargetType = typeof(Dashboard)
});
listView.ItemsSource = masterPageItems;
}
So that works perfectly, you can navigate around and the hamburger menu is there all the time.
Within my view called 'dashboard' I added some link to hope to those same pages that are in my hamburger menu, I did so int he following way:
<Button Text="Information" Clicked="informationClick" />
The code for this is as follows:
private void informationClick(object sender, EventArgs e)
{
Navigation.PushAsync(new Information());
}
When you click on this link however you lose the hambuger menu and it's repalced with the back button instead. I want to preserve the hamburger menu, does anyone know how I can do this from my content page?
You must replace the "Detail" property of your MasterDetail page with a new NavigationPage containing the page you are linking.
Something like that:
(App.Current.MainPage as MasterDetailPage).Detail = new NavigationPage(new ContactsPage());
This is not really clean but it makes the idea.

Fix Menu on Left Side and Right Side Content Change on Menu Option Click MVC

I am creating a MVC application in which on the Left Side Menu will load first time when the user Login into the application and on click of any of the Menu Option only Right side Content will display(Will Call the Action Method).
I have achieved it using Partial Views. Is it good to create whole application on Partial Views or is there any other way to achieve this?
Looks like you want to load the page for which the link is clicked, in an asynchronous way. You can do that using jQuery ajax methods.
So first, mark your links with a css class name so we can use that as the jQuery selector to wire up the ajaxfied load behavior. You should also has a content page to which we will load the result of the ajax call.
<div>
<div id="leftPane">
About
Contact
Index
<div>
<div id="rightPane">
</div>
</div>
Now you can listen to the click event on those link, use jQuery load method to get the content of those action method and update the rightPane's innerHtml
$(function(){
$("a.alink").click(function(e){
e.preventDefault();
$("#rightPane").load($(this).attr("href"));
});
});
With proper css, you can keep the leftPane to the left side of the container and rightPane to the right side of that.

Changing partial views in the same view based on menu

I am creating a website of static pages in MVC5. I want to update the "content" div on the right side , based on the menu item clicked which is on the left side of the page without refreshing the whole page. I have used one partial view for the menu part and for each item in menu , I have created partial views .
You could use something like this where 'yourMenuItem', 'partialUrl' and 'rightPanel' refer to the menu option to be clicked, the URL of partial returning the content and the target div where content is to be inserted:
$('#yourMenuItem').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$.get("/partialUrl", function(data) {
$("#rightPanel").replaceWith(data);
});
});
You should probably use #(Url.Action("Action", "Controller")) to derive the partial URL.

asp.net call view from a view in another area

So I have a view with a treeview. When you select a node from the treeview, a view should appear next to the treeview. This is easy. You just call the controller from the view and load it into a div like this:
LoadUserControl('#Url.Action("ViewName", "Controller")', { 'parameter': parameter}, $("#div"));
This works perfectly if the view you are calling is in the same area where you are currently working in. However this doesn't work when it is in another area. When you make the call the controller you are looking for can't be found. Anybody has an idea how to do this?
I'm using asp.net mvc3, c#, jquery and html
You could specify the area name in the routeValues parameter of the Url.Action helper:
var url = '#Url.Action("SomeAction", "SomeController", new { area = "AreaName" })';
LoadUserControl(url, { 'parameter': parameter}, $('#div'));

how to refresh partial view without refreshing the complete page in mvc

I m using a Ajax Tab panel in my application.
There are 4 tabs on Left hand side and a partial view on right hand side.
In each of these tab I m displaying some data and there is a select link button on each tab.
when I click on any of the select link button I m filling the partial view with some information.
When this happens my view is completly loaded again.
A B C D
eg these are the tabs.
let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information.
but the tab loose the focus at this point. I comes back to the default value.
so I want help on this
1) either I have to refresh only the partial view without loading the complete page
2) or I need to maintain active tab index value on click on select link button
Please help me with this problem
and provide me examples
jQuery Tabs - Load contents only when clicked
Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.
$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");
or else instead of Ajax.ActionLink
use <a onclick="LoadTab(#item.ID)">Item #item.ID</a>
and jquery function to change the tab and load data dyanamicaly
function LoadTab(id){
//Change tab here Ex: $('#tabs').tabs('select', index);
$.get('ajax/test.html', {Id, id},function(data) {
$('#Partial_Controller_Name').html(data);
});
}
Write an ajax call on click event of tab and load the partial view in the container of the tab
This can be done using RjsResult class
if using mvc1 u can use RjsResult.cs
by this..you can update as many div you want in a page...
use this for implementation
public ActionResult Some_Method(){
RjsResult r = new RjsResult();
ViewData["SomeData"] = Some_Function();
r.update("DIV_id","PartialPagePath",ViewData,ControllerContext);
return r;
}
so when you click on somethink..this function will be implemnted and will refresh you div with tht partial
View part
<div id="DIV_id"></div>
you can update as many dv as you want with a single click :)

Resources