I have something like
#{ Html.RenderPartial(#"~/Views/Management/_Main.cshtml"); }
Can I change this view without page refreshing? I mean, I want to render few partials on one place. Like gallery, may be. I mean, I press the link - some section loaded, depending on argument.
First I think about - master page (Layout page). Any other ideas?
You can dynamically load a partial view into a div without a page reload by using the #Ajax.ActionLink() method.
Have a look at this post.
Related
I am having an issue with Bootstrap Modal, you know when we call a modal, the page where we called it is disabled (it turns gray) and you can only type/click on the modal right? On my part though, both the main page and the modal is disabled so I can't click nor close my modal after I called it. I can fix it by making the data-backdrop property to false but that removes the effect both on my modal and the page.
Default Modal:
data-backdrop = "false"
I think the reason for this is because the content of my modal is a partial view, and the modal is called from a partial view also. To help you imagine: I have 3 pages
1. Index.cshtml(main page)
2. SearchResult.cshtml (partial view)
3. Edit.cshtl (partial view)
Index is where my search criteria bar, when Go is clicked, SearchResult partial view is called at the center of the page, then when I click edit, the modal popup.
My assumption is that the backdrop also disables my SearchResult so my whole page become disabled. I am not really sure though. I hope you can help me figure this out. Thank you!
Do you have an example of your code? I am guessing without looking that your div that you are populating with the modal content is inside the div(s) with the rest of your page content. If this is the case, try moving the modal div out of any nested tags so that it stands on its own.
I.E.
`<div id="PageContent"></div>
<div id="ModalContent"></div>`
I put this code on my document ready , to catch when that element is adding to the page and I remove his css attribute position to relative:
$('body').on('DOMNodeInserted', '.modal-backdrop', function () {
$(this).css('position','relative');
});
I am looking for a way in Ruby on Rails to render a completely different controller's action within other views.
For example I am writing a band website that displays their albums. So I have /albums/list that shows a list of all of their albums with other stuff around the page as the layout. Now what I am looking to do is also render /news/list in every page as part of the layout as well so that every page you go to you can see it.
I cannot find a way to call the news controller list action and display it in the list view using partial views. Any help would be appreciated.
http://api.rubyonrails.org/classes/ActionView/Helpers/RenderingHelper.html#method-i-render
render() method give you ability to render specific file, placed in any directory :)
also read this article - http://blog.plataformatec.com.br/2012/01/my-five-favorite-hidden-features-in-rails-3-2 especially about "Custom partial paths".
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
I've got a big ViewModel for a ContactViewModel with several addresses (default, invoice, delivery). This ContactViewModel I would like to edit within a DefaultAddress tab, etc. and I would like to know how to handle this without JavaScript? Is this possible?
Tell me if I'm off base here;
The way i think i'd approach this is to create a partial view which takes a list. the partial view would itterate through the list and create another partial view which is the tab.
on click of the tab i'd do a postback and store the clicked tab. this id then becomes the active tab.
when i come back to rebuild my page, the partialview for the actual tab would need to check to see if it's active and then make itself visible. if not visible then simply render nothing maybe.
This can be done with CSS. Here is an example: http://www.alistapart.com/articles/slidingdoors/
The selected tab/view will need to be rendered on the server. I can see each tab being a link, when the link is clicked the correct view and selected tab is returned.
Some of the css tabs don't work correctly in IE6. I'm not sure if the above link is one of them.
Is there a way to scroll or jump down a page after rendering it?
Specifically, in my controller action, there are some situations where I'll want to send the user to a particular place on the page. If it were just a link from another page, I'd probably use a URI fragment identifier - "http://blorg.com/page#id" - but this needs to be dynamically generated depending on some condition.
Maybe I need to use JavaScript (Prototype) somehow, but I don't know how to call the function once the page is done loading, especially from the controller.
You should really do this type of thing in your view. In your controller you should evaluate your condition to determine the part of the page you want to show, then pass the result into the view. You can then be able to use this information in your view to add a small piece of javascript at the bottom of the page that does something like the following. Of course this doesn't help you if the user has javascript turned off ;)
Controller code:
def index
# evaluate the condition
#section = (rand*10).to_i
end
View view code:
<div id="#section1">some stuff</div>
....
<div id="#section9">other stuff</div>
<% if #section>0 %>
<script type="text/javascript">
// <!--
document.location.hash="#section<%= #section %>";
// -->
</script>
If you are using jQuery, an an answer could be as follows:
$("body").scrollTop($("#my-element").position().top;
Or if you want to be really fancy (recommended), you can animate the scroll top like so:
$("body").animate({scrollTop: $("#my-element").position().top},1000);
you can have browser scroll to a position down the page by including a fragment part in the url that links to the page. e.g. http://example.com/index.html#section3 will scroll the page to the element with 'id' section3. you can use that id on a link, paragraph, etc. the browser will make sure the element is visible after the rendering.