I am working on a Umbraco 7 project started without MVC implemented. I try to implement a loading without page refresh. I am stuck now because I need some Razor code to get Umbraco information but I need jQuery to refresh without page refresh.
Here my code:
$(function () {
$.ajaxSetup({
cache: false
});
$('#filterButton').click(function(){
$('#content').html(#Html.Partial("~/Views/Partials/Preferences.cshtml"));
})
});
I tried with .load()with .html using #Html.Action,#Html.Partial etc, but nothing works. I know it is really simple to link a controller to an action like this but it will take me to much time now to change everything.
Can you say me if it is possible or not?
Please jquery try
$('#content').load("/Partials/Preferences");
another html helpers try
#{
Html.RenderAction("Preferences","Partials");
}
Syntext For
#Html.RenderAction(Action, Controller, Route)
Related
I am trying to use an MVC Partial to render a JavaScript grid. To do so, I have to load & utilize jQuery. However, I keep getting the following error:
$ is not defined
This should be simple...but apparently...it isn't.
THE PARTIAL LOOKS LIKE:
<h2>Inside the Partial</h2>
<div id="grid"></div>
<script type="text/javascript" defer>
// ERROR: $ is not defined
$(document).ready(function () {
// Awesome JavaScript Grid Stuff Will Go Here
});
</script>
THE VIEW LOOKS LIKE:
#using Web.Areas.Administration.ViewModels
#model LookupsViewModel
<h1>View Title</h1>
#Html.Partial(Model.PartialPath, Model.PartialModel)
Here are two main things that will help you solve your problem.
Make sure that your reference of the jQuery files is correct. Most you could had problem in the path.
Don't ever put JavaScripts in the partial views. Put those in parent view before the partial view where it has been called.
If you're loading jquery through script after the Partial view, you will be trying to run jquery variables before they are loaded and defined. Ensure that any jquery that you run (whether inline or not) is run after the page has requested and loaded jquery itself.
See: Can you write jQuery code inline before loading jQuery?
I'll give a bit more reason why you shouldn't put javascript in your partial views. If you use the Partial more than once, you risk having repeated javascript. That could mean variables are redefined, eventlisteners are added more than once, etc. causing some confusing bugs.
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 want to use aspx page as partial view in MVC 4. For doing that , I have to inherit it from
"System.Web.Mvc.ViewPage<dynamic>"
In this way, I can not use the code behind (.cs) file. I am using Gridview server control so I have to include code behind for CRUD operations. can u suggest something for this problem ???
You could use jQuery to get the response of the aspx page and then insert it into a div element:
$.ajax({
url: "location/of/aspxpage.aspx",
}).done(function ( data ) {
$("#divElement).text(data)
});
You may have to do something funky to get the html displaying correctly - take a look at http://api.jquery.com/html/ for some help with that
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'm preparing an application I wrote in ASP.Net MVC for some light Ajax-y stuff. Basically, I want users to be able to go to different parts of the page without it reloading.
To do this I want to be able to reload the body of my page.
My site master is broken down into a head body and foot div. I want to be able to use something like $("body").load(whateverlink) to refresh the body, but in my case doing this causes the website to be rendered inside the body.
How can I do this successfully?
EDIT: The page is made up of views, not partialviews. In theory I could go and convert all my pages to partials but I'm looking for a way around that if possible.
Thanks
You can get your controllers to return partial views, using JQuery to do a request and update a div with your page content:
JQuery:
function navigate(url){
$.ajax({
url: "/Home/Index",
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
Controller:
public class HomeController : Controller
{
public void Index()
{
return this.PartialView();
}
}
There is a helpful article on BrightMix which might help. It basically renders a partial to a string, which you could then return as part of a ContentResult.