Razor support

Apr 22, 2011 at 5:11 AM

I'm just starting out learning ASP.NET MVC and I'm having trouble trying to use your grid control. The main problem seems to be that all the examples I can find are using ASP.NET MVC2 for WebForms but I'm developing a Razor project. Excuse my ignorance but is your control library Razor compatible? I guess I've been equating ASP.NET MVC with Razor but now I realize that the older WebForms model is also still available. Any pointers you could give me would be appreciated, thanks.

Coordinator
Apr 22, 2011 at 2:29 PM

Hi,

The library, as any other MVC-Compliant library has full support for the Razor view engine.

The only different when using the Razor view-engine, is that you need to wrap the Html.Grid call with the built in  Html.Raw method to allow it to render html content.

For example, instead of:

<%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(15)
        .SetIsAutoSize(true)
        .SetDataSource(ViewData["GridDataSource"])
        .SetHeight("200")
        .SetHttpVerb(HttpVerbs.Get)
        .SetColumns<MVC.Controls.Examples.Razor.Models.Store>(cs =>
         {
             cs.Add(x => x.Id).SetAsPrimaryKey();
             cs.Add(x => x.Name);
             cs.Add(x => x.Address);
         }
        )) %>

You will now have:

@Html.Raw(Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(15)
        .SetIsAutoSize(true)
        .SetDataSource(ViewData["GridDataSource"])
        .SetHeight("200")
        .SetHttpVerb(HttpVerbs.Get)
        .SetColumns<MVC.Controls.Examples.Razor.Models.Store>(cs =>
         {
             cs.Add(x => x.Id).SetAsPrimaryKey();
             cs.Add(x => x.Name);
             cs.Add(x => x.Address);
         }
        )))
I can add a Razor based project as part of the examples bundle if you'd like, but this really is the only difference.
Jun 13, 2012 at 7:00 PM
Edited Jun 13, 2012 at 7:09 PM

I would like to see an MVC 3 sample as well. This is not working for me. I am getting the following error when rendering:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1502: The best overloaded method match for 'System.Web.Mvc.HtmlHelper.Raw(string)' has some invalid arguments

Source Error:

 
Line 7:  <h2>@ViewBag.Message</h2>
Line 8:  
Line 9:  @Html.Raw(Html.Grid(new GridControl()
Line 10:               .SetName("grid")
Line 11:               .SetPageSize(10)


Source File: c:\Users\gmattox\Documents\Visual Studio 2010\Projects\jqGridSample\UI.Web\Views\Home\Index.cshtml    Line: 9 

 

Here is my code:

 

@using MVC.Controls.Grid

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

@Html.Raw(Html.Grid(new GridControl()
              .SetName("grid")
              .SetPageSize(10)
              .SetIsAutoSize(true)
              .SetListUrl("Home/List")
              .SetHeight("200")
              .AddColumn(new GridColumnModel("Id").SetAsPrimaryKey())
              .AddColumn(new GridColumnModel("Name"))
              .AddColumn(new GridColumnModel("CompanyName"))
              .AddColumn(new GridColumnModel("Price"))
         ))
Developer
Jun 13, 2012 at 9:07 PM

Here is how I do it.

I define my Grid in my ViewModel. While this is mixing a bit the presentation and the data, I like compiler checking and intellisense. However you can cut and paste the new GridControl into the view if you prefer.

    /// <summary>Members view model</summary>
    public class MembersViewModel
    {
        public GridControl Grid = new GridControl()
            .SetName("memberGrid")
            .SetPageSize(40)            
            .SetWidth("761")
            .SetAdditionalAttributes("shrinkToFit:false")
            .SetListUrl("Members/List")                        
            .SetOnSelectedRowEvent("window.location.href ='Members/Details/'+id;")            
            .SetColumns<MemberModel>(
                cs =>
                    {
                        cs.Add(x => x.MemberID).SetAsPrimaryKey().SetHidden(true);
                        cs.Add(x => x.SN).SetCaption(SharedStrings.SNText).SetWidth("80");
                        cs.Add(x => x.Rank).SetCaption(SharedStrings.RankText).SetWidth("50");
                        cs.Add(x => x.LastName).SetCaption(SharedStrings.LastNameText).SetWidth("100");
                        cs.Add(x => x.Initials).SetCaption(SharedStrings.InitialsText).SetWidth("60");
                        cs.Add(x => x.Supervisor).SetCaption(SharedStrings.SupervisorText).SetWidth("120");
                        cs.Add(x => x.Instrument).SetCaption(SharedStrings.PrimaryInstrumentText).SetWidth("130");
                        cs.Add(x => x.Effective).SetCaption(SharedStrings.EffectiveText).SetWidth("90").SetIsDefaultSort();
                        cs.Add(x => x.AdminStatus).SetCaption(SharedStrings.AdminStatusText).SetWidth("90");
                    });
    }

After to use it in my view:

 

@using MVC.Controls.Grid
@using System.Web.Mvc
@using Website.Models.ViewModels.MemberModels
@model MembersViewModel
@{
    ViewBag.Title = "Members List";
}
@section JavascriptContent {

}
<h2>Member's List</h2>
@Html.Grid(Model.Grid)

Hope this helps!

Jun 14, 2012 at 4:52 PM

I can't find a reference to SharedStrings.

Jun 14, 2012 at 5:25 PM

So, I tried this:

public class ProductsViewModel
{
    public GridControl Grid = new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)
        .SetListUrl("Home/List")
        .SetHeight("200")
        .AddColumn(new GridColumnModel("Id").SetAsPrimaryKey())
        .AddColumn(new GridColumnModel("Name"))
        .AddColumn(new GridColumnModel("CompanyName"))
        .AddColumn(new GridColumnModel("Price"));
}

Index.cshtml:

@using MVC.Controls.Grid
@using System.Web.Mvc
@using UI.Web.Models
@model UI.Web.Models.ProductsViewModel
           
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

@Html.Grid(Model.Grid)

And now getting the following error:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 

Line 10: <h2>@ViewBag.Message</h2>
Line 11: 
Line 12: @Html.Grid(Model.Grid)
Line 13: 
Line 14: @*@Html.Raw(Html.Grid(new GridControl()


Source File: c:\Users\gmattox\Documents\Visual Studio 2010\Projects\jqGridSample\UI.Web\Views\Home\Index.cshtml    Line: 12 

 

 

Developer
Jun 14, 2012 at 5:55 PM

SharedStrings is my resource file, you will have to use your own strings.

 

Try this for your index:

 

@using MVC.Controls.Grid
@using System.Web.Mvc
@using UI.Web.Models
@model UI.Web.Models.ProductsViewModel
           
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

@Html.Grid(
new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)
        .SetListUrl("Home/List")
        .SetHeight("200")
        .AddColumn(new GridColumnModel("Id").SetAsPrimaryKey())
        .AddColumn(new GridColumnModel("Name"))
        .AddColumn(new GridColumnModel("CompanyName"))
        .AddColumn(new GridColumnModel("Price"))
)

Jun 14, 2012 at 11:17 PM

I am still unable to get this to work. Does anyone have a link to a site showing a complete example of MVC Controls using MVC 3 / Razor?

Developer
Jun 15, 2012 at 2:44 PM

Here is a small site using MVC3 and the grid.

 

http://dl.dropbox.com/u/19201607/MvcJqueryControlsApplication.zip

I noted when making a sample project that using @model dynamic causes the MVC Controls Grid extension method not to work. As well a default controller will have their layout set to null, so any jQuery and javascript includes you have in there will not be used, thus making the grid not work. However I don't see either of those issues with the sample you showed us.

Phil

Jun 15, 2012 at 6:24 PM

Thanks, Phil. This works now.

Which version of the controls are you using? I see there is a package available for NuGet that seems to be newer and claims to have Razor support.

Developer
Jun 18, 2012 at 2:13 PM

I believe it is the latest version, though I added headers to the Javascript files.

As for Nuget, last time I checked there was not a version of this control on NuGet. There is a another package MVC Controls Toolkit, but that is a different project.

Phil

Coordinator
Jun 18, 2012 at 2:19 PM

There's still no Nuget package, though I'm working on one

Jun 18, 2012 at 4:34 PM

Oh.... same name, different product. No wonder I was confused.

Developer
Jun 18, 2012 at 5:25 PM

Almost same name, this is MVC jQuery Controls. But yes, I've been caught by that too :)