by jmorris
1. May 2009 21:49
ASP.NET MVC introduces the notion of partial views, which either allow specific Actions to be called on a Controller and the resulting view outputted as HTML or allow Model Data to be passed from the current view to another, child view.
Calling Actions on a Controller and returning “sub” Views is incredible useful in situations were Ajax type behavior is required, since the resulting output is simply raw HTML. The HTML can then be appended to a DOM element via JQuery, some other JavaScript library or simply with straight JavaScript.
Unfortunately if you are still working on Web Forms projects or you have no need or desire to drink the kool-aid of MVC, you are pretty much out of luck for similar functionality built into Web Forms. However, it is fairly easy to implement this sort of behavior within the context of a Web Forms environment and then use a Ajax to render pure HTML from these “partial views.”
The code for doing this is surprising simple and was adapted from a Scott Guthrie posts a few years back:
In this case I allow a Dictionary containing the name value pairs of the properties on the View that will be loaded to be passed in as well. The key must match the name of a Property on the View and if it does the Property is set with the value of the key. This is useful in cases were you would like a parent View to pass data to a child View for initialization situations, etc.
I also have a static collection of Views defined which map a View’s name to a path in my applications root directory. RenderView looks up its path and loads the control before setting the Views data. In my case I load this from a table via a Data Access Object (DAO) in the Global.asax on Application_Start:
The PageUserControlDAO loads the View definitions from the database once when the application is started or the App Pool is restarted/refreshed.
Rendering the View involves calling the RenderView method and passing in the appropriate View name and a Dictionary containing the data to into the view:
In this case I used Page_Load to render the View into a panel (div) which isn’t too exciting. The really useful aspect however is when you combine JQuery and Web Services to render the View on demand from the client.
Rendering Views from the Client Using JQuery and Web Services
The Web Service:
The JQuery code to load the view and attach it to the DOM:
In the JavaScript above, renderView takes three parameters: the name of the View to render, the data to pass to the View, and the DOM container to load the view into. The $.ajax(..) method is a JQuery method that specifies the WebService to use, the method to call (RenderView) and the content type to specify in the request header.
When the method is called like so from the client:
renderView('ImageView', { 'CurrentPageElementId': 100 }, $view);
The WebService method is invoked, which renders the view and returns pure HTML that is then appended to the DOM element $view (a simple div or span).
Subscribe