Changing partial views in the same view based on menu - asp.net-mvc

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.

Related

Display views side by side

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"));
});
});

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.

ASP.Net MVC4, jQuery mobile

I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...

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 :)

jQuery UI, select tab with text link and load link specific ajax content

I am using jQuery UI tabs to have a tab where I can search for records and then other tabs where I can view individual record details. I am trying to have search results link clicks open the relevant tab and load the specific ajax content for that search result.
I am able to switch tabs using an href with something like the jQuery UI tabs example code:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
I see ajax content is normally loaded via setting the href on the tab itself:
<li><a id="customerTabLink" href="#tabs-2"><span>Customer</span></a></li>
I've tried adding this to the my-text-link onclick function to dynamically set the href for the tab but that doesn't load the content in my tab.
$('#customerTabLink').attr("href", "/view/dspClient.cfm?id_customers=15");
Is there another way I can be loading ajax content in the tab without setting this href? Or am I setting the href incorrectly? Is this something I should be using the load even for? http://docs.jquery.com/Events/load
Thanks!
-Matt
To change the URL that tab is using for AJAX calls you should use this:
$('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15');
First argument tells that you want to change tab URL. Second argument is the index of the page you want to change the url (zero-based so 1 is the second tab), and third argument is the new URL.

Resources