Asp.net mvc, view with multiple updatable parts - how?

Posted by DerDres on Stack Overflow See other posts from Stack Overflow or by DerDres
Published on 2010-04-18T11:33:40Z Indexed on 2010/04/18 11:43 UTC
Read the original article Hit count: 495

Filed under:
|
|

I have started doing asp.net mvc programming and like it more everyday.

Most of the examples I have seen use separate views for viewing and editing details of a specific entity.

E.g. - table of music albums linking to separate 'detail' and 'update' views

[Action] | Title | Artist

detail, update | Uuuh Baby | Barry White

detail, update | Mr Mojo | Barry White

With mvc how can I achieve a design where the R and the U (CRUD) are represented in a single view, and furthermore where the user can edit separate parts of the view, thus limiting the amount of data the user can edit before saving?

Example mockup - editing album detials:

I have achieved such a design with ajax calls, but Im curious how to do this without ajax. Parts of my own take on this can be seen below. I use a flag (enum EditCode) indicating which part of the view, if any, that has to render a form. Is such a design in accordance with the framework, could it be done more elegantly?

AlbumController

public class AlbumController : Controller
{
    public ActionResult Index()
    {
        var albumDetails = from ManageVM in state.AlbumState.ToList()
                           select ManageVM.Value.Detail;
        return View(albumDetails);
    }

    public ActionResult Manage(int albumId, EditCode editCode)
    {
        (state.AlbumState[albumId] as ManageVM).EditCode = (EditCode)editCode;
        ViewData["albumId"] = albumId;
        return View(state.AlbumState[albumId]);
    }

    [HttpGet]
    public ActionResult Edit(int albumId, EditCode editCode)
    {
       return RedirectToAction("Manage", new { albumId = albumId, editCode = editCode });
    }

    // edit album details
    [HttpPost]
    public ActionResult EditDetail(int albumId, Detail details)
    {
        (state.AlbumState[albumId] as ManageVM).Detail = details;
        return RedirectToAction("Manage", new { albumId = albumId, editCode = EditCode.NoEdit });// zero being standard 
    }

    // edit album thought
    [HttpPost]
    public ActionResult EditThoughts(int albumId, List<Thought> thoughts)
    {
        (state.AlbumState[albumId] as ManageVM).Thoughts = thoughts;
        return RedirectToAction("Manage", new { albumId = albumId, editCode = EditCode.NoEdit });// zero being standard 
    }

Flag - EditCode

public enum EditCode
{
       NoEdit,
       Details,
 Genres,
       Thoughts
}

Mangae view

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Controllers.ManageVM>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Manage
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Manage</h2>
    <% if(Model.EditCode == MvcApplication1.Controllers.EditCode.Details) 
       {%>
        <% Html.RenderPartial("_EditDetails", Model.Detail); %>    
    <% }else{%>
        <% Html.RenderPartial("_ShowDetails", Model.Detail); %>    
    <% } %>
    <hr />
    <% if(Model.EditCode == MvcApplication1.Controllers.EditCode.Thoughts) 
       {%>
        <% Html.RenderPartial("_EditThoughts", Model.Thoughts); %>    
    <% }else{%>
        <% Html.RenderPartial("_ShowThoughts", Model.Thoughts); %>    
    <% } %>

© Stack Overflow or respective owner

Related posts about asp.net-mvc

Related posts about editing