MVC Controls Toolkit

New Post: Unterminated call stack on Client Block

gonzaw — Tue, 21 May 2013 01:22:26 GMT

When I run that, every time I hit the SortableList button to add a new line, I get this error:

"Uncaught Error: Unable to parse bindings.
Message: ReferenceError: addNewItem is not defined;
Bindings value: click: addNewItem "

If I load a line before passing it to the view (by initializing a new subclass in the constructor of the model of this view (and calling said constructor before passing it to the view), I can work with it, using both the SelectButtons and the Client Block perfectly
But when adding a new line it shows ALL the different templates for each subclass (instead of 1 and having the other ones hidden) and throws that error.

About my 2nd approach, I tried doing it on my actual project.
At first it works alright, the first time I go to the view. It binds attributes alright.
However, when I try testing server side validation (basically try passing "bad" parameters), it breaks.

The first time it does validation it does it perfectly...for the most part.
Before doing the initial POST, I fiddle around with the SelectButtons, adding new values, then changing the subclass, adding other attributes, forcing "bad" values (that will fail the validation), etc
When the 1st POST arrives at the controller, it does all [Required] and "normal" validation correctly
However I tried a "complex" validation (over the list of all subclasses, the part with "@Html.ValidationMessageFor(m => m.Tipos)"), and one time it didn't validate it, and at another time it did (when it should have validated them both...as in they were both wrong and it should have showed up in the ModelState).

Itt throws A LOT of "NullReferenceException" in this part:

<strong>@item.SelectionButton("Texto", "insertTexto", item.PrefixedId("attributeType"), item.PrefixedId("TextoSelection"), ManipulationButtonStyle.Link)</strong>

Not only that, but when I get the model back to the view, show the validation and let the user edit it, if I make changes to it (for instance use the SelectButtons to choose a new subclass where the error happened), or add a new subclass (with the SortedList button), or stuff like that, either the model binder makes the whole model null (when passing it to the controller), or it makes some of the parameters null when they actually weren't

The whole thing is too chaotic, at times it works and at times it doesn't, at times some validation works and at times it doesnt, all the while the NullReferenceException keeps being triggered, etc.

I even tried this new "fix" (initializing SelectedItems in ComboboxViewModel) and see if it worked with that, but instead of showing the ComboBoxViewModel template it shows the literal string "{v@{var bindings = Html.ClientBindings(); bindings .AddMethod("addNewItem",..." (that is inside the template)

I'm totally lost right now so I don't even know what to ask of you.
You are the lead developer so you shouldn't dwell with every single "technical support" problem ever either.

I just want to know if you can recommend a way for me to do this (Editable list of subclasses+Client Block+Validation+Free modifiable values after validation fails) in a simple way if possible without the need of too much configuration or things that could go wrong.
Do you know of any example of something like this? Maybe just imitating the code a little bit of something that actually works may be better than try it on my own, specially since I need to solve this quickly for my project :(

Sorry for the unending list of problems, errors and stuff >_>
The thing is that I tried for weeks to do this and couldn't find a single way to do so.
I tried normal MVC, and it was impossible to work (no "client-side" way to manipulate the subclasses and stuff)
I tried Knockout MVC and it didn't work either (had lots of problems and I couldn't fix them)
I tried using knockout.js directly, but it was impossible for me to map the subclasses and stuff to a javascript object, bind it and make it work

This is the first one that I think may actually work, so I really need it to :/

I can't believe it's so hard to do something like this in MVC >_>

New Post: Unterminated call stack on Client Block

gonzaw — Tue, 21 May 2013 00:49:11 GMT

You are right I hadn't initialized SelectedItem, thanks!

Yet....

I'm sorry that I'm bothering you this much, but I new to your toolkit and it's a little hard to use at times :(

I have some new problems.

First I'll try setting some context.
I want to basically combine the "Heterogenous list with subclasses" example with the "Client box with inline transformations" example
I want a variable and editable list of different subclasses that belong to a specific superclass, and one of those specific subclasses uses a Client Box to edit a "List<string>" property of it (the above "combobox" type).
I want this to be posted in a form, and be validated.
Each type is validated in different ways, etc.

I tried doing 2 approaches to this:

1) Do a "mock project" (the above one) to test the Client Block for ComboBox

2)Ignore the ComboBox subclass (basically remove it, or at least remove the "List<string>" property that needs the Client Box) and try to see if it works that way.

I encountered problems in each, and I'm not sure exactly how to handle it.

In (1) this is basically the code:

@using (Html.BeginForm("BO_CrearSitioTest", "BackOffice"))
{

@Html.ValidationSummary(true)
<div>
<!-- bunch of unrelated properties of the model -->
</div>    
<div> 
    @Html.LabelFor(m => m.Tipos)
    @Html.ValidationMessageFor(m => m.Tipos)

@Html.SortableListFor(m => m.Tipos, 
        _S.H<TipoAtributoModel>(        
         @<text>

           @{HtmlHelper<BooleanoModel> hBooleano;
           HtmlHelper<EnteroModel> hEntero;
           HtmlHelper<ComboBoxModel> hComboBox;
           HtmlHelper<FechaModel> hFecha;
           HtmlHelper<RealModel> hReal;
           HtmlHelper<TextoModel> hTexto;}
                
        <strong>@item.SelectionButton("Booleano", "insertBooleano", item.PrefixedId("attributeType"), item.PrefixedId("BooleanoSelection"), ManipulationButtonStyle.Link)</strong>
        <strong>@item.SelectionButton("Entero", "insertEntero", item.PrefixedId("attributeType"), item.PrefixedId("EnteroSelection"), ManipulationButtonStyle.Link)</strong>
        <strong>@item.SelectionButton("ComboBox", "insertComboBox", item.PrefixedId("attributeType"), item.PrefixedId("ComboBoxSelection"), ManipulationButtonStyle.Link)</strong>
        <strong>@item.SelectionButton("Fecha", "insertFecha", item.PrefixedId("attributeType"), item.PrefixedId("FechaSelection"), ManipulationButtonStyle.Link)</strong>
        <strong>@item.SelectionButton("Real", "insertReal", item.PrefixedId("attributeType"), item.PrefixedId("RealSelection"), ManipulationButtonStyle.Link)</strong>
        <strong>@item.SelectionButton("Texto", "insertTexto", item.PrefixedId("attributeType"), item.PrefixedId("TextoSelection"), ManipulationButtonStyle.Link)</strong>
        <!-- Este es el template para el tipo Booleano -->
        <div id='@item.PrefixedId("insertBooleano")' class='AttributeListItem @item.PrefixedId("attributeType")'>
            @item.DescendatntCast(m => m).To(out hBooleano)
            <div>
                @hBooleano.LabelFor(m => m.Nombre) 
                @hBooleano.TextBoxFor(m => m.Nombre) 
                @hBooleano.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hBooleano.LabelFor(m => m.Requerido) 
                @hBooleano.CheckBoxFor(m => m.Requerido) 
                @hBooleano.ValidationMessageFor(m => m.Requerido)
            </div>
        </div>
        <!-- Este es el template para el tipo Entero -->
        <div id='@item.PrefixedId("insertEntero")' class='AttributeListItem @item.PrefixedId("attributeType")'>
        @item.DescendatntCast(m => m).To(out hEntero)
            <div>
                @hEntero.LabelFor(m => m.Nombre)
                @hEntero.TextBoxFor(m => m.Nombre)
                @hEntero.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hEntero.LabelFor(m => m.Requerido)
                @hEntero.CheckBoxFor(m => m.Requerido)
                @hEntero.ValidationMessageFor(m => m.Requerido)
            </div>
            <div>
                @hEntero.LabelFor(m => m.RangoInicio)
                @hEntero.TextBoxFor(m => m.RangoInicio)
                @hEntero.ValidationMessageFor(m => m.RangoInicio)
            </div>
            <div>
                @hEntero.LabelFor(m => m.RangoFin)
                @hEntero.TextBoxFor(m => m.RangoFin)
                @hEntero.ValidationMessageFor(m => m.RangoFin)
            </div>
        </div>

         <!-- Este es el template para el tipo ComboBox -->
        <div id='@item.PrefixedId("insertComboBox")' class='AttributeListItem @item.PrefixedId("attributeType")'>
        @item.DescendatntCast(m => m).To(out hComboBox)
            <div>
                @hComboBox.LabelFor(m => m.Nombre)
                @hComboBox.TextBoxFor(m => m.Nombre)
                @hComboBox.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hComboBox.LabelFor(m => m.Requerido)
                @hComboBox.CheckBoxFor(m => m.Requerido)
                @hComboBox.ValidationMessageFor(m => m.Requerido)
            </div>
            
            <div id="ComboBoxViewModelContainer">
            {
                var comboBoxValoresHelper =
                  hComboBox.TransformedHelper(
                      m => m.PosiblesValores,
                      new ComboBoxViewModel());
                      }
                hComboBox.ValidationMessageFor(m => m.PosiblesValores)
                comboBoxValoresHelper.TemplateFor(m => m, "Template/ComboBoxViewModelTemplate", null, true, "valoresHandling", "ComboBoxModelContainer", true)
           
            </div> 
        </div>

        <!-- Este es el template para el tipo Fecha -->
        <div id='@item.PrefixedId("insertFecha")' class='AttributeListItem @item.PrefixedId("attributeType")'>
        @item.DescendatntCast(m => m).To(out hFecha)
            <div>
                @hFecha.LabelFor(m => m.Nombre)
                @hFecha.TextBoxFor(m => m.Nombre)
                @hFecha.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hFecha.LabelFor(m => m.Requerido)
                @hFecha.CheckBoxFor(m => m.Requerido)
                @hFecha.ValidationMessageFor(m => m.Requerido)
            </div>
            <div>
                @hFecha.LabelFor(m => m.Formato)
                @hFecha.TextBoxFor(m => m.Formato)
                @hFecha.ValidationMessageFor(m => m.Formato)
            </div>
        </div>

        <!-- Este es el template para el tipo Real -->
        <div id='@item.PrefixedId("insertReal")' class='AttributeListItem @item.PrefixedId("attributeType")'>
        @item.DescendatntCast(m => m).To(out hReal)
            <div>
                @hReal.LabelFor(m => m.Nombre)
                @hReal.TextBoxFor(m => m.Nombre)
                @hReal.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hReal.LabelFor(m => m.Requerido)
                @hReal.CheckBoxFor(m => m.Requerido)
                @hReal.ValidationMessageFor(m => m.Requerido)
            </div>
            <div>
                @hReal.LabelFor(m => m.RangoInicio)
                @hReal.TextBoxFor(m => m.RangoInicio)
                @hReal.ValidationMessageFor(m => m.RangoInicio)
            </div>
            <div>
                @hReal.LabelFor(m => m.RangoFin)
                @hReal.TextBoxFor(m => m.RangoFin)
                @hReal.ValidationMessageFor(m => m.RangoFin)
            </div>
        </div>


        <!-- Este es el template para el tipo Texto -->
        <div id='@item.PrefixedId("insertTexto")' class='AttributeListItem @item.PrefixedId("attributeType")'>
        @item.DescendatntCast(m => m).To(out hTexto)
            <div>
                @hTexto.LabelFor(m => m.Nombre)
                @hTexto.TextBoxFor(m => m.Nombre)
                @hTexto.ValidationMessageFor(m => m.Nombre)
            </div>
            <div>
                @hTexto.LabelFor(m => m.Requerido)
                @hTexto.CheckBoxFor(m => m.Requerido)
                @hTexto.ValidationMessageFor(m => m.Requerido)
            </div>
            <div>
                @hTexto.LabelFor(m => m.TamMinimo)
                @hTexto.TextBoxFor(m => m.TamMinimo)
                @hTexto.ValidationMessageFor(m => m.TamMinimo)
            </div>
            <div>
                @hTexto.LabelFor(m => m.TamMaximo)
                @hTexto.TextBoxFor(m => m.TamMaximo)
                @hTexto.ValidationMessageFor(m => m.TamMaximo)
            </div>
        </div> 
        @item.ViewList(item.PrefixedId("attributeType"), "attributeSelected", "insertTexto")
    
    @item.SortableListDeleteButton("Borrar Tipo", ManipulationButtonStyle.Link)
    </text>
        ),
        htmlAttributesItems: new Dictionary<string, object>{{"class", "AtributoListItem"}},
         itemContainer: ExternalContainerType.div,
         allItemsContainer: ExternalContainerType.div,
         canSort: false
         )

 </div>   
  <div class='ControlPanel'>
 @Html.SortableListAddButtonFor(m => m.Tipos, "Agregar Tipo") <input type='submit' value='Crear Sitio' />
 </div>
}

@section Scripts{   
    @Scripts.Render("~/Scripts/MVCControlToolkit.Controls-2.4.0.js")     
    @Scripts.Render("~/Scripts/knockout.all-2.4.0.min.js")        
    @Scripts.Render("~/Scripts/MvcControlToolkit.Utils-2.4.0.js")   
}

New Post: Unterminated call stack on Client Block

frankabbruzzese — Mon, 20 May 2013 20:33:34 GMT

The message Message: TypeError: Cannot read property 'length' of null;

make sense...something good is happening...but something is null.

Normally we have this problem when an IEnumerable that must me transferred to the client viewmodel is null. In this casse the knockout mapping function that creates automatically observables, is not able to understand it is an IEnumerable...so it doesnt create an observableArray....and this creates problem when you try to bind this property to something that requires an observableArray.

I suspect your SelectedItems are null.... NEVER leave IEnumerables properties null, always put an empty IEnumerable in them, so an empty array is created when the value is transformed into javascript....so knockout is able to understand it must create an observableArray.

New Post: Unterminated call stack on Client Block

gonzaw — Mon, 20 May 2013 17:52:59 GMT

Yeah I tried to test a little bit the order and includes of the scripts, but no one worked.

If I put it "correctly" like this (took out the duplicates):

@Scripts.Render("~/Scripts/MVCControlToolkit.Controls-2.4.0.js")     
@Scripts.Render("~/Scripts/knockout.all-2.4.0.min.js")    
@Scripts.Render("~/Scripts/MvcControlToolkit.Utils-2.4.0.js")

It gives me this error:
"Uncaught Error: Unable to parse bindings.
Message: TypeError: Cannot read property 'length' of null;
Bindings value: click: removeSelected, enable: SelectedItems().length > 0
knockout.all-2.4.0.min.js:221 "

If I put Bindings afterwards like this:

@Scripts.Render("~/Scripts/MVCControlToolkit.Controls-2.4.0.js")     
@Scripts.Render("~/Scripts/knockout.all-2.4.0.min.js")    
@Scripts.Render("~/Scripts/MvcControlToolkit.Bindings-2.4.0.js")
@Scripts.Render("~/Scripts/MvcControlToolkit.Utils-2.4.0.js")

It doesn't give me that error anymore, but gives me the "maximum call stack exceeded" error from before

New Post: Unterminated call stack on Client Block

frankabbruzzese — Mon, 20 May 2013 08:59:41 GMT

Actually the way you used all script includes is wrong. There are several errors:

MVCControlToolkit.Controls.Core must be always the first include of all mvc Controls Toolkit files.
MvcControlToolkit.Bindings-2.4.0.js is already included in knockout.all-2.4.0.min.js, so it must not be included again
MVCControlToolkit.Controls-2.4.0 contains MVCControlToolkit.Controls.Core, MVCControlToolkit.Controls.Items-2.4.0.js and other js, so it is a duplicate.

Please refer to the script include section to learno more about which js files to include.

No the jQuery version doesnt matter. The only breaking difference is with jquery 1.9

New Post: Unterminated call stack on Client Block

gonzaw — Mon, 20 May 2013 05:31:14 GMT

Actually, this is false

I'm doing this in a "testing project" to figure out how to do this exactly for my actual project

In my actual project I have jquery-1.8.3 and jquery-1.7.2. I might try it in there, but I'd like to be sure it works in the "mock" project first. Hopefully the difference in jquery versions doesn't matter

New Post: Unterminated call stack on Client Block

gonzaw — Sun, 19 May 2013 18:57:43 GMT

No, I'm using jquery-1.8.2.
I tried using the 2.4.1 release just in case but didn't work either.

Yes, it might be something about the js libraries. I'm not exactly sure which ones to use (which versions, etc),
Anyways, here are my views:

Layout.cshtml

 @Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-1.8.2.js")
@RenderSection("scripts", required: false)

ComboboxTest.cshtml

@using CrearSitio.Models
@model ComboBoxModel

@{
    ViewBag.Title = "ComboboxTest";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>ComboboxTest</h2>

 <div>
    @Html.LabelFor(m => m.Nombre)
    @Html.EditorFor(m => m.Nombre)
    @Html.ValidationMessageFor(m => m.Nombre)
    @Html.LabelFor(m => m.Requerido)
    @Html.CheckBoxFor(m => m.Requerido)
    @Html.ValidationMessageFor(m=>m.Requerido)

</div>

    @Html.ValidationMessageFor(m=>m.PosiblesValores)
    <div id="ComboBoxViewModelContainer">
            @{
                var comboBoxValoresHelper =
                  Html.TransformedHelper(
                      m => m.PosiblesValores,
                      new ComboBoxViewModel());
                      }
                @Html.ValidationMessageFor(m => m.PosiblesValores)
 @comboBoxValoresHelper.TemplateFor(m => m, "Template/ComboBoxViewModelTemplate", null, true, "valoresHandling", "ComboBoxModelContainer", true)           
</div>

@section Scripts{
    <script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>   
    <script src="~/Scripts/knockout.all-2.4.0.min.js" type="text/javascript"></script>
    <script src="~/Scripts/MvcControlToolkit.Bindings-2.4.0.js" type="text/javascript"></script>
    <script src="~/Scripts/MvcControlToolkit.Utils-2.4.0.js" type="text/javascript"></script>
    <script src="~/Scripts/MVCControlToolkit.Controls.Core-2.4.0.js" type="text/javascript"></script>
    <script src="~/Scripts/MVCControlToolkit.Controls.Items-2.4.0.js" type="text/javascript"></script>        
    <script src="~/Scripts/MVCControlToolkit.Controls-2.4.0.js"  type='text/javascript' ></script>
  }

ComboBoxViewModelTemplate.cshtml

@using CrearSitio.Models
@using MVCControlsToolkit.Controls.Bindings
@model ComboBoxViewModel


@{var bindings = Html.ClientBindings();
            bindings
                .AddMethod("addNewItem",
                @"
                    function () {"+
                        bindings.VerifyFieldsValid (m => m.ItemToAdd) + @"
                        if (this.ItemToAdd() == null || this.ItemToAdd().length == 0) return;
                        this.PosiblesValores.push(this.ItemToAdd());
                        this.SelectedItems.push(this.ItemToAdd());
                        this.ItemToAdd('');  
                    }
                    ")
                .AddMethod("removeSelected",
                @"
                    function () {
                        this.PosiblesValores.removeAll(this.SelectedItems());
                        this.SelectedItems([]); // Reset selection to an empty set
                    }

                    ");
            }
            <div>
            @Html.LabelFor(m => m.SelectedItems)
            @Html.DropDownListFor(m => m.SelectedItems, new {style="min-width:100px"}, Html.CreateChoiceList(
                m => m.PosiblesValores,
                m => m,
                m => m, overridePrompt: "prova"))
            </div>
            <div>
                
               @Html.LabelFor(m => m.ItemToAdd)
               @Html.TypedTextBoxFor(
                    m => m.ItemToAdd, 
                    "watermark")
                
                @Html.ValidationMessageFor(m => m.ItemToAdd, "*")
                @{
                var addButtonBindings = bindings
                    .Click(m => m, "addNewItem")
                    .Get();
                var removeButtonBinding = bindings
                    .Click(m => m, "removeSelected")
                    .Enable(m => m.SelectedItems, "{0}.length > 0").Get();
                }
                <input type="button" value="Agregar" data-bind='@addButtonBindings'/>
                <input type="button" value="Remover seleccionados" data-bind='@removeButtonBinding'/>
            </div>

New Post: Unterminated call stack on Client Block

frankabbruzzese — Sun, 19 May 2013 12:05:32 GMT

Are you using jquery 1.9 or better? Becuase the knockout included in knockout all 2.4.0 is not compatible with 1.9.1. You have to download the 2.4.1 release of the same file that is availaable in the download area.

If this doesnt solve your problem, please show your view, and all javascript files included. The problem is due to the fact that the knocout binding is not working properly, probably because the template engine has problems, and the Html created is wrong.

New Post: Remote Validation on Datagrids

NZCB — Sun, 19 May 2013 07:18:50 GMT

Thanks for the response, I suspected as much. I have hacked the validation into a javascript function used to get some other information for the portfolio, so the error is now shown, although it doesn't use the built in validation. I'll give your solution a go next time I get the chance.

New Post: Unterminated call stack on Client Block

gonzaw — Sun, 19 May 2013 05:40:37 GMT

Hi again

For my project I need to use a droplist to allow the user to input a list of strings for my model.

I decided to "copy" the "Client Block Complete Example" approach to do so, both with using the Client Block, the template and the inline transformation.

To get a better hold of the actual code needed, I checked the "NestedModels" downloadable, and basically copied the code back to back, just changing the name of the properties the name of the model/view, the name of the global javascript variable, and nothing else at all.

However when loading I get a "Maximum call stack size exceeded " error in 'knockout.all-2.4.0' like this:

"b.la
b.$
b.a.d
ko.bindingHandlers.options.update
ko.bindingHandlers.options.update
ko.bindingHandlers.options.update
...."
and so on and on.

(sometimes it puts "{anonymous function}" instead of b.la and the like)

I tried debugging it but I couldn't find the problem, mostly because I don't know where to look.

Is there anything that can cause that error that I missed? Or at least where can I look to debug said error?

From what I can imagine, the elements of the droplist are constantly being updated for some reason (and thus the options of the droplist are being updated as well), but the only way they can be updated is via the "addNewItem" method, so how can this method be called when the page is loaded and not when the button is pressed?

I am using the MVC4ControlsToolkit library this time :P

New Post: Can't find _S.H

gonzaw — Sun, 19 May 2013 00:12:43 GMT

Yes, I had downloaded the Mvc2 version (didn't realize there was a Mvc 3-4 one)

This solved the problem, thanks!

Updated Wiki: Pager

frankabbruzzese — Sat, 18 May 2013 21:17:37 GMT

Pager

This control needs reference to both MVCControlToolkit.Controls-x.x.x.js or the smaller MVCControlToolkit.Controls.Core-x.x.x.js, jquery-1.4.2.js(or better).js.

There are three pager helpers:

Submit Pager that performs a submit (Ajax or normal) in the form it is in and it is better suited for data editing purposes,
Get Pager that performs a simple get (Ajax or normal) to a completely configurable route, and it is better suited for REST displaying of data.
Client Pager All its buttons are not rendered by the server, but they are created and modified dynamically on the client side each time the page changes. It triggers a javascript event when the page changes, but it can optionally cause a form submit. Since it doesn't need the server to render its buttons it is well suited for paging data to be retrieved through ajax calls that returns json data, or for paging local javascript data.

Mvc Controls Toolkit pagers, essentially handle adequately an integer property of the View Model containing the current page of some data that are currently displayed.

Its buttons and page links have the only effect of modifying this property, and performing a either submit or a get to a configurable Route(according to which overload is used). Then, it is up to the Controller to handle properly the actual data.

There are buttons for the first, netx, previous, and last page and a component containing directly the page links. For the last one the user can choose how many page links to show. Links and buttons appear enabled or disabled adequately. If the user supplies also a Total Count of the pages it will be used properly in enabling/disabling buttons and links, however it is not obligatory.

Each component can be rendered separately and one can decide if using it or not. Thus, you can decide to use just next or previous page buttons or just the page links, or a mix of the two....Whatever you want!

Each button can be displayed either as a normal button or as a link or as an image link. Select the one you prefer by using the PageButtonStyle enumeration.

If you supply also a Previous Page field the Pager will just mantain its value when the View is posted. It is useful on the server side to know on what page possible modifications(deletion, modification or insert) were done. However this parameter is not compulsory.

Submit Pager

Below an example of use of the submit causing pager helper:

                    <% var pager = Html.PagerFor(m => m.Page, m => m.PrevPage, m => m.TotalPages); %>
                    
                    <%:pager.PageButton("<<", PageButtonType.First, PageButtonStyle.Link) %>
                    <%:pager.PageButton("<", PageButtonType.Previous, PageButtonStyle.Link) %>
                    <%:pager.PageChoice(4, pageNames: p => string.Format("({0})", p)) %>
                    <%:pager.PageButton(">", PageButtonType.Next, PageButtonStyle.Link) %>
                    <%:pager.PageButton(">>", PageButtonType.Last, PageButtonStyle.Link) %>
                    
                    <%:pager.PageButton("Go To", PageButtonType.GoTo, PageButtonStyle.Button) %><%:pager.GoToText(new {style="width:50px;" })%>

It is applied to the same example of the DataGrid that is here. You can find both examples in the binary distribution. For a complete example application see here.

Please notice the pageNames: parameter that allows the user to provide a function that transfrorms page numbers into strings. In the example above it is used just to put '()' around the page numbers, but it can be used also to implement a dictionary type of paging. That is, a paging based on the first characters of a string that someway represents the record(for instance all customers whose surname starts with 'A'). Disabled buttons are applied the attribute disabled="disabled" as usual for disabled elements. The current page is applied the attribute: selected-page="selected". Both can be used to create CSS rules for styling the involved nodes. Please notice that all browsers, already apply some standard styling to all disable input fields, while internet explorer apply such a style, not only to input fileds and buttons, but also to all other disabled DOM nodes, such as images, and links.

Get Pager

The get causing helper works in a similar way. Only the first of the above instruction change:

 public static Pager<VM> Pager<VM>(
           this HtmlHelper<VM> htmlHelper, int currPage,
           string parameterName, 
           string actionName,
           int? totPages = null,
           string targetIdName = "",
           string controllerName = null,
           object otherParameters = null,
           string routeName = null,
           string protocol = null,
           string hostname = null,
           string fragment = null)

Where:

currPage is the current page
parameterName is the Route parameter name where to put the page number of the various links
totPages, is the opttional count of the total pages
targetIdName is the id of an html element to use as atrget for an ajax call. If it is provided the pager will do an ajax call instead of a normal get
otherParameters is an anonymous object containing all other parameters for the Route.
All other parameters define the Route as in an Action Link.

Client Pager

There are two overload of the client pager:

        public static ClientPager<VM>  ClientPagerFor<VM>(
           this HtmlHelper<VM> htmlHelper,
           Expression<Func<VM, int>> page,
           Expression<Func<VM, int>> totPages=null,
           string pagePrefix=null, string pagePostfix=null,
           bool causeSubmit=false)

Where:

page is an expression locating the page property within the ViewModel
totPages is an optional expression locating a property containing the total pages within the ViewModel
pagePrefix and pagePostfix are optional strings that are prefixed and postfixed to the page number
causeSubmit when true causes the submit of the form that contains the pager when a page change occurs. It is useful mainly to trigger ajax calls tht return json data, instead of returning html.

If the pager is rendered within a Client Block both the page and total pages properties of the Client Side ViewModel are bound to the pager with adequate knockout bindings . This way each time they change the appearence of the pager changes immediately to reflect the new values.

In case we don't use knockout and/or Client Blocks we can update the pager with new data with the function:

MvcControlsToolkit_NewPage(pagerId, newPage, newTotalPages)

pagerId can be computed with the PrefixedId helper by writing something like: @Html.Prefixed(m => m.ModelPageField)

Each time the page changes the pager triggers an event:

trigger("queryChanged", data);

where the data object contains the following fields:

type, specifies the kind of query information that changed. For the pager its value is the string: 'page'.
submit, by setting this value to true within our event handler we can cause a form submit. By setting it to false we prevent a form submit. The value passed initially in this field is the causeSubmit of the pager helper.
page, the current page.
previousPage: the previous page.
totalPages, the total pages, if available.

The event bubbles through the ancestors chain, so we can specify an event handler in any DOM ancestor of the pager.

The second overload of the pager doesn't use expressions, but fileds names and values (as for TextBox instead of TextBoxFor) :

public static ClientPager<VM> ClientPager<VM> (
           this HtmlHelper<VM> htmlHelper,
           string pagerName,
           int initialPage=1,
           string totalPagesName=null,
           int ? totalPages=null,
           string pagePrefix = null,
           string pagePostfix = null,
           bool causeSubmit=false)

where:

pagerName, is the name of the property containing the current page
initialPage is the page initially displayed by the pager
totalPagesName is the name of the property containing the total pages
totalPages is the initial value of the total pages.
all other parameters are the same as the ones of the other overload

New Post: Can't find _S.H

frankabbruzzese — Sat, 18 May 2013 10:39:08 GMT

Maybe you downloaded the version that works with Mvc2. The _S.H method is only available for version greater or equal to mvc 3 since they use Razor ehlpers that are not available in Asp.net Mvc2.

Please use either the Mvc3 or Mvc 4 version of the library. The Mvc2 version will be discontinued in a short time.

New Post: Can't find _S.H

gonzaw — Sat, 18 May 2013 07:24:46 GMT

Hi

I've just seen this project and it seems like the coolest thing ever and just the thing to solve my mvc problems! (so kudos on that)

I followed the tutorials on using ViewList and SortableListFor for handling subclasses, and installed the toolkit using NuGet, but in the MvcControlsToolkit.Controls._S class I couldn't find the "H" method and thus my code wouldn't work.

I tried getting the .dll alone (from the binaries), but I couldn't find it in it either.

I'd like to know if there is something I've been doing wrong
Thanks

New Comment on "TypedTextBox"

frankabbruzzese — Fri, 17 May 2013 06:44:41 GMT

No textareas are not supported. The main purpose of the TypedTextBox is formatting, and keyboard handling for dates and numbers. Textareas are just for strings, so you have no formatting problem. You may simply use a jquery watermark plugin

New Post: Remote Validation on Datagrids

frankabbruzzese — Fri, 17 May 2013 06:21:39 GMT

It is a sell known problem. The remote attribute doesnt work with items from a list, exactly because the parameter inserted in the query string contains a prefix that depends on the position of the item in the list. In theory, one might think to define a custom model binder that doesn't consider this prefix, but what a similar model binder should do depend strongly on the specific situation(there might be nested objects, or nested lists), so it is difficult to provide an out-of-the-box solution.
The only "acceptable" way is using a dirty trick!

Solution:

Just take the value of the parameter from the Asp.net Request object. The Request object contains a dictionary with all parameters passed in the query string. Look for a key that ends with ".Portfolio" , and take the corresponding value.

Closed Issue: Microsoft JScript runtime error: Function expected when click on "show details" [1051]

frankabbruzzese — Thu, 16 May 2013 11:51:12 GMT

When click on show details link in data grid example i got java script debugger error "Microsoft JScript runtime error: Function expected" on this line newValue=TrueValue(newField.childNodes(0).nodeValue,newFieldName) saying "Function Expected .

I'm using MS IE 9, VS 2010 Ultimate

Closed Issue: SortableListFor with DateTimeFor [1060]

frankabbruzzese — Thu, 16 May 2013 11:51:11 GMT

Hi, I'm with a problem in "DateTimeFor" using jQuery. I have this model:

public class AtividadeInserirViewModel
{
[Required]
public
int atv_relatorio { get;
set; }
public List<AtividadeInserirView> Atividades {
get; set; }
}
public class AtividadeInserirView
{
[Required]
public
string atv_titulo { get;
set; }
public System.DateTime atv_datafim {
get; set; }
}

And in the view:

@model NLayerApp.Presentation.Web.MVC.Client.Models.AtividadeInserirViewModel
(...)
@Html.LabelFor(model => model.atv_relatorio)
@Html.EditorFor(model => model.atv_relatorio, new { Lookup = Model.lookupRelatorio})
@Html.ValidationMessageFor(model => model.atv_relatorio)
@helper InsertAtividade(HtmlHelper<AtividadeInserirView> Html)
{
@Html.EditorFor(model => model.atv_titulo)
@{var DtFim = Html.DateTimeFor(m => m.atv_datafim, DateTime.Now, true);}
@DtFim.DateCalendar()
}
@Html.SortableListFor(m => m.Atividades,
_S.H<AtividadeInserirView>(h => InsertAtividade(h)),
canSort: true,
allItemsContainer: ExternalContainerType.ol,
itemContainer: ExternalContainerType.li,
htmlAttributesContainer: new Dictionary<string, object>() { {"class" , "SortableList"} })
@Html.SortableListAddButtonFor(m => m.Atividades,
"Inserir",
ManipulationButtonStyle.Button,
new Dictionary<string, object>() { { "class", "DataButtonInsert" } })

When the view is called the model has one item in "Model.Atividades", and this item show the jQuery calendar for "atv_datafim" normaly. But if I add new items to "Model.Atividades" the calendar is not showed for the new items.

Attached the fixed binaries

Closed Issue: Html.SortableListFor Not Using addElementTemplate [1080]

jk1000 — Thu, 16 May 2013 11:51:11 GMT

In the RazorThemedGrid example, the ToDoSubTasks.cshtml has:

@Html.SortableListFor(m => m.SubTasks,
_S.H<SubTasksView>(
@<div id='@item.PrefixedId("InnerContainer")'>
@item.TypedTextBoxFor(m => m.Name, new Dictionary<string, object> { { "class", "ToDoDetailName" } }, watermarkCss: "Theme-TypedTextBox-Watermark")
@item.ValidationMessageFor(m => m.Name, "*")
@item.TypedTextBoxFor(m => m.WorkingDays, new Dictionary<string, object> { { "class", "ToDoDetailDuration" } }, watermarkCss: "Theme-TypedTextBox-Watermark")
@item.ValidationMessageFor(m => m.WorkingDays, "*")
@item.SortableListDeleteButton("Delete", ManipulationButtonStyle.Link)
</div>
),
"SubTasksToSortAddItem", 0.7f,
htmlAttributesContainer: new Dictionary<string, object> { { "class", "SortableList" } },
enableMultipleInsert: true)

From the SortableListHelper.cs in the MVCControlsToolkit\Controls\SortableList in the function, public static MvcHtmlString SortableListFor<VM, TItem>, at line 289:

if (addElementTemplate != null && !templateEnabled)

templateEnabled is true, because of the web.config appSettings:

<appSettings>
<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

which prevents the addElementTemplate from being used for adding items. Changing the appSettings causes other problems. I need to use the addElementTemplate to use drop down lists and radio button lists.. I can make it work by taking off the && !templatedEnabled, but there should be a better solution, and I am not sure what other problems I may create by taking off this check.

Closed Issue: TypedTextBox gets confused by back button [1098]

frankabbruzzese — Thu, 16 May 2013 11:51:11 GMT

I've used the TypedTextBox in a page where the user can type an optional field to display a watermark in the field. I leave the textbox empty, displaying the watermark, and the page is submitted. When I hit the back button, the text of the watermark is displayed using the regular text editing textbox. Inspecting the rendered html using the IE dev tools, reveals that the watermark text is assigned to the value attribute of the editing textbox. Refreshing the page clears the value attribute again.