I am writing a very simple MVC4 test page and unobtrusive Ajax does not seem to be working. When I click my submit Button the page is not submitted.
I have a breakpoint is VS and can tell there is no request.
I am using Firefox and when I click the submit button the Web Console shows this JavaScript error:
--- Empty string passed to getElementById()
Which occurs at line 16 in.--- jquery.unobtrusive-ajax.js
I setup ajax Options as follows:
AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "officeList", Confirm = "Are you sure?", Url = Url.Action("GetOfficeData") };
Here is my AjaxForm:
#using (Ajax.BeginForm("GetOfficeData", ajaxOpts))
{
<div>
#Html.DropDownList("orgList", new SelectList(Model.Organizations, "ORGID", "ORGNAME"));
<button type="submit" id="btnSubmit">Submit</button>
</div>
}
I do get the 'Are you sure prompt' when I click the submit button (as defined in the ajax options).
If I change Ajax.BeginForm to:
#using (Html.BeginForm())
...
Then there is a request, my breakpoints get hit, and there as no JS errors.
I have used NuGet to get the latest version of both jQuery and unobtrusive-ajax. Here are
my script tags from view source (all of them – in order):
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
Here is the form that gets rendered:
<form action="/Selectee/GetOfficeData" data-ajax="true" data-ajax-confirm="Are you sure?" data-ajax-mode="replace" data-ajax-update="#officeList" data-ajax-url="/Selectee/GetOfficeData" id="form0" method="post">
<div>
/*--my drop down .....
<br />
<button type="submit" id="btnSubmit">Submit</button>
</div>
</form>
Any ideas?
I have it working.
I did not have an Html.BeginForm(), only the Ajax.BeginForm(). Is that valid?
I added an Html.BeginForm() with an Ajax.BeginForm() and all my controls inside that form and it started working.
I thought Ajax.BeginForm() took the place of Html.BeginForm, but it appears I need both. Is that correct?
Related
I'm using razor pages, i have a simple form submission
<form method="post" onsubmit="btnSave.disabled = true; btnSave.value = 'Please Wait..'">
<input id="btnSave" type="submit" value="Save" />
</form>
This works fine for my form submission, but i have some dropdown lists i am validating with in the form using Razor page validation as such
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Which is the _ValidationScriptsPartial.cshtml content
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
So if i hit a validation error on one of my dropdown lists the submit button stays diabled and says "Please Wait.." , i can't figure how to if a validation fails for the _ValidationScriptsPartial how to re-enable my button and have it say "Save" again instead of "Please Wait.." so the user can resubmit ?
When using method handlers to execute OnGet or OnPost methods, &handler=[action] query string gets added.
Problem is if user manually refreshes the page afterwards by hitting browser's refresh button, the same action will get executed for the 2nd time unintentionally.
What is the recommended approach to avoid this?
Problem is if user manually refreshes the page afterwards, same action
will get executed for the 2nd time.
For the browser refresh button click event, we can't prevent it. But, as a workaround, you could defined a TriggerCount property in the page model, and use a hidden field to store the value in the form, then in the handler method, get the hidden field value and based on the count to do something. Code as below:
code in the .cshtml.cs page:
public void OnPostDelete()
{
if (Request.Form["TriggerCount"].Count > 0)
{
TriggerCount = Convert.ToInt32(Request.Form["TriggerCount"]);
TriggerCount++;
}
if (TriggerCount < 2)
{
// do something.
Message = "Delete handler fired, Count:" + TriggerCount;
}
else
{
Message = "Over 2 times";
}
}
Code in the .cshtml page:
#page
#model RazorPageSample.Pages.HandlerPageModel
#{
}
<div class="row">
<div class="col-lg-1">
<form asp-page-handler="edit" method="post">
<button class="btn btn-default">Edit</button>
</form>
</div>
<div class="col-lg-1">
<form asp-page-handler="delete" method="post">
<input type="hidden" asp-for="TriggerCount" />
<button id="btndelete" disabled="#(Model.TriggerCount>=1?true:false)" class="btn btn-default">
Delete
</button>
</form>
</div>
</div>
<h3 class="clearfix">#Model.Message</h3>
the screenshot as below:
I use jquery to show hidden form. I want to know how I can automatically show form when user click Submit and then press back button. I don't want user to click New Account again to show form after they click back button.
I have these working code currently:
<head>
<script src="https://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
});
</script>
</head>
Google
|
New Account
<div id="show_form" style="display: none;">
<form id="register_form" method="post" action="verify.php">
Username
<inputname="username" id="username" type="text">
<br>
Email
<input name="email" id="email" type="email">
<br>
<input class="button_register" type="submit" value="Create New Account"
/>
</form>
</div>
Example: http://jsfiddle.net/n9uGH/17/
Is it actually possible? Thanks in advance
There are various ways that this could be achieved, however this depends on your server-side language and or hosting environment. Here is a fairly simple widely accepted methodology that should serve your purpose.
This is based on this cookie library for jQuery https://github.com/carhartl/jquery-cookie
Using cookies you can persist the information between the two page loads.
So on your form page you would do something like this
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
if($.cookie('form_submitted')){
$('#show_form').toggle();
}
});
Then on the page which appears after submitting the form you can do this
$(function() {
$.cookie('form_submitted', 'yes');
});
I have a delete form that looks like this:
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<p>
<input type="submit" value="Delete"/> |
#Html.ActionLink("Back to List", "Index")
</p>
}
But my controller action is complaining that __RequestVerificationToken is not present. I'm confused. I put the AntiForgeryToken in there. When I view the rendered HTML for the delete form, there is no hidden field--as if the AntiForgeryToken call is just being skipped. But why?
I have one form of user name and password fields followed by submit button. How do I stay in current page after clicking submit button without reloding page?
Any help is appreciated.
Try tis if you need a sumit button.
<input type="submit" onclick="return false" />
But you may want to use a simple clickable button if you don't wan't to sumbit your form on click... in this case, this should do the trick:
<input type="button" />
There are a couple of options. First of all in the markup for the submit button you can return false:
<input type="submit" onclick="return false;" />
The problem with the approach above is that it will cancel the submit, not sure if that's desired or not. Another approach you can take is to use something like jQuery to do an ajax request.
To do that you'd need to include jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Then change your submit button to a regular button:
<input type="button" onclick="doAjaxCall();" />
The javascript function doAjaxCall would then be something like:
<script type="text/javascript">
function doAjaxCall() {
$.ajax({ url: "destinationurl.aspx", success: function(){
alert('success! insert success javascript code here');
}});
}
</script>