Ajax.BeginForm OnSuccess not executed after Submit - asp.net-mvc-3

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

Related

Show bootstrap modal on server side validation

I have a ASP.Net Core MVC web application. I have a standard razor view which has a list of items with a delete button. What I want to do is if they user deletes an item from the grid go to the server calling an action which validates the item selected. IF invalid I want to return to the view and show a bootstrap modal explaining why the delete cannot be carried out. I call the delete routine using Controller / Action tag helpers and pass the unique Id to a controller event.
So basically if my delete validation fails show a modal dialog with a message. Any help please?
I ended up sorting this myself. Basically I set a viewbag property and give it a value of show. Then in my script section of my view I set the modal property to that viewbag.

AngularJs: Disabled submit button is gets enable from firebug console

I am using ng:Disabled directive for disabling my submit button. Its working fine its not enabling until all the required input fields are getting filled, but when I am inspecting the element using Google chrome firebug console and manually delete the disabled attribute from submit button then its get "Enabled" and form is submitted. So my question is that how to handle this type of problem. There are any option to checking validate from controller and enable/disable submit button from controller.
Please give me some suggestion for this.
Basically I am referring this url: http://docs.angularjs.org/api/ng.directive:ngDisabled
Ensure your form doesn't have an action attribute, and hook up
the ng-submit
directive of the form element or the
ng-click
directive on the first button or input field of type submit.
See form for more details.
From that event handler you can perform additional validations and send form only if validation is OK or show an error otherwise.

MVC back button doesn't execute controller method in IE9

I have a very straightforward ASP.Net MVC3 application that executes an action on an index page which retrieves data from a database and displays a list of items. When I click an ActionLink for one of those items to go to a details page, and then click the back button (or hit backspace), it takes me back to the index page, but none of the data is there. Setting a breakpoint in the controller's action method shows me that the breakpoint is not being hit. If I hit F5, it then hits the controller and method.
This does not happen in Chrome or the latest release of FireFox, everything works as expected. It seems to be an IE issue.
Any ideas?
Thanks!
This could be because the action is caching although I would still expect the page to show the original values.
Try this. I prefer creating an attribute and decorating the actions with [NoCache].

Form submitted twice after updating from ASP MVC 3 Preview to Beta

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.

Enableeventvalidation in web user control

I have a web user control containing a repeater. The repeater contains three buttons. On button click it gives the following error :
Invalid postback or callback argument.
Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%# Page EnableEventValidation="true" %> in a page.
For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
Since user control does not have page directive, so I changed the enableEventValidation to false in web.config, but it restricted the itemcommand event of the repeater.
Can someone guide me, how to solve this problem?
Pretty old question, but recently struggled with the same problem.
The solution is to put code that bounds data to your repeater inside of code that will work if PostBack not happened for the page:
if (!Page.IsPostBack)
{
rptTeam.DataSource = lstUSTU;
rptTeam.DataBind();
}
Hope that helps.

Resources