How to create token "#!" in asp.net mvc?
How to create html snapshot?
I have read google document, They talk create "Indicate to the crawler that your site supports the AJAX crawling scheme" by www.example.com/ajax.html#key=value to change www.example.com/ajax.html#!key=value.
But in asp.net mvc 4 I can't how to create "#!" because when i use #Ajax.ActionLink("link text", "controller", new { attribute router here },new AjaxOptions{ HttpMethod="GET", InsertionMode= InsertionMode.Replace, UpdateTargetId ="id to add function of ajax"}). So it gernater "action/?key=valuer" not like i expected "action/#!key=value"
So somebody help me. I want to google crawble link when ajax function do when i click a text and ajax function excute
what is html snapshot, is this create after when i excute ajax function( click text and ajax function do gernater hmtl to UpdattagetId(I code in asp mvc). So i can dont change any thing with existing i haved code: Ajax.actionlink(...) and gernerater html to UpdatetargetId)
I saw there are similar question to this. But I couldn't find an answer. That's why I am posting this again. Sorry!!
I want to build a file uploader with percentage bar with in it using .net mvc 3.0
There are some jquery plugins. But they need html 5 support. I am trying to build it without html 5 support.
Currently what I do is upload files with Ajax support. When file is uploaded by user I make an ajax request and display loading.gif until requested completed. So it is a pretty strait forward code for simple image uploads.
Now I am trying to upload videos and send it to Vimeo through their REST APIs.
I could do the same thing. But since files are large I want to do it in a nice way.
My code is something like this
View
#using (Ajax.BeginForm("Upload", "Home", new AjaxOptions
{
UpdateTargetId = "form1",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxValidate",
OnSuccess = "getGbPostSuccess",
OnFailure = "showFaliure"
}))
//.......
//rest of the form
}
Controller
public ActionResult Upload()
{
//Read file
//Post file to Vimeo (this is the part that take time to upload)
//get uploaded video content
return PartialView("xxxxx", Model); // return uploaded Video
}
I display a loading.gif using a small piece of javascript while this process happening. This code is working absolutely fine. As I mention before I want to make it more user friendly by putting a percentage progress bar.
Hope my question is clear.
Please help me...
Thanks in advance
But they need html 5 support.
Not necessary. For example the blueimp file upload plugin tests browser capabilities and could use the jQuery iframe transport if the browser doesn't support HTML5 XHR2. Here are more details about browser support.
Uploadify is another example which uses Flash if the browser doesn't suport XHR2.
Plupload is yet another very powerful plugin which supports a multitude of equivalents if the browser doesn't support XHR2.
So just pick a plugin, read the documentation, integrate it in your ASP.NET MVC 3 application and have fun.
I am trying to use the MVCPaging for asp.net mvc 3, which can be found here but I cannot make it works. I follow this tutorial step by step, but when I click on the link pages, which supposed to load into a div as ajax, it opens me another new pages,
My code from the view is:
#Html.Pager(1, 1, 2, new AjaxOptions { UpdateTargetId = "gridcontainer"}).Options(o => o.Action("AjaxPage"))
Which calls the action ok, it returns a partial, but the partial page is open into another new page instead of refreshing a div on my actual page
This problem gets me crazy, does any one using this nuget package and knows where the problem may be coming from ?
Otherwise, can you advice me a link / tutorial for asp.net mvc 3 for ajax paging ?
I had this problem and adding a reference to jquery.unobtrusive-ajax.js in your _Layout.cshtml view solved it for me.
I am looking for a documented, cross-browser supported jQuery plugin that I can use to build a site like this:
http://redsquareagency.com/
As you can see, as you navigate through the site, the URL changes via a hash and all new pages are loaded via ajax calls instead of page loads. This allows for some neat animations to be used when a new page is loaded.
I've searched for a while trying to find a good plugin that provides this functionality. The best I can find is jQuery Ajaxy: http://balupton.com/sandbox/jquery-ajaxy/demo/
But, the documentation is lacking, and I found it incompatible with the latest jQuery version (1.6.0).
Anyone know of plugins that can accomplish this?
Hmmm I don't think there is ONE plugin that does everything. But you can pretty much do some jquery your self with combination of jquery history plugin.
What you do do is write some code make all your hrefs load via AJAX. Like this -
$(document).ready(function() {
$.history.init(loadContent);
$('#navigation a').not('.external-link').click(function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
And that's it. The jquery history plugin will take care of the rest. You should also read google's documentation on how to do this properly for them to index it.
What you looking for is swfaddress. It provides deep linking for flash and ajax sites (obviously your looking for the ajax feature). You basically just have to listen for a page change request and load content accordingly.
After upgrading my ASP MVC from 3 Preview to 3 Beta I see strange behaviour in my Ajax forms.
#using(Ajax.BeginForm("New", new AjaxOptions() {OnSuccess = "onAjaxSuccess", OnFailure = "onAjaxFailure", OnBegin = "onAjaxBegin", HttpMethod = "Post"})) {}
<form action="/Order/New" data-ajax="true" data-ajax-begin="onAjaxBegin" data-ajax-failure="onAjaxFailure" data-ajax-method="Post" data-ajax-success="onAjaxSuccess" method="post"></form>
I have placed an alert inside my function onAjaxBegin and it is beeing fired twice, each time i click on my submit button.
Anyone else seen this behaviour? I have not changed anything in the code after upgrading, and it worked perfectly before the upgrade.
I had the same problem, and i found the solution: I included the "jquery.unobtrusive-ajax.min.js"-Script twice :-)
Look at the generated HTML. In ASP.NET MVC 3 Beta there's new support for unobtrusive jquery based ajax and all the Ajax helpers use jquery now. Maybe there's something left with MS Ajax which causes the double call. Make sure you remove all the inclusions of MSAjax scripts from the page. Also why using Ajax.BeginForm when you could simply use Html.BeginForm with unobtrusive jquery?
The duplicated jquery.unobtrusive-ajax.min.js can also happened if your controller returns a View() instead of PartialView().
I had the same problem using a AJAX.BeginForm call that is loaded dynamically using $.load()
I solved it by removing the extra include of jquery.unobtrusive-ajax.min.js on the loaded form. That's the key!
one small tip all the time before you using .live(), do .die() :)
this will kill all the java scripts attached to this event and will create a new one.
example:
$(function() {
$('#MyInfoForm').die();
$("#MyInfoForm").live('submit', function(e) {
//some code
e.preventDefault();
});
});
Just for future reference for those using ASP.NET MVC; "~/Scripts/jquery.unobtrusive*" does also include "~/Scripts/jquery.unobtrusive-ajax.js".
So if your BundleConfig looks like this;
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive-ajax.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
It will result in submitting an Ajax form twice. Removing either "~/Scripts/jquery.unobtrusive*" or "~/Scripts/jquery.unobtrusive-ajax.js" will fix the problem.
Just posting this because it is easy to overlook "~/Scripts/jquery.unobtrusive*" when searching for unobtrusive-ajax.
You can use bind instead of live in jquery.unobtrusive-ajax.min.js~~~ This is very important.Because live event will call the previous events every time but bind only calls the current event.
Moving jquery.unobtrusive-ajax.js outside partial-view solved the issue in my case.
I had the same problem. I had a login partial view in master page that included jquery.unobtrusive-ajax.min.js. I also had this file included in my view. So I removed one and the problem is solved now.
I also had this exact problem and for a very different reason. I had included the script reference to the jquery.unobtrusive-ajax.min.js within the div that got updated. Moving it outside the div fixed it.
This might be helpful for someone having a scenario similar to what I have:
On my page, the edit form opens a partial view inside a Kendo UI modal pop-up window, which loads the code of the form dynamically, including jquery.unobtrusive-ajax.js. With this setting, - which can relate to any pop-up such as that of jQuery UI and not just Kendo UI - the behavior of form submission is as follows:
The first time the pop-up window is opened, the form submission causes a single call to the controller (server-side) code. So far so good. However, for the second time that the window is opened (without closing the container page), the form submission calls the controller 2 times. Subsequently, each re-opening of the pop-up window, causes an additional loading of the jquery.unobtrusive-ajax.js code, which in turn causes an additional unwanted call to the controller at each single submission of the form.
In order to fix the problem, I moved the inclusion of jquery.unobtrusive-ajax.js from the partial view of the pop-up window into the main page. However this made the client-side validation stop working, and to fix that, I used the solution provided in here:
client side validation with dynamically added field which links to this blog post:
http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
I found out the solution, just remove all jquery.unobtrusive-ajax.js references, since you are using the Ajax.BeginForm it will use the ajax normally.
So it doesn't has to disable the ajax.
this is old but I found something really stupid that is easy to overlook.
Our form also had the following attached to it:
$(document).ready(function () {
$('#submit-button').on('click', function (e) {
....
}
});
Obviously the .NET code handles this itself.