I have one normal view with two views components inside. Normal view have also a button and the both views components have a button too.
How i can refresh the views components after clicking on button from normal view?
And how i can refresh second view component after clicking on botton from first view component?
I already tryed to find a way, but without success!
Best regards
Ultimately view components generate HTML markup when razor executes that code. If you want to update some part of your HTML page (like a partial page update), you may consider using jQuery and ajax to do that.
Something like this.
$(function(){
$("#SomeButton").click(function(e){
e.preventDefault();
//make the ajax call and get new data/markup for the
// div rendered by your first view component and update it
var url="TheUrlToActionMethodWhichReturnsPartialMarkup";
$("#DivIdA").load(url);
});
});
You can do the same thing for updating other parts of your page ( markup generated by view component 2) as well. Update the url to an action method which returns a partial view result.
I tried this:
`$("#buttonrefresh").on("click", function () {`
`$.ajax({`
`type: "GET",`
`url: '#Url.Action("VCTest")'`
`(function (result) {`
`$("#show").html(result);`
`});`
`});`
This script is to refresh one view component after clicking on button from normal view.
VCTest is the name of the view component.
show is the name of the div where the view component is called.
Related
I am building a .NET MVC 5 application on back-end and Angularjs on front-end.
I am loading .cshtml views in a div containerOne on a parent .cshtml page with ui.router and everything is working fine. An issue I would like to solve is when I enter manually a page URL that is C# controller's action path(in the example I provided below it is /Proposal/Customers) - my view is loaded on a whole page. What I want to be called is a .state named 'customers' in my example, or something like that. My example code is(part of my proposalConfig.js):
.state('customers', {
url: 'AllCustomers',
views: {
containerOne": {
templateUrl: '/Proposal/Customers'
}
}
});
On my back-end I have a ProposalController.cs and an action method Customers that calls a Customers.cshtml view.
Anyone has an idea how to solve this?
EDIT
The same thing happens if, instead of 'AllCustomers' I put '/Proposal/Customers', and then after the first load of a .state I refresh a page.
I forgot to mention that I have $locationProvider.hashPrefix('!').html5Mode(true); in a proposalConfig.js file.
If you mean that the entire page html markup (html tag, body tag and such)is being returned when you only want the specific content of the Customer.cshtml, which I also assume only has what you want in it, its probably because your view has a shared view start layout. Put this in Customer.cshtml
#{
Layout = null ;
}
I have a main view which is having a partial view placed inside a ajax form. Upon the form submission I am returning another View but the problem is that the returned view is rendered in the earlier loaded main view only. It does not opens as a separate view.
I think that the problem could be due to the use of ajax form which is calling the controller action method but I am not sure.
Any help would be appreciated .
This is the expected behavior with ajax. Btw you are not using Ajax, but Ajah as you are returning HTML and not XML/JSON.
Ajax will not open a new page or popup without writing javascript code. Ajax is a way to transmit data between the current page and the server.
If you use Ajax.BeginForm, you can specify the ID of the dom element in which the HTML returned from your action should be attached.
If you use Html.BeginForm, you are not using ajax at all.
I want to modify the content of a div in my shared layout when there is an update at my database. Whats the best way to go about it ? Timers to check database + somehow update view from controller ? In view c# functions ? ajax ?(don't know much about it) or some other way ? Thanks in advance.
Use setTimeout utility of javascript to get timer behavior.
Create a Controller Action and its associated partial view which will have the content you need to load dynamically. You can return a formatted Html from the view or a structured Json object from the controller action whichever is suitable for you..
considering that your following is your DIV tag.
<div id="dynamicContent"></div>
use
$(function(){
var function updatecontent()
{
$("#dynamicContent").load(URL)
setTimeout(updatecontent,5000);
}
setTimeout(updatecontent,5000);
});
to load content dynamically, url would be
YourDomain.com/Controller/Action
$.load()
will load the content of partial view using Ajax, and you will get a nice behavior on page.
I have an "Edit Profile" lightbox on my page, which posts to the controller via jQuery ajax. I handle the response in the jquery end instead of returning a View. However, when the profile is saved, I need to refresh the values on the page displaying the popup. How could I achieve this in MVC2? For example, if the user changes her name and avatar (in the lightbox), after she saves the profile, I'd like to update the avatar and name everywhere it occurs on the page.
Well what i would be doing is make your Controller return a PartialViewResult, which the end result is basically HTML.
The Partial View would be the popup itself, so essentially your calling your Controller method via AJAX, doing your server-side work, then re-rendering the Partial View to the client.
Have the action you post to via jQuery return a success for failure message. If it is a success, change the avatar/name/etc on the page using the values already in the textboxes (i.e.: the values you posted to the controller). If it is a failure message, display the validation errors.
In your jQuery AJAX, everything can be done in the callback function of the AJAX request.
Prabhu - both your profile page (i.e. the 'main' div contained within it) and the popup div should be partialviews. on posting the popup back to the server, you should requery the main page partialview and return the appropriate html, targetting the 'main' div.
that's certainly the approach that i take for a very similar task.
I have a master page with Header, Menu, Content and Footer panes in my asp.net mvc (C#) application.
I don't want the Header and Footer panes to refresh on each page navigation, only the Menu and Content panes should get refreshed.
How can i achieve it in the asp.net mvc application? any suggestions
A pure ajax load of the inside of the pages could be achieved by capturing link clicks in the navigation to something like:
$('a:not(.external)').each(function(){
$(this).attr('href', '#'+this.href);
});
Then you could use the jQuery BBQ plugin to manage your back button and page loads with the 'onHashChange' event. This will allow you to ajax load each of the main portions of the page (likely with a $('#main-div').load(url); type call). The demo for BBQ does pretty much exactly what you'd like, with the added benefit that you don't ruin the back button, so I would suggest taking a hard look at that.
Make Ajax calls to the controller, like below and create the "*.ascx" PartialView you need
$('#divMainContent').load("./LoadMainContent");
[Authorize]
public ActionResult LoadMainContent()
{
return PartialView("MainContent", sp);
}