There's no such thing as a "partial view" client-side.

This is a bit of a rant, but this fundamental misunderstanding is so widespread, I felt it needed to be addressed. As a lurker for the* tag on StackOverflow, I see an endless barrage of questions to the effect of "How do I refresh a partial view without reloading the page?" This is essentially nonsense. You may not realize it's nonsense, but it is. What you're really trying to ask, if you've asked a question like this, is "How do I use AJAX to request a bit of HTML from the server to replace a portion of the DOM with?" That may not all make sense to you, right now, but let's break it down.

First, a "partial view" is a concept from ASP.NET MVC that merely means a view without a layout. A view, again in the parlance of ASP.NET MVC, is a file with the extension .cshtml or .vbhtml (depending on the language; C# or VB, respectively; being used) that is used by Razor (the default ASP.NET MVC templating engine) to render a response for a controller action that returns a view result (ViewResult/PartialViewResult). That's a little heady, but the long and short is that a "partial view" is only a thing, server-side.

Once a response is sent to the client, all you have is an HTML document. Client-side, it doesn't matter whether you used a partial view, no partial views, or a 100 partial views. The client receives an HTML document, and in the case of the most typical web client, a web browser, it renders that document and presents it to the user. Part of that rendering process involves creating the DOM, or Document Object Model, for the web page. The browser parses all the different HTML tags in the response and creates a hierarchical structure that represents the document being viewed by the user. This DOM is all that exists after the browser does its work. You technically don't even have HTML any more at this point, just the browser's internal representation of it.

The web operates via a request-response model: a client makes a "request" for some resource from a server and that server responds by sending some representation of that resource back to the client as a "response". As a result, once the browser recieves this HTML document from the server, the request is finished, and there's no further interaction between the browser and the server. If you want something new from the server, the client must initiate another request. Traditionally, this causes the "page", the view the browser provides to the user, to change, loading some different DOM in place of the one that was in use previously. However, via a JavaScript technology called AJAX (Asynchronous JavaScript and XML), a sort of sub-request can be made that doesn't cause the user's view inside the browser to change completely.

In the sense of an AJAX request, the browser is essentially acting as thin client. All it does is make the request and exposes the response it receives as part of a JavaScript object. With an AJAX request, the browser does not (automatically, at least) do any of its normal work of building a DOM and rendering things to the user's view. It is the responsiblity of the JavaScript code that makes the AJAX request to determine what to do with the response that is received. That response can take many forms (just as a normal browser request can), but the most common are JSON, XML or HTML. JSON and XML are both representational formats that most typically define some data structure, while HTML is more traditionally used to decribe a presentational structure.

In the simplest of cases, where the intent is merely to grab a new bit of HTML from the server to replace some existing page content, an AJAX request is made to a server. In the parlance of ASP.NET MVC, the particular resource requested would be an action that returns a partial view (PartialViewResult). Again, the only thing that makes a partial view a partial view is that it doesn't include a layout, and since the goal is to only modify a portion of the page's content, one wouldn't want to return the full page view with all the header/footer/etc. The action will invoke Razor to render the contents of whatever view file is indicated (either by convention or explicitly in the code) and then return this HTML document to the browser. It's important to note that this is an HTML document; It's not a partial anything, but a full-fledged HTML document. Now, the JavaScript callback method that was set when intially making the AJAX request will be invoked and passed the response that was received from the server, in this case, an HTML document. From that callback method, further JavaScript can be utilized to add that HTML to the page's DOM or to replace a portion of that DOM.

There's a million and one tutorials detailing the exact procedures and code to make all that happen; that's not the purpose of this post. My goal is here is explain the high-level concepts of what's happening. I feel that entirely too few web developers actually understand how the web (and the Internet, in general, for that matter) works, and this is a very grievous problem in the community. I love that the web development community is so accepting. One of the beautiful and inspiring things about the web is how open it is and how low a barrier to entry it has. That said, I think we as a community tolerate a sustained level of ignorance that other communities would not. If you wanted to develop an Android application and never bothered to learn anything about how Android as a platform actually functions, the Android development community would have no problem telling you that you needed to go do your homework - learn the platform - first, before attempting to run off and develop an Android app. However, there's this pervasive assumption in the web development community that you don't need to understand the web or the Internet as a platform in order to develop web applications. That's both foolish and dangerous.

Hopefully, this will help those that stumble across it learn a little bit more about the platform they aspire to develop for, and to those: I encourage you to seek out similar resources to learn more about the web and the Internet, in general. Having a good working knowledge of the platform your web application runs on will not only make you a better and more competent developer but it will also aid you in figuring out solutions to problems that may arise along the way.

comments powered by Disqus