ASP.NET MVC Reuse Partial Views in Ajax

I wrote a sample web application which demonstrates how ASP.NET MVC partial views can be reused for loading content via Ajax. The most popular scenario nowadays is when you want to load a content via Ajax you’ve to create a HTML template where you’re going to pass the data and apply it to the web page. Well, I think that we must think for the simplest and easier way for managing templates into our web apps.

We already have write once the HTML template by having partial view! The partial view exists and I don’t want to write any HTML with concatenating strings in JavaScript scripts.

I still follow the principle by using one data model and one and the same partial view. I do not load the data by applying different HTML template via Ajax.

As you see on screenshot below the data that is highlighted with red is loaded when the entire web page loads. There is Razor partial view which visualize the model that I pass to it. So, I have a form as well and I want to submit the content and show on the first position before the other.  I have the option to copy the HTML from the Razor partial view and concatenate it with the data that will come via REST and apply with jQuery to the web page. I don’t want to do this and that’s why I wrote a Razor engine view parser which helps me to reuse existing partial view as a template.

 

Dynamic Templates

I’m quite sure that this implementation can be done better but I just wanted to make it happen before I forgot to implement it.

As you see the partial view is exactly the same.

In this implementation I use jQuery only for making Ajax calls and load the data in the proper HTML position. There is no HTML concatenation and repetition of the code which I use for the articles.

Dynamic TemplatesI created a GitHub repository where you can look at the code.

I believe that the code needs to be improved and tested before you want to use for any apps. I just wanted to demonstrate that it’s easy to reuse existing source code. I hope you will find it useful.

 

1335 views

Introduction to AppHarbor

I found this great .NET service called AppHarbor. This article is introduction to AppHarbor and how to use it with GitHub. I was impressed how easy is to deploy your application directly from source control (there are three options: GitHub, Bitbucket and CodePlex). I read several articles about AppHarbor and I see it quite good for .NET development.

There are 3 plans that you can choose when you create your account at AppHarbor. For the demonstration purpose I choose the free one. The free plan provides the option to choose application name which is used as subdomain  {yourappname}.apphb.com AppHarbor provides add-ons that you can use at your application like MySQL, MongoDB, MSSQL, etc. There are different plans for each one so you can choose what you need at your application.

Creating a new application at AppHarbor is so easy, just pickup your application name and choose region (currently US and Europe are possible options).

AppHarbor create an app

For the demonstration purpose I created GitHub repository which I integrated with AppHarbor.

VS ASP.NET WebForms After creating the new application you can choose the integration options. I committed ASP.NET WebForms application to GitHub repository which I created earlier.

GitHub repositoryAfter integrating AppHarbor and GitHub you can follow build status according to commits that you have done at your repository.

BuildAs you can see in the screenshot the first commit couldn’t pass the full build process that was because of missing file which I removed from the repository but I didn’t build it and VS missed to remove the file from .csproj file. That’s why I did another commit with that change. 2nd commit is ready for deployment the only thing that I had to do is to activate this build and it goes automatically live.

Home

If the application couldn’t pass the build there is full detailed log (StackTrace). It’s easy to understand why your application cannot pass build.

How to deploy changes to AppHarbor after creating a new application?

Well, after I published my application I found that one link is broken. So, I had to do a quick fix and publish it again.

Broken LinkI applied the change in code and did another commit. The problem was that I missed to HTTP protocol at the begging of the link and web browser was leading to non-existing location.

GitHub commitThen the change was ready for deployment at AppHarbor.

Build statusThe result was perfect, the link is working properly and the whole process to apply the change it took less than minute.

 

973 views