I am fairly new to .NET and MVC3 - and even Ajax and Json, and am working on an MVC3 (razor) application, using jqGrid, and so far it is immense(jqgrid that is!) and has dealt with everything I have thrown at it.
However, I have One Outstanding peice of functionality that I do not know How to accomplish.
Within the Edit form of a Row, I have Placed a Custom button called 'Reset Password'. I need the Onclick Event to call a piece of functionality in my Controller to go through some logic, generate a Password, and Return the new Password to the Screen.
Can anyone tell me How can I achieve this?
May thanks in Advance.
You can return a partial view result or json data from the action.
See the partial view approach here
I have created an MVC application that uses webgrids to display data on my views. In my grid's toolbar I have drop downs, text boxes and a search button that call Jquery to perform various actions. For example, if I click the search button, I refresh the grid via Ajax based on a text entry. This all works well until interaction with the webgrid (page or sort) occurs. We noticed that if any ajax calls are made, then the sorting and paging do not work anymore. Also, if I load the page and page or sort first, then none of my JavaScript works. I have been researching this issue, but have not seen any concrete solutions. Does anyone have recommendations for a solution?
I would wager to guess that you are attaching your jquery handlers in the document.ready function using something like $("#Sort").click(function(){});. When you reload the grid via an AJAX call, the jquery handlers are not reattached since the DOM was not reloaded. Try using something like this $("#Sort").live('click', function(){}); which will attach the handler to any instance of your identifier once it is present on the page.
This is was a complete guess since you posted no code, but this and the post you referenced above (SO post) seems to have fixed your issue.
I am using ASP.NET 3.0 MVC with membership provider. I have to make modification to the default implementation we get with membership related code. I have to move LogOff Hyperlink in the master page. Initially this link is in-visible but once authentication is succesfful I need to make it visible. This action will happen from Controller for authentication and I am not sure how to access the hyperlink defined in a master page from a different controller. Any ideas how this could be achieved keeping the spirits of MVC design?
You could create another action in your AccountController to determine if the log off link needs to be displayed. This action has a partial for the html. Call this new action from the master page and check in that action if the log off link needs to be displayed.
#{ Html.RenderAction("displayLogOff", "Account"); }
I'm not sure why you need to make a modification, as this seems to be the default behaviour, but typically you would use a partial view to display the log off hyperlink. This partial view can run an action, and in this action you would send a model to the view which could include a flag for if the user is currently authenticated. Alternatively, you can just check Request.IsAuthenticated in the partial view directly.
I'm not sure I understand. The default implementation already does this. It works regardless of what controller you're using. The reason is that the master page uses a partial page that specifies the method and controller.
I am trying to use a jquery dialog to edit data in an WebGrid. Everythings works fine until the Form is submitted, instead of return to the current page that is open the browser goes to the url of the controller action. I am using an HTML.ActionLink in the WebGrid that adds jquery behavior to a button the WebGrid, and that works fine. It opens the View in a jquery dialog. The dialog defines two buttons: an update button and a cancel button. Clicking the cancel button does nothing. Clicking the update button takes the browser to the controller url for the edit action with the item id. I have the jquery.unobtrusive-ajax.js library defined and I added the UnobtrusiveJavaScriptEnabled key in the Web.config file, although I am not sure it's needed. Has anyone experienced this behavior, any help is appreicated!
I've experienced this problem in two situations:
The event handler was not being
binded to the form's submit event, or it was not suppressing the default behavior (through event.preventDefault(); or return false;).
There was an error in the event
handler, causing it to fall back to the
default behavior.
Well this is how much I can try to help without any source.
When I had this issue I wasnt referencing the jquery-Ajax.unobtrusive library so ensure that's there too
From my entry at http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html
1. Set the mentioned flag in the web.config: <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
2. Include a reference to the jQuery library ~/Scripts/jquery-1.4.4.js
3. Include a reference to the library that hooks this magic at ~/Scripts/jquery.unobtrusive-ajax.js
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.