making an Ajax call on 'Save' button click on popup - asp.net-mvc-3

Question

I am working on a form where the user clicks on Register button, then a popup opens for the user to enter the details for registering....The user name should be unique for this, so when the user clicks on the submit button im checking with the database whether that username is already existing or not, if it already exists the im showing the error message on the same popup that 'username already exists'...
This is my code for that which gets fired on the save button click
$.ajax({
url: '#Url.Content("~/Registration/CheckUNameExists")',
type: 'GET',
data: { UName: $('#UserName').val() },
success: function (data) {
if (data == 'True') {
$('#UserAddError').html('User Name already exists!');
} else {
$("#update-message").html('');
$("#addUserForm").submit();
$(this).dialog("close");
}
}
});
public JsonResult CheckUNameExists(string UName)
{
}
[HttpPost]
public ActionResult RegisterUser(Regitration Reg)
{
}
This is working fine, but in some rare cases this is giving a problem. After filling the details in the popup when the user clicks the save button some times its taking 3-4 seconds time for it to save and in that case the users are clicking the save button 2-3 times...In that case the save button click is checking the method CheckUNameExists on for the 1st time and then RegisterUser is being called multiple times based on the number of times the user clicks the save button nd the same records are getting saved into db multiple times..
For testing purposes i put a breakpoint so that i can click the 'save' button n number of times, then clicked the save button 4 times and CheckUNameExists was hit only the 1st time but after that RegisterUser was called 4 times and the record was inserted 4 times.
Don't understand the issue here and how to get rid of it?

Answer 1

You are sending a GET ajax request to check if the user exists, so the respone is probably getting cached by the browser. jQuery provides a setting for the ajax function that you can use for enabling/disabling caching which is enabled by default, see the cache setting here
Try disabling caching for that ajax call, adding the option cache:false to the ajax settings:
$.ajax({
url: '#Url.Content("~/Registration/CheckUNameExists")',
type: 'GET',
data: { UName: $('#UserName').val() },
cache: false,
success: function (data) {
...
That should fix the issue of CheckUNameExists not being called.
However you can still have race conditions with multiple ajax calls. A better solution would be to send a single ajax POST that does both the checking of the unique name and the user registration. This should prevent errors due to the asynchronous nature of ajax calls, when your GET for veryfing the user happens before the first time the button was clicked finishes submitting the form.
This will require a bit of refactoring:
$(".actionSubmit").click(function () {
$(".actionSubmit").attr('disabled', 'disabled');
$.ajax({
url: '#Url.Content("~/Account/RegisterUser")',
type: 'POST',
data: $("#addUserForm").serializeArray(),
success: function (data) {
if (!data.success) {
$('#UserAddError').html(data.errorMessage);
$(".actionSubmit").removeAttr('disabled');
} else {
$(this).dialog("close");
//Possibly redirect here, same logic you had in RegisterUser method
}
}
});
return false;
});
[HttpPost]
public ActionResult RegisterUser(Regitration Reg)
{
//Check if user exists, whatever you were doing in CheckUNameExists
bool userAlreadyExists = ...;
if (userAlreadyExists)
{
return Json(new { success = false, errorMessage = "User Name already exists!" });
}
//Register user
...
return Json(new { success = true });
}
You may want to combine that solution with JavaScript that disables the button on its click event and does not enables it again until you are done (either because the name already exists or because the POST finished). I have showed this in the code above, where I am disabling/enabling the submit button.
The changes above should prevent issues related with requests coming from the same client. However you can still have users from different machines trying to register at the same time with the same user name. To prevent those errors you will need to wrap the C# code in a transaction scope, so both user verification and registration happen inside a transaction:
[HttpPost]
public ActionResult RegisterUser(LoginModel model)
{
using (var tran = new TransactionScope(TransactionScopeOption.Required, new TransactionOptions { IsolationLevel = IsolationLevel.ReadCommitted }))
{
//Check if user exists, whatever you were doing in CheckUNameExists
bool userAlreadyExists = ...;
if (userAlreadyExists)
{
return Json(new { success = false, errorMessage = "User Name already exists!" });
}
//Register user
...
tran.Complete();
}
return Json(new { success = true });
}
Hope this helps!