Using Fiddler to debug AJAX in ASP.NET MVC

Question

I am using Fiddler to debug my MVC application and see all the HTTP requests.

The application is running on http://localhost:51234/mvc

As anybody who has tried to use Fiddler for a site hosted on localhost knows there is an issue - windows won't forward localhost traffic through the proxy if you hit this link directly. You can work around this in several ways, such as my prefered way of using the URL http://ipv4.fiddler:51234/aboutus/contact. This works great.

The problem was I started doing AJAX using :

    <% using (Html.BeginForm()) { %>

If you view the source generated it has actually generated this :

<form action="http://localhost:51234/aboutus/contact" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, onFailure: Function.createDelegate(this, submitComments_failure), onSuccess: Function.createDelegate(this, submitComments_success) });">

Oops!

It generated localhost instead of ipv4.fiddler:51234. So of course when I run the AJAX query Fiddler doesn't see it.

In theory using the machine name should work, but the WebDev.WebServer won't respond if you try to hit directly the machine name http://win-538lf:51234/aboutus/contact

[Fiddler] Connection to win-538lf failed. Exception Text: No connection could be made because the target machine actively refused it fe80::81fc:8f0f:457a:27df%12:51234

Is there a workaround for this?

is it possible to configure WebDev.WebServer to respond to the machine name? Or am I going to have to create a virtual directory or fake host ? I'd prefer not to do that, but i guess its not a big deal.

Answer 1

Have you tried the Firebug extension for Firefox? It can show the Ajax request and response. I've used it with ASP.NET Ajax. Not sure about MVC Ajax.

Answer 2

You could write a HTTPModule which uses a response filter in order to manipulate the HTML output replacing all "localhost:51234" strings.

The HttpResponse class has a very useful property:

public Stream Filter {get; set;}

MSDN provides a helpful description of this property:

"Gets or sets a wrapping filter object used to modify the HTTP entity body before transmission."

Here is a nice article which gives some background how you could do this: Implementing an IIS Application Filter Using .NET HttpModules and Response Filtering (page 3)

As described in the object browser, the Filter gets or sets a wrapping filter object used to modify the HTTP entity body before transmission’. This is exactly what we need to do in order to make modifications to the HTML output of the HttpHandler. The Filter property is declared as type System.IO.Stream. In order to assign our own class to this filter property we need to define our class as inheriting from System.IO.Stream:

public class PageFilter : System.IO.Stream

We now have a Stream class, PageFilter, which can be assigned to the Response.Filter property. By attaching PageFilter to the Response.Filter property, PageFilter will be notified at critical times as data is written to the Response buffer. The most significant event of course is the Write operation. When this method is called, you’ll have the opportunity to modify data as it’s being written to the Response buffer. (I combine this with 'Response.Buffer = true' so that my PageFilter receives the complete response stream in a single method invocation.):

public override void Write(byte[] buffer, int offset, int count)

In the HttpModule, at the start of the request (I do it in OnBeginRequest) simply attach your HTTP response filter by assigning a new instance to Response.Filter:

httpCtx.Response.Filter = 
   new PageFilter(httpCtx.Response.Filter)

---

This other article shows a full working example implementation:

http://aspnetresources.com/articles/HttpFilters.aspx

I hope this helps!

Answer 3

So it turns out that if you use this overload :

using (Ajax.BeginForm(new AjaxOptions()

you get this code generated (the code that 'breaks'):

<form action="http://localhost:51234/aboutus/contact" method="post"

but if you do this and include the action name:

using (Ajax.BeginForm("Contact", new AjaxOptions()

you get this code generated :

<form action="Contact" method="post"

So i'm fine with that for now, but would welcome any other solutions.