When doing multiple simultaneous Ajax calls cause my MVC web application to block. I have been reading and I found two topics with the same problem
Why would multiple simultaneous AJAX calls to the same ASP.NET MVC action cause the browser to block?
Asynchronous Controller is blocking requests in ASP.NET MVC through jQuery
The solution for them is disabling the session using ControllerSessionStateAttribute .I have try using the attribute but my code is still blocking. You can reproduce the problem creating a new MVC3 web application with the following code
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<p>
Example of error when calling multiple AJAX, try click quickly on both buttons until the server get blocked.
</p>
<button onclick="cuelga++;SetCallWaiting(cuelga);">Set a call waiting in the server</button><button onclick="libera++;ReleaseEveryone(libera);">Release all calls in the server</button>
<div id="text"></div>
<script type="text/javascript">
var cuelga = 0;
var libera =0;
function ReleaseEveryone(number) {
var url = "/Home/ReleaseEveryone/";
$.post(url, { "id": number },
ShowResult1, "json");
};
function SetCallWaiting(number) {
var url = "/Home/SetACallWaiting/";
$.post(url, { "id": number },
ShowResult, "json");
};
function ShowResult (data) {
$("#text").append(' [The call waiting number ' + data[0] + ' come back ] ');
/* When we come back we also add a new extra call waiting with number 1000 to make it diferent */
SetCallWaiting(1000);
};
function ShowResult1(data) {
$("#text").append(' [The release call number ' + data[0] + ' come back ] ');
};
</script>
and this is the HomeController
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Threading;
using System.Web.SessionState;
namespace ErrorExample.Controllers
{
[SessionState(SessionStateBehavior.Disabled)]
public class HomeController : Controller
{
private static List<EventWaitHandle> m_pool = new List<EventWaitHandle>();
private static object myLock = new object();
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
[HttpPost]
public JsonResult SetACallWaiting()
{
EventWaitHandle myeve;
lock (myLock)
{
myeve = new EventWaitHandle(false, EventResetMode.ManualReset);
m_pool.Add(myeve);
}
myeve.WaitOne();
var topic = HttpContext.Request.Form[0];
return Json(new object[] { topic });
}
[HttpPost]
public JsonResult ReleaseEveryone()
{
try
{
lock (myLock)
{
foreach (var eventWaitHandle in m_pool)
{
eventWaitHandle.Set();
}
m_pool.Clear();
}
var topic = HttpContext.Request.Form[0];
return Json(new object[] { topic });
}
catch ( Exception )
{
return Json( new object[] { "Error" } );
}
}
}
}
Thank you very much in advance.
I don't think this issue is actually related to the SessionState at all.
Every browser makes only a limited number of concurrent requests to a domain - see this article for details.
I think the issue is caused by the fact that if you start multiple "SetACallWaiting" requests, you run into the situation where the browser won't even send the request to the server until the previous requests are unanswered - so the request to "ReleaseEveryone" is not sent by the browser. Therefore, you get the locking behaviour.
Also there may be an issue with the code sample you posted - the "SetCallWaiting(1000);" line in the function ShowResult. With this call, you won't actually reduce the number of waiting requests, as each time a request is released, it will be recreated again (I'm not sure if this is what you wanted or not).
To test this behaviour, look at the requests being sent by the browser and set breakpoints in the controller's actions, and see how it behaves for various umber of requests.
Related
I have a page called Bookprogram which contains 6 input controls namely, txtName, txtEmail, txtPhone, selectcat[dropdown for categories], txtDate, txtMessage. Now when am done with all the validations for the above control, I want to store the data in db. I know how to perform both in ajax as well as complete page posting.
If it's in ajax, after validations, I would just call $.ajax and post the data as a string and fetch it in controller as below:
[HttpPost]
public JsonResult BookProgram(string name, string email, string phone, string category, string date, string message)
{
//code to save into db
return Json(result);
}
If I have to post a whole page, after validations I would just do a $(form).submit(); and write as below in controller:
[HttpPost]
public ActionResult Bookprogram(Mymodel model)
{
//Code to save the data
return View();
}
I just want to know which is better, safe and good to use as I have to display a message after successful submission. I know I can take either of the ways to display message but Is postback[page refresh] really needed in this scenario and if yes what are the advantages of it over ajax post?
EDIT :
I just went through this link and tried to implement 2nd solution of highest voted answer but for my bad luck it wasn't hitting the controller itself. I have kept breakpoint in my controller.
$(form).on("submit", function (e) {
e.preventDefault();
ValidateForm(form);
var selectedVal = $(form).find('select').children(":selected").val();
if(selectedVal=="")
{
$(form).find('div.bootstrap-select').children(":first").addClass('alert-danger');
$(form).find('div.bootstrap-select').next('.text-danger').html('Please select a category!');
}
var formContainer = $(form + ' .text-danger');
if ($(formContainer).text().length == 0) {
$.ajax({
url: '/Home/BookProgram/',
type: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: $('#fbookprogram').serializeArray(),
success: function (data) {
if (data.result == "Success") {
alert('success');
}
else {
alert('fail');
return false;
}
return true;
}
});
}
$(form).unbind('submit');
return false;
});
Controller :
public ActionResult BookProgram(MyModel model)
{
if(ModelState.IsValid)
{
//code to save data
}
return Json(new { success = false });
}
What is that I am missing here.
Post Back
Browser Handling - The only advantage I can think of is that the browser will handle redirects and progress loading for you. You don't need to write the logic to redirect users or show a loading bar.
AJAX
Asynsconous -
With AJAX you're getting asyncronous calls so the browsers thread isn't blocked. This allows the user to still interact with the UI whilst waiting for the response from your request.
Better Performance -You generally don't need to reload the entire page resulting in less overhead & HTTP requests being made.
FYI - You can still model bind with JsonResult
public JsonResult BookProgram(Mymodel model)
{
//code to save into db
return Json(result);
}
Post back - is a classic workflow. Delegate most of inner work to your webbrowser. All your responce logic calculated on server side.
AJAX - is a modern way of building dynamic web-applications. Base approach for single-page-applications. Most of work in this case should be done on client side.
I have a ASP.NET MVC3 project where the main aspx page is doing a dynamic loading for its parts using jQuery ajax. So basically when the site loads, it hits /Home/Index and then within Index (aspx) view, there are several lines of jQuery that make ajax calls (to /Home/PartOne and /Home/PartTwo to populate parts of the page.
So every time the page loads, it basically is doing 3 requests: to get index, to get PartOne, and then PartTwo.
The question: Why is there some kind of "wait" time for the the third request to execute? I thought this was the browser concurrent request limit, but why isn't it executing after the 1st request is done?
When I experimentally put "OutputCache" attribute on "PartTwo", it behaves as expected, that it was executing fast. This hints that the problem is not in IIS, but somewhere after that and before it hits my action method.
Here is a screen shot from Chrome network profiler:
Here is a screen shot on the MvcMiniProfiler - look at the 3rd row/value, it is waiting for 500ms before executing my controller's action code.
My controller code looks like this. Although I snipped the actual code, but code for PartTwo is very trivial (no long computation, no db calls, etc):
public class HomeController : Controller {
public ActionResult Index() {
// do something here
return View();
}
public ActionResult PartOne() {
// do something here
return View();
}
public ActionResult PartTwo() {
// do something here
return View();
}
}
My javascript:
$(document).ready(function () {
$.ajax({
url: "/Home/PartOne",
cache: false,
success: function (data, textStatus, request) {
$("#TestContainerOne").html(data);
}
});
$.ajax({
url: "/Home/PartTwo",
cache: false,
success: function (data, textStatus, request) {
$("#TestContainerTwo").html(data);
}
});
});
My index.aspx:
<h2>Home page</h2>
<div id="TestContainerOne"></div>
<div id="TestContainerTwo"></div>
PartOne.ascx:
<h2>Part One</h2>
PartTwo.ascx:
<h2>Part Two</h2>
Help?
You should use read only session state or disable it completely in order to get parallel processing of Ajax requests. By default the server locks the session state for requests coming from the same client, so the requests are executed sequential.
This is done by decorating your controller with the SessionState attribute:
[SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)]
public class HomeController : Controller {
public ActionResult Index() {
// do something here
return View();
}
public ActionResult PartOne() {
// do something here
return View();
}
public ActionResult PartTwo() {
// do something here
return View();
}
}
Im new to Web Development and its principles so apologies if my question does not seem clear.
Story So Far......
Im writing an Open Source application to learn ASP.NET MVC3. Now im at the stage where im creating my CRUD controller to allow me to create some new Types. Now I have created a SiteAdmin Controller which holds my Dashboard, with has a View. The View will contain tabs . I have been learning how to handle tabs using the following blog post and JQuery UI
http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/
I have decided to use the AJAX example to handle my tabs, whereby I pass an index parameter to a Controller Action Method called AjaxGetTab . This method (as per the blog post) returns a Partial View for the required Type. Within the Partial View there are Create Controller Action Method's, for e.g. CreateTransactionType (HttpPost), which create new records.
"Stop the waffling what is the problem"
The problem is that my list within the tab on the view doesn't refresh after the Create method is finished. This problem only exists in IE9 (Only IE i have tested) but Chrome and Firefox work, i.e. the list refreshes.
I have checked the Database records exists.
My code is here:
JQuery in Dashboard.cshtml:
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
getContentTab (1);
});
function getContentTab(index) {
var url='#Url.Content("~/SiteAdmin/AjaxGetTab")/' + index;
var targetDiv = "#tabs-" + index;
var ajaxLoading = "<img id='ajax-loader' src='#Url.Content("~/Content")/ajax-loader.gif' align='left' height='28' width='28'>";
$(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>");
$.get(url,null, function(result) {
$(targetDiv).html(result);
});
}
SiteAdminController AjaxGetTab Method:
/// <summary>
/// AJAX action method to obtain the correct Tab to use.
/// </summary>
/// <param name="index">Tab number</param>
/// <returns>Partial View</returns>
public ActionResult AjaxGetTab(int id)
{
string partialViewName = string.Empty;
object model = null;
//--Decide which view and model to pass back.
switch (id)
{
case 1:
partialViewName = "_TransactionType";
model = db.TransactionTypes.ToList();
break;
case 2:
partialViewName = "_DirectionType";
model = db.DirectionTypes.ToList();
break;
case 3:
partialViewName = "_UserType";
model = db.UserTypes.ToList();
break;
case 4:
partialViewName = "_CurrencyType";
model = db.CurrencyTypes.ToList();
break;
case 5:
partialViewName = "_tabError";
break;
}
return PartialView(partialViewName,model);
}
}
SiteAdminController CreateTransactionType Method:
[HttpPost]
public ActionResult CreateTransactionType(TransactionType model)
{
try
{
// TODO: Add insert logic here
if (ModelState.IsValid)
{
model.id = Guid.NewGuid();
model.RecordStatus = " ";
model.CreatedDate = DateTime.Now;
db.TransactionTypes.AddObject(model);
db.SaveChanges();
}
return RedirectToAction("Dashboard");
}
catch
{
return PartialView("_tabError");
}
}
Replace your
$.get(url,null, function(result) {
$(targetDiv).html(result);
});
By:
$.ajax({
type: 'get',
url: url,
cache: false,
success: function(result) {
$(targetDiv).html(result);
}
});
The problem is that IE caches ajax requests, so by setting cache: false in the settings it should work.
Right now I'm learning about MVC's implementation of Ajax and I'm having trouble getting it to work correctly. Here's what I have:
#Ajax.ActionLink("Click here to get a title", "Yo",
new AjaxOptions { OnSuccess = "alert(\"YES!\")", OnFailure = "alert(\"WHY?!\")" })
And here are the two controller methods:
public PartialViewResult GetThatTitle()
{
var titular = new TitleDataEntity { };
titular.TitleName = "Inception!";
titular.PublishDate = DateTime.Now;
titular.Id = 2;
return PartialView("_testView", titular);
}
public JsonResult Yo()
{
var titular = new TitleDataEntity { };
titular.TitleName = "Inception!";
titular.PublishDate = DateTime.Now;
titular.Id = 2;
if(Request.IsAjaxRequest())
{
return Json(titular);
}
return Json(titular);
}
When I call the function "Yo", the browser gives me the "WHY?!" alert box. But when I call GetThatTitle, it gives me the success alert. Why is it failing when I try and return a Json result?
You need to allow GET requests like this when returning JSON which are disabled by default:
return Json(titular, JsonRequestBehavior.AllowGet);
Also I would strongly recommend you using FireBug. It shows all AJAX requests in its console and you see the requests and responses. If you have used it you would have seen the following:
InvalidOperationException: This
request has been blocked because
sensitive information could be
disclosed to third party web sites
when this is used in a GET request. To
allow GET requests, set
JsonRequestBehavior to AllowGet.]
which would have put you on the right track of course.
In my MVC website, I am creating a small forum. For a single post I am rendering my "Single(Post post)" action in my "PostController" like below
<% Html.RenderAction<PostController>(p => p.Single(comment)); %>
Also When a user reply a post I am sending reply as an ajax request to my "CreatePost" action then return "Single" view as result of this action like below
public ActionResult CreatePostForForum(Post post)
{
//Saving post to DB
return View("Single", postViewData);
}
When I do like that only the view is being rendered, Codes in "Single" Actions body isn't beig executed.
What is the best way to do this?
Also I want to return "Single" action result as string in my JsonObject like below
return Json(new{IsSuccess = true; Content= /*HERE I NEED Single actions result*/});
You can use something like this, but be very careful with this. It can actually cause badly traceable errors (for example when you forget to explicitly set view name in Single method).
public ActionResult Single(PostModel model) {
// it is important to explicitly define which view we should use
return View("Single", model);
}
public ActionResult Create(PostModel model) {
// .. save to database ..
return Single(model);
}
Cleaner solution would be to do the same as if it was post from standard form - redirect (XMLHttpRequest will follow it)
For returning ajax views wrapped in json I use following class
public class AjaxViewResult : ViewResult
{
public AjaxViewResult()
{
}
public override void ExecuteResult(ControllerContext context)
{
if (!context.HttpContext.Request.IsAjaxRequest())
{
base.ExecuteResult(context);
return;
}
var response = context.HttpContext.Response;
response.ContentType = "application/json";
using (var writer = new StringWriter())
{
var oldWriter = response.Output;
response.Output = writer;
try
{
base.ExecuteResult(context);
}
finally
{
response.Output = oldWriter;
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
response.Write(serializer.Serialize(new
{
action = "replace",
html = writer.ToString()
}));
}
}
}
It is probably not the best solution, but it works quite well. Note that you will need to manually set View, ViewData.Model, ViewData, MasterName and TempData properties.
My recommendation:
Post your forum reply (and whatever options) via Ajax.
Return your JSONResult, using this method: ASP MVC View Content as JSON to render your content.
In the OnSuccess handler of your ajax call, check if IsSuccess is true. If successful, append the content to the appropriate container using JQuery