Grid.MVC CRUD操作的单个视图

Question

I am using Grid.MVC( https://gridmvc.codeplex.com/ ) and I need to render a grid and CRUD for the grid in the same view.

@model IEnumerable<Grid.Models.Catagory>
...
...
  @Html.Grid(Model).Columns(columns =>
        {
            columns.Add()
            .Encoded(false)
            .Sanitized(false)
            .Titled("CatagoryName").RenderValueAs(o => RenderCatagoryName("CatagoryName", o.CatagoryName));

            columns.Add()
            .Encoded(false)
            .Sanitized(false)
            .Titled("Color").RenderValueAs(o => RenderCatagoryName("Color", o.Color));

            columns.Add()
            .Encoded(false)
            .Sanitized(false)
            .Titled("Print Template").RenderValueAs(o => RenderCatagoryName("Print Template", o.PrintTemplate));
        }

My controller

    public ActionResult Index()
    {           
        return View(clients);
    }

This works fine, but when I need to do an insert in that same view, I am unable to use the same model since it is an IEnumerable type.

 --Insert values--
 //couldn't use the model for insert directly since it is a list type
        @Html.LabelFor(m => m.)
        @Html.TextBoxFor(m => m., new { maxlength = 50 })

My ViewModel

public class Catagory
{

    public int CatagoryID { get; set; }
    public string CatagoryName { get; set; }
    public string Color { get; set; }
    public string PrintTemplate { get; set; }
    public string Language { get; set; }
}

Is there any way to use the same view for both the Grid.MVC and insert operations

Answer 1

make the list of Catagory (btw it's spelled 'Category') be a property of a new view model.

public class MyViewModel
{
     public Category CategoryToInsert { get; set; }
     public IEnumerable<Category> CategoriesToShow { get; set; }
}

View:

 @model MyViewModel
...
...

@Html.Grid(Model.Categories).Columns(columns =>
  ...

@* Insert form: *@
@Html.LabelFor(m => m.CategoryToInsert.CategoryName)
@Html.TextBoxFor(m => m.CategoryToInsert.CategoryName, new { maxlength = 50 })