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.
Related
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.
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 function that updates a div with raw HTML. However, the raw HTML is in another .CSHTML document.
My function is:
function Demo(){
$('#ContainerDiv').html('#Html.Partial("MyPartialView")');
}
For some reason, whenever I include my partial view within the function, my console shows that it is unable to locate the document.
As soon as I remove the #Html.PartialView("MyPartialView") and include it in the body of the document, it loads fine.
Any ideas on why this would not be working, or a better way of doing this?
Thanks,
Mark
Your partial view probably contains line breaks, which results in multi-line string literals, which aren't valid in js. I see two options: Render the partial view in a hidden div when the page loads and move it to #ContainerDiv when you need to, or use ajax to get the content later.
You could call an action and then populate a container with the resulting HTML.
For example:
Action:
public PartialViewResult GetPartial() {
return PartialView("MyPartialView");
}
JQuery:
$.get('#Url.Action("GetPartial")').done(function(response){
$('#ContainerDiv').html(response)
}
I've always used .load() and the url to the partial view. Like so:
function Demo(){
$('#ContainerDiv').load('#Html.Raw(Url.Action("MyPartialView"))');
}
Edit: Forgot to change .html() to .load()
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've created a upload form for 1 image. after the image is stored on the filesystem i want to refresh the partial view (which then should display the image).
After uploading a image, jQuery runs the Url.Action but doesn't render the partial view which gets returned from the Action "WebAuftragImageRefresh"...
Maybe you have an idea?
Regards,
float
BTW. Why is the code-block not ignoring html tags?
View:
http://codepaste.net/co1gu9
Partial-View:
http://codepaste.net/1rxq2d
Controller:
http://codepaste.net/j8kugj
In your view you're doing:
$.get('#Url.Action("WebAuftragImageRefresh", ViewContext.RouteData.Values["Controller"].ToString(), new { id = ViewBag.AuftragGUID })', {...
But where exactly is this piece of jQuery code getting the ViewBag.AuftragGUID from which is actually being set in the WebAuftragImageRefresh ActionResult?