Use MVCContrib grid for editing

Question

I just started using the MVCContrib grid in a test project. I'm having a difficult time finding information on how to use it for edit/update/delete.

Can anyone point me to information on how to put a row into edit mode, or if there isn't such a thing for that grid, discuss a best practice for editing list data in MVC.

Darwinism

Answer 1

It appears as if MVCContrib is a simple way to construct the HTML Table from a collection of model objects. It doesn't appear as if has any ability to put a row into edit/update/delete "mode" similar to the WebForms GridView.

However, it does look like you can handle that functionality however you want to. If you want to go to a separate page for edit mode, just put a link in one of the columns with that row's id. The following is taken directly from: http://www.jeremyskinner.co.uk/2009/03/01/mvccontrib-grid-part-5-the-action-syntax/

<% Html.Grid(Model).Columns(column => {
            column.For(x => x.Id).Named("Person ID");
            column.For(x => x.Name);
            column.For(x => x.Gender);
            column.For(x => x.DateOfBirth);
                column.For("View Person").Named("").Action(p => { %>
                     <td style="font-weight:bold">
                    <%= Html.ActionLink("View Person", "Show", new { id = p.Id })%>
                 </td>
                <% });
        }).RowStart((p,row)  => {     
             if (row.IsAlternate) { %>
                   <tr style="background-color:#CCDDCC">
             <%  }  else  { %>
                 <tr>
             <% }
    }).Render(); %>

Here it looks like they are wanting to direct the user to a View Person page: <%= Html.ActionLink("View Person", "Show", new { id = p.Id })%>.

Good luck, and happy coding.

Curley

Answer 2

You can add edit mode rendering by customizing the way a cell is rendered. I'm using the following extension method:

public static IGridColumn<T> Action<T>( this IGridColumn<T> column, Func<T, string> viewAction, Func<T, string> editAction, Func<T,bool> editMode )
{
   column.CustomItemRenderer = ( context, item ) => context.Writer.Write( "<td>" + ( editMode( item ) ? editAction( item ) : viewAction( item ) ) + "</td>" );
   return column;
}

This allows you to specify how the column is rendered in view-mode and in edit-mode. The mode is determined using a third action that should evaluate to true for the row you want to edit.

Using this in a view would look something like this:

<%= Html.Grid( Model.Items ).Columns( column => {
     column.For( x => x.Name ).Action(
        item => Html.ActionLink( item.Name, "SomeAction" ), 
        item => Html.TextBox( "Item.Name", item.Name ),
        item => ( Model.SelectedItem == item ) );
    } )
    .Empty("No items found.")
%>

You can use the same pattern to render action links (edit, apply, cancel etc.) in a cell. If you want to edit multiple rows at once, make sure the field names are unique.

Presumably

Could you explain on extension methods, where they should be chosen to be placed and how to bind them with view? – Dubai

@sharma Extension methods have to be within a reachable namespace, so within a view (.aspx/.ascx) make sure you Import the namespace with the static class that has your extension method. – Presumably

Thank you, It worked well. It indeed moved to a different page, and i did not have textbox appearing to edit it, any directions on how to display edittable textbox and grabbing info from there? – Dubai

@sharma I'm not sure I understand your question. Maybe you should post a new question here on StackOverflow, explain what exactly you want to accomplish and add the code you have now. You'll get much better feedback that way. – Presumably

Can you look at it:<Link> #5544717 – Dubai