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'));
Related
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"));
});
});
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.
What is the most simple and fastest way to open a View as modal(popup) in other View?
I have Index view with button Create/Edit. When i press button i want to open a Create.cshtml or Edit.cshml Views as modal/popup, fill information, save and reload to Index View.
I have tried angular-bootstrap script to load external templateurl, but that is too slow for me (somewhy it takes up to 10s).
Is there some tool or way to do that fast and simple?
Thank you.
function newTask() {
var myModal = $('#myModal');
$.get('/Cloud_Customer_Events/Create/' + id, function (data) {
$('#mydiv2').html(data);
$('#myModal .modal-header .modal-title').html('Create Record');
$('#myModal').appendTo("body").modal('show');
});
}
Also, check the javascript files that are loading in your partial view for redundancy...
i am new in mvc so like to ask 2 noob questions and those are
1) how to load partial view dynamically after postback. suppose i have a button in my main view and when user will click then i want to load a partial view dynamically after postback. i know how to load partial view dynamically using jquery but i want to know how can i load partial view after postback in main view without using jquery.
2) when we load any view dynamically by jquery then very easily we can capture the view rendered html and set or position that html in any where in my main view but i want to know how could i position or adding partial view html after postback. is it at all possible without using jquery?
in asp.net webform we can load user control dynamically after postback and also we can add that usercontrol any where in page without using jquery. the same kind of flexibility is there in mvc or is it restricted.
please give answer point wise with example or sample code. thanks
for your first question you can use different techniques, here is a sample
[HttpPost]
public ActionResult Foo()
{
ViewBag.ShowPartial = true;
return View();
}
in the view
#if (ViewBag.ShowPartial)
{
Html.Partial("_MyPartial");
}
for second question i suggest you read a little more about asp.net mvc, and postback means nothing in asp.net mvc, it is post request and get request so on, and you can easily add what ever you want to the view
one other sample
in the view
#if (Request.RequestType == "Post")
{
// do what ever you want
}
I am working on a help page which is composed of a navigation tree, content box, and search box. The navigation tree has links to Frequently Asked Questions and Glossary, each of which are linked to an Action which return partial views.
To the right of the navigation tree I have a single content div that I would like to contain whichever partial view is selected in the navigation tree.
Success case (what I want to accomplish): clicking on one of the FAQ links calls the FAQ() method in my controller, then returns a partial view which is then displayed in my content div to the right of the navigation tree. Clicking on another item would cause another partial view to be loaded.
How do I go about this? I've read a ton of ASP.NET MVC JQuery loading blog posts and tutorials but can't find anyone who's done exactly this.
Many thanks!
You should be able to use the jQuery method .load() to load HTML into your div.
http://api.jquery.com/load/
You can create an action that returns the partial view as HTML.
ASP.NET MVC Returning Partial View as a full View Page
jQuery:
one easy way you can do is load all partial views in "Container Div" at page load in one go (if performance is not a issue)
then assign each partial div with different div id inside "container", than use jquery to control show(); hide(); for each div.
MVC:
however if i were you, "Glossary" and "FAQ" looks same model to me it shouldn't be put in different partial view in first place.
if they did designed in separate model, in this scenario, i would recommend you to create a proxy class as a ViewModel above models you want to display, and then load it with one partial view only