We Keep Coding

Showing Loading window on Submit and Retriving Data

I'm just new to these ASP.NET developments and still studying and developing things.
So for my project I'm using a ADMIN LTE theme.
Here It has a loading page, Whenever I click to a page this loading screen shows up and then load the page.
<div class="preloader flex-column justify-content-center align-items-center">
<img class="control-sidebar-animate" src="~/Addons/dist/img/AbdThub.png" alt="PAS Logo" height="80" width="100">
</div>
This code is on the Layout Page.
I want to know When clicking on a submit button on view, or Retrieving data I want to show this waiting image.
How can I use this on those actions?

for submit if you don't use ajax as explained here https://stackoverflow.com/a/21521228/11143288 :
$('form').submit(function () {
$("#loader").show();;// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#loader").hide();
}
}
});
and for ajax calls :
$(document).ajaxStart(function(){
// Show image container
$("#loader").show();
});
$(document).ajaxComplete(function(){
// Hide image container
$("#loader").hide();
});

C# - PhantomJS/Selenium - Click event doesn't register on a button inside a modal

I'm having some issues with automating a website using PhantomJS/Selenium WebDriver in C#.
Part of the website has a check on addresses; entering in an address it can't verify (or just not entering an address at all) brings up a modal div with buttons in it. Depending on the situation, it will either give you the closest address, or the option to just continue without an address, but the button always has the same id. The HTML for this div (for the "no address entered" version) is here:
<div id="confirmAddress" class="col-xs-5 active-popupbox">
<div class="row vert-offset-top-2">
<p style="margin-left:55px;" class="h3">No Customer Address Provided</p>
<br>
<div style="margin-left:42px;margin-bottom:0px;" class="modal-body">No Customer Address Was Entered. We recommend having the Customer provide an address.</div>
<br>
<div class="col-xs-6">
<button type="submit" class="btn btn-default" style="margin-left:45px;width:200px;" id="confirmBack" name="confirmBack" align="center">Enter Address</button> </div>
<div class="col-xs-6">
<button type="submit" class="btn btn-default" id="confirmPopUp" name="confirmPopUp" align="center">Proceed with No Address</button>
</div>
</div>
</div>
The button I need to click is the last button, <button type="submit" class="btn btn-default" id="confirmPopUp" name="confirmPopUp" align="center">Proceed with No Address</button>
However, despite seemingly being able to find the element in my code and calling Click() on it, grabbing screenshots show that it apparently doesn't register the click since the modal popup stays on the page and the next part errors out due to not finding the elements I'm asking it to find.
Here is the relevant portion of my code:
File.WriteAllText(#"C:\Users\user1\Documents\Testing\source0.html",
_driver.PageSource);
_driver.FindElementById("contactinfo_next").Click();
if (_driver.FindElementByClassName("active-popupbox").Displayed)
{
_driver.GetScreenshot().SaveAsFile(#"C:\users\user1\documents\testing\screenshot01.png", ImageFormat.Png);
_driver.FindElementById("confirmPopUp").Click();
}
_driver.GetScreenshot().SaveAsFile(#"C:\users\user1\documents\testing\screenshot02.png", ImageFormat.Png);
I use the class name to find the div since they apparently have different id's depending on whether the address was "not provided" or "wasn't verifiable but a close match was found", but the class is always the same.
I have PhantomJS grabbing the source before clicking the "contactinfo_next" button, which is what brings up the modal div, and have confirmed that no div with class "active-popupbox" exists before the contactinfo_next button is clicked. "screenshot01.png" does get saved, which means that it is finding the div... but it still doesn't register the button click.
I have tried clicking other elements in the div to bring it "into focus", calling Click() twice on the button, assigning the div to a variable called div and then finding the button using div.FindElements(By.Id("confirmPopUp")) and clicking on each element in the collection, nothing has worked.
Has anyone else run into this issue?
Thanks!
EDIT: I'm using the following NuGet packages for this:
PhantomJS
Selenium WebDriver PhantomJS cross platform
Selenium WebDriver Support Classes
Selenium WebDriver

Okay so I don't know if this is specific to this site that I'm trying to automate, but resizing the PhantomJS viewport worked - in my screenshots, the modal's buttons were overlapping each other. Not sure why it matters but this is what ended up solving my problem. ¯\_(ツ)_/¯
To resize the viewport (requires System.Drawing):
_driver.Manage().Window.Size = new Size(1920, 1080);
Hope this helps anyone else who has a similar problem in the future

How to Debug and resolve - JQuery Cannot read property 'Settings' of Undefined

I have a very weird problem, and I am looking for guidance on how to best debug similar problems in the future.
I have a Simple form that deletes the current active order.
When the user clicks the button, i open a Modal and ask for confirmation.
<form action="/KundeOrdre/Slet" id="Form-SletKundeOrdre" method="post">
<input type="hidden" value="1010101010" name="KundeOrdre.Hoved.OrdreNummer" />
<input type="submit" id="sletKundeOrdre" data-target="Form-SletKundeOrdre" value="Slet" class="btn btn-primary btn-xs" />
</form>
I have two Javascript methods in place.
1. To catch the click on the button and show the Modal instead
2. Catch the confirm click and submit the from
// Show Confirm Dialog when clicking the Delete Buttont
$(function () {
$('#sletKundeOrdre').on('click', function (e) {
e.preventDefault();
$('#modal-confirmDeleteOrder').modal('show');
});
});
// Bind a Listener to the Confirm button
$('#modal-confirmDeleteOrder').on('click', 'button#confirm', function (e) {
$('#Form-SletKundeOrdre').submit();
});
When i run this setup and click confirm in the Model, i get a Javascript error and the Form is not submitted.
jquery.validate.js:1068 Uncaught TypeError: Cannot read property 'settings' of undefined
I am looking for good ideas on how to debug a situation like this.
A plugin is giving me trouble and im assuming its on my end.
This form is included in a page that consists of 2 Partial Views, each containing multiple forms.
This particular form is in the 2nd View and is nr 3 out of 4 forms on that page.
Another observation:
The 4th Form in the same View is a table containing rows. This error happens when the table contains zero rows.
If i add a single row to the 4th Form, this form (3rd) works as expected.
I do not understand why submitting my 3rd form is in any way related to my 4th form.
Update:
I seem to have resolved the issue.
I had an Input button inside my form, that had a link to the 'GemKundeOrdreLinjer' form (my 4th form).
<input type="button" id="gemKundeOrdre" value="#Resources.Panel_KundeOrdreGem" form="GemKundeOrdreLinjer" class="btn btn-primary btn-xs" />
Moving this button outside my form, solved issue for now.
This leaves me with a display issue about buttons, but ill keep this Question updated

C# MVC 5 View Should Only Show A Modal If Validation Passes

I'm working on a C# MVC 5 application that uses Bootstrap. I have a view where the user can fill in some input boxes and confirm entry with a button. It's pretty straight forward stuff.
Anyway, depending on whether the user interaction is an edit or an addition, I show a modal asking them if they like to proceed to the following page that relies on data from the page that they're on.
I.e.
If it's an edit, confirm button posts and sends user back to previous page.
If it's an add, confirm button shows modal dialog asking if they'd like to proceed to adding other stuff which directs the user to another page or sends them to previous page.
I have the following:
<button type="button" id="button_submit" class="btn btn-success" data-toggle="modal" data-target="#questionModal" data-property-one="#Model.Property1" data-property-two="#Model.Property2">
<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
Accept
</button>
Which uses the following jquery
$('#questionModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var modal = $(this);
// Extract info from data-* attributes
var modelProperty1 = button.data('property-one');
var modelProperty2 = button.data('property-two');
// Update the modal's content.
modal.find('#something').val(modelProperty1);
modal.find('#somethingElse').val(modelProperty2);
});
I don't want the question modal to be displayed if required fields are empty.
I have validation in place on all required input fields and a nice warning is shown after a post back to the server. What I need is to be able to do some poor-man's client-side validation and if a required field is not filled-in, post back to the server, ModelState will be invalid which will just return the same view and display error messages and not show this question modal.
Something like
#if (#Model.Property1 != null && #Model.Property2 != null)
{
<button type="button" id="button_submit" class="btn btn-success" data-toggle="modal" data-target="#questionModal" data-property-one="#Model.Property1 " data-property-two=#Model.Property2">
<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
Accept
</button>
}
else #*post back to controller, reconstruct view, and show errors*#
{
<button type="submit" class="btn btn-success">
<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
Accept
</button>
}
or perhaps go to a JavaScript function on button click and do something like this instead:
function stuff()
{
var modelProperty1 = //get #Model.Property1 as it is on client somehow
var modelProperty1 = //get #Model.Property2 as it is on client somehow
if (!modelProperty1 || !modelProperty2)//if validation fails
{
$("form").submit();//post and refresh showing errors
}
else
{
//set modal properties
var modal = $('#questionModal');
modal.find('#something').val(modelProperty1);
modal.find('#somethingElse').val(modelProperty2);
//show modal
modal.modal('show');
}
}
But I'm unsure as to how to get the current values of the input fields as they are client-side.
E.g. var modelProperty1 = #Html.Raw(Json.Encode(#Model.Property1)); is null even when the user has typed something into its input box...
I'm not extremely experienced but I'm learning so I hope I'm not appearing to come across silly with these questions.
Thanks so much for you help :)

You could role your own JS validation or use a library (almost always recommended) such as http://formvalidation.io.
You can't get the values of #Model.Property directly, as that is server side. You need to get them from an element on the page on the client side. You can use jQuery val() as you have done on the model: http://api.jquery.com/val/
Something like:
var modelProperty1 = $("#Property1").val();
Not sure if I am missing something. If you don't have Property1 as a form element somewhere you could write it to a hidden field using
#Html.HiddenFor(m => m.Property1)

Prevent Double Submit on ASP.NET MVC page

I have an ASP.NET MVC 4 view. In the view, I have
<form action="/myAction" method="post">
...
<input type="submit" value=" Save " onclick="this.disabled = true; this.value = ' Please wait... '; return true;" />
</form>
By disabling the button, the form never gets submitted. However, I would like to disable the button after a user clicks it. The reason I want to disable it is to prevent the user from clicking the "submit" button multiple times. What am I doing wrong? I thought if I returned true, the form would still submit.

Disable the button in your form's submitted event, not the button's click event. This is because the click event fires before the form is submitted - though you are returning true, so that shouldn't cause the submission to fail, I don't think.

Use ActionFilters. This blog post has a class you can just drop into your project, decorate your actions and you're done.