ASP.NET MVC - using the same form to both create and edit

Question

Whats the best practice approach to creating a form that is used to both create new models and edit existing models?

Are there any tutorials that people can point me in

Answer 1

Assumptions

1. This is good for the user to see different URLs for different actions in the browser. For example '/pages/create' and '/pages/edit/1'.

2. This is good for developer to have only one action+view pair both to create and edit pages because they are usually very similar. (Also, this is good to have one controller per entity.)

Solution

Default routes registration is '{controller}/{action}/{id}' We can add two more rules before this one:

{controller}/create (should point to 'CreateOrEdit' action)

{controller}/edit/{id} (should point to 'CreateOrEdit' action too)

We can have now something like this:

public static void RegisterRoutes(RouteCollection routes)
{
  routes.MapRoute(
    name: "Create",
    url: "{controller}/create",
    defaults: new { controller = "Default", action = "CreateOrEdit" }
  );

  routes.MapRoute(
    name: "Edit",
    url: "{controller}/edit/{id}",
    defaults: new { controller = "Default", action = "CreateOrEdit" }
  );

  routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Default", action = "Index", id = UrlParameter.Optional }
  );
}

So now both create and edit requests will be handled by 'CreateOrEdit' action. Others will go the default way.

Next what we should do is to add 'CreateOrEdit' action for HttpGet and HttpPost in our controller:

[HttpGet]
public ActionResult CreateOrEdit(int? id)
{
  return this.View(new CreateOrEditViewModelBuilder(this).Build(id));
}

[HttpPost]
public ActionResult CreateOrEdit(CreateOrEditViewModel сreateOrEditViewModel)
{
  if (this.ModelState.IsValid)
  {
    Page page = new CreateOrEditViewModelMapper(this).Map(сreateOrEditViewModel);

    if (сreateOrEditViewModel.Id == null)
      this.UnitOfWork.GetRepository<IPageRepository>().Create(page);

    else this.UnitOfWork.GetRepository<IPageRepository>().Edit(page);

    this.UnitOfWork.Save();
    return this.RedirectToAction("Index");
  }

  return this.View(сreateOrEditViewModel);
}

And the last we have to add view named 'CreateOrEdit'. We can user 'this.Model.Id == null' there to know whether we create or edit.

Result

Now we don't have duplicate code and can have obvious urls like this:

/pages (to see all pages)

/pages/create (to create new page)

/pages/edit/1 (to edit existing page)

/pages/delete/1 (to delete existing page)

I hope it will help someone!

Answer 2

I have a system that I think works pretty well. In my shared views I have 2 generic forms, Edit.aspx and New.aspx

Then in my specific view folder I have a control named EditItems.ascx

In my edit form I have the form tags and specific buttons for edit and in the new form I have the form tags and specific buttons for new. In each I have Html.RenderPartial("EditItems.ascx")

This way your user control can be strongly typed and yet you are reusing the look and feel of the edit and new pages.

Now in some cases, your new page might have a different layout than the Edit page. In that case just add "Edit.aspx" to your specific view folder.

I find this gives me the best combination of reuse while still allowing full customization should I need it. And as for controller actions, yes they should be separate actions.

Answer 3

I use something like

[HttpGet]
public ActionResult EntityEdit(Guid id)
{
    return View();
}

and

[HttpGet]
public ActionResult EntityCreate()
{
   return View("EntityEdit");
}

That seems to work OK.

Answer 4

If the entity has some kind of internal private key (e.g. an "id" member that is always > 0), you can use /Edit/0 instead of /Create

Answer 5

It could be (should be IMO) one controller but different controller actions. Also make sure you have proper HTTP verbs associated with appropriate action. Follow the tutorial posted by E Rolnicki and you will be on your way!

Happy Coding!!

Answer 6

Scott Gu will show the way