Implementing "Preview" functionality in asp.net mvc

Question

Hi All,

I am using ASP.NET MVC and jquery. I would like to implement preview functionality to a form. i.e. I have a form with number of fields for example name, address etc.. Before the user submits the info, he/she can preview it as to how it will appear on the site. Could any one please point me to right direction as to how I could implement this in a cleaner way? I have tried regenearting the html on click.. but it's very messy.

Any help will be highly appreciated.

Answer 1

You could create a new Controller Action called Preview(YourModel model); which would display everything as needed for preview.

The Preview-View should be Strongly typed with your model containing a Submitbutton which THEN calls the [HttpPost]Save/Update(YourModel model); Action.

Answer 2

I'd go with the preview without posting the form, although generating the html could get a bit messy but you can use microsoft's template plugin (included in jquery 1.4.3) to alleviate that. In my book, you're on the right track already.

Answer 3

It should be pretty similar to your "View"<-> "Read" Action from the CRUD operations, the only difference is, you are not populating the model from the database because its not saved yet (in some cases) and you already have the model binded from the FormColecction.

public ActionResult View(int id)
{
//get the data from the DB
//populate the model
//return the view
}

public ActionResult PreView(YourModel model)
{
//populate the model or some pre-formatting
//return the view
}

Using Ajax on the Preview Action get the job done and you don't need to use too much js (that is always a little messy)