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
Related
I'm using ASP.NET MVC with Razor C# and I have implemented a main menu appearing on every page through _Layout.cshtml.
One of the pages linked to this menu opens a page that includes a secondary menu.
This page with the secondary menu links to several different pages which are navigated via the same secondary menu.
I've used Partial views to hold each secondary menu page, and I'm wondering what is the easiest/preferred way to output these partial pages via the page with the secondary menu? (Or perhaps I shouldn't even be using Partial views to save having to add the secondary menu to each page).
Thanks.
Ok, A friend, who is also working on the same problem, just showed me this: https://www.youtube.com/watch?v=SrlU8sr5Tqc
So the answer seems to be Nested Layouts.
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
}
In my ASP.NET MVC 3 project I have a master layout with a section defined. This section is responsible for displaying content in a sidebar, when it has any content assigned to it.
The problem I've encountered is the following:
I have some edit views, where both the sidebar and the main area is used for editing data. In this case the sidebar and the main body should be wrapped into one single form with a single submit button.
What is the best solution for this? The solution I came up with is that when the functionality I mentioned is necessary, I set a boolean property in my ViewBag. If this property is true, the master layout is rendered with the sidebar and the main content area wrapped in a form.
Is there a better way to this? The solution I described is a bit 'hackish' for me.
I would have two layouts. One with a seperate side-bar, and one without. Then, in the pages you need a sidebar with editable fields, you include the sidebar in your content page, not in the master.
The boolean you are using in the ViewBag can be better represented in the Model for the view of the master page. You can then include the side bar using a partial view. It would look somehting like this...
master.cshtml:
#using (Html.BeginForm("ActionName", "Controller", "POST")){
//
// Master form elements go here
//
//Side bar
#if(Model.ShowSideBar){
#Html.Partial("MySideBarPartialView" [, Model.SideBarModel ] )
#}
#}
You model (if any) should have a property that is set with the model for the side bar.
I have a complex asp.net mvc view where I load an "ascx" partial view into a div using $.ajax(). So I was wondering about the accessibility of the DOM elements contained in the main page and the ascx partial view. Using jQuery selectors, can I find an element in the main page from the ascx partial view? and the other way round?
Both ways, depending on the point on time.
You can always access the elements from the main view, since the HTML is bound at render-time (e.g $(document).ready())
You won't be access the elements in the partial view from the parent view until the callback from the $.ajax method has completed successfully and you have binded the HTML to the DOM (with .html(result) for example).
As an example, I have a table of items with edit buttons on each item:
I want to populate an edit form in a bootstrap modal as quickly, efficiently and as easily as possible.
Currently, I have tried populating via Javascript into a partial but this is a bit bulky and doesn't suit my needs when there are specific functions, varying inputs and different ways to input data. In some of my tables, the editing functions require 500+ lines of Javascript to calculate and process a bunch of different situations.
I've also tried generating a new modal partial for each item with partial Models but in larger tables with 1000+ items, this tends to lag the page quite a bit or take a significant time to load.
I need a way to quickly populate a modal with as little code as possible. Hopefully, I'd like a globalised way to do this for any given Model.
I also need the ability to populate the form action to do a variety of different things depending on the item.
I've heard that Ajax is a possible way to do this, but as I am relatively new to web development, I am not 100% sure how to do this.
What would be incredibly useful and would solve all my issues, is a way to render the modal AFTER loading of the page and on the input of an edit button.
So page renders -> you click edit on a given item -> it then renders the edit modal. Although I don't think this is possible.
This is just an example modal form:
Thanks
Currently, I have tried populating via Javascript into a partial but this is a bit bulky and doesn't suit my needs when there are specific functions, varying inputs and different ways to input data.
I've also tried generating a new modal partial for each item with partial Models
To display editing record in popup modal, we can achieve it either with JavaScript completely or mix using partial view.
If you do not want to generate/populate popup modal for editing row via 100% JavaScript client code, you can try:
1) when you click on edit button, make ajax request to controller action that accepts parameter Id of selected item
2) in that action, you can retrieve detailed and expected information of the item you want to edit based on Id, and the action would return a partial view
3) in partial view, you can render expected input fields based on your retrieved item information
4) in ajax success callback function, dynamically populate body of popup modal with returned data
Besides, this thread discussed rendering partial view as modal popup, you can refer to it.