EzDev.org

dotvvm

dotvvm - Open source MVVM framework for Web Apps DotVVM - Open source MVVM Framework for Web Apps


How to pass paramters from one page to another in Dotvvm

How do I pass more than one parameter on a URL from one page to another page. For example: from page1, I use a link to pass parameters to page 2. Also in Page2 how do I get the parameters off the query string?

From Page 1 Link to: /customers/page2.dothtml?Id=5&Date=3/31/2016

How is this link to be coded in DOTVVM? Thanks!


Source: (StackOverflow)

How do I create a session variable in DotVVM viewmodel?

I am building a site in DotVVM and when I try the following line of code but I get error: NullReferenceException

HttpContext.Current.Session.Add ("Value", Item3);

Source: (StackOverflow)

DotVVM: Steps for wrapping 3rd Party JavaScript controls, which have builtin, custom binding handlers for KnockoutJS

I would like to use some JavaScript controls, which have KnockoutJS binding handlers already implemented. After reviewing the DotVVM tutorials, such as "Code-only Controls" and also the controls from the DotVVM source code, I am confused on what aspects of and to what extent the controls need to be rendered via the DotVVM "Rendering Pipeline," if indeed they need to be.

Also, if the controls already have KnockoutJS binding handlers already implemented, is the process of wrapping them the same as for controls which do not have KnockoutJS binding handlers already implemented?


Source: (StackOverflow)

DotVVM Redirection

Hi I would like to ask what is the correct way for redirection from a command in dotVVM framework. I am trying to redirect to another page via Context.Redirect() function that actually works but I get an exception "DotVVM.Framework.Hosting.DotvvmInterruptRequestExecutionException" with additional information "Error in the application" that actually doesn't help and I would like to get rid of it, not just ignoring it. My current code is

DotHTML

<dot:Button Click="{command: Register()}" Text="Register" class="register-button" />

cs

public void Register()
{
    Context.Redirect("Register");
}

Source: (StackOverflow)

dotvvm: Auto play video list (presentation)

I like to build a Video presentation website with dotvvm. when nothing happens it has to start every time a new video from a list. with the bootstrap/MediaObject i can't find the event 'video ready playing' so we can start the next video. what is the best way to solve this with Dotvvm, i don't want to go back to angular for this.

Bas

UPDATE: At this moment I use the html5 tags, is there also a dotvvm component ? sample:

    <dot:Content ContentPlaceHolderID="ContentTemplate">
<div class="page">
    <video ID="video1" width="320" height="240" autoplay>
        <source src="/Style/video/video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button onclick="playPause()">Play/Pause</button>
</div>
<script>
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
   myVideo.addEventListener("ended", function () {
        //get next video from viewmodel, (not hard coded)
        var nextVideo = "/Style/video/video2.mp4"
        myVideo.setAttribute("src", nextVideo)
        //load 
        myVideo.load();
        // switch of sound
        myVideo.muted = true;
        // play
        myVideo.play();
    }, true);
</script>

can we get the nextVideo from the viewModel and how do we do this ?


Source: (StackOverflow)

asp.net core 2.0 dotvvm vs razor pages. Which one is more powerful for an interactive web app

With the latest release of ASP.NET CORE version 2.0 we now have Razor Pages which I really like because it shows a MVVM way of developing which I am already familiar because I've used it in UWP.

I was searching to develop web apps without js because I am a .net developer and I came across this framework known as DOTVVM , it is great because it gives some features of js frameworks like angular, react e.t.c and it also integrates very well with ASP.NET CORE 2.0

I want to discuss this between following 3 scenarios :

I should use DOTVVM and dont use js at all.

I should use razor pages instead with asp.net core 2.0, because razor pages provide all functionality which dotvvm provides and it will have more community in future.

I should learn a **js framework ** like angular or react because neither razor pages, nor dotvvm is enough powerful to replace them.

The discussion can be from point of view of all developers, so I can get opinion of js developers as well as those who have worked with dotvvm or razor pages. The aim is to create completely interactive and responsive web app with good performance.

Important : ** the web app created can be a **progressive web app from the start or maybe turned into a pwa after creating it, depends on the technology I choose at the end.

I know for a progressive web app I will need to write a little js, but that is alright considering that is very simple and little to write.

The reason of this question is so that we can discuss these options from multiple perspectives and deduce a better option at the end for my app.

Thanks in advance.


Source: (StackOverflow)

Problems with Bootstrap DotVVM GridView

I have the following code in a bootstrap table:

<bs:GridView DataSource="{value: TablaGridView}" SortChanged="{command: OrdenaTabla}" class="table table-striped table-bordered table-hover table-full-width">
    <Columns>
        <dot:GridViewTextColumn HeaderText="Nombre" ValueBinding="{value: Nombre}" AllowSorting="True" />
        <dot:GridViewTextColumn HeaderText="Apellido Paterno" ValueBinding="{value: ApellidoPaterno}" AllowSorting="True" />
        <dot:GridViewTextColumn HeaderText="Apellido Materno" ValueBinding="{value: ApellidoMaterno}" AllowSorting="True" />
        <dot:GridViewTextColumn HeaderText="Estado" ValueBinding="{value: Estado}" AllowSorting="True" />
        <dot:GridViewTextColumn HeaderText="RFC" ValueBinding="{value: RFC}" AllowSorting="True" />
        <dot:GridViewTemplateColumn AllowSorting="false">
            <ContentTemplate>
                <dot:Button ButtonTagName="button" class="btn btn-blue show-sv" rel='nofollow' href="#FormaCliente" data-startFrom="right" Click="{command: _parent.Edit(_this)}">
                    <i class="fa fa-edit"></i> Editar
                </dot:Button>
                &nbsp;&nbsp;&nbsp;
                <dot:Button ButtonTagName="button" class="btn btn-red" Click="{command: _parent.Delete(_this)}">
                    <i class="fa fa-trash-o"></i> Borrar
                </dot:Button>
            </ContentTemplate>
        </dot:GridViewTemplateColumn>
    </Columns>
</bs:GridView>

In the template I have two buttons, which will open a form to edit the data in the table. But I have the problem that the button did not perform the action inside the grid. If I put the button outside the grid performs the action, however inside the grid does nothing. You could help me solve this situation.

regards

UPDATE

This is my code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;
using System.Threading.Tasks;
using DotVVM.Framework.Controls.Bootstrap;
using DotVVM.Framework.Controls;

namespace APP_POS.ViewModels
{
    public class TablaViewModel : DotvvmViewModelBase
    {

        private static IQueryable<CustomerData> GetData()
        {
            return new[]
            {
                new CustomerData() { Id = 1, Nombre = "John Doe", RFC = DateTime.Parse("1976-04-01") },
                new CustomerData() { Id = 2, Nombre = "John Deer", RFC = DateTime.Parse("1984-03-02")},
                new CustomerData() { Id = 3, Nombre = "Johnny Walker", RFC = DateTime.Parse("1934-01-03")},
                new CustomerData() { Id = 4, Nombre = "Jim Hacker", RFC = DateTime.Parse("1912-11-04")},
                new CustomerData() { Id = 5, Nombre = "Joe E. Brown", RFC = DateTime.Parse("1947-09-05")},
                new CustomerData() { Id = 6, Nombre = "Jim Harris", RFC = DateTime.Parse("1956-07-06") },
                new CustomerData() { Id = 7, Nombre = "J. P. Morgan", RFC = DateTime.Parse("1969-05-07")},
                new CustomerData() { Id = 8, Nombre = "J. R. Ewing", RFC = DateTime.Parse("1987-03-08")},
                new CustomerData() { Id = 9, Nombre = "Jeremy Clarkson", RFC = DateTime.Parse("1994-04-09") },
                new CustomerData() { Id = 10, Nombre = "Jenny Green", RFC = DateTime.Parse("1947-02-10")},
                new CustomerData() { Id = 11, Nombre = "Joseph Blue", RFC = DateTime.Parse("1948-12-11")},
                new CustomerData() { Id = 12, Nombre = "Jack Daniels", RFC = DateTime.Parse("1968-10-12")},
                new CustomerData() { Id = 13, Nombre = "Jackie Chan", RFC = DateTime.Parse("1978-08-13")},
                new CustomerData() { Id = 14, Nombre = "Jasper", RFC = DateTime.Parse("1934-06-14")},
                new CustomerData() { Id = 15, Nombre = "Jumbo", RFC = DateTime.Parse("1965-06-15")},
                new CustomerData() { Id = 16, Nombre = "Junkie Doodle", RFC = DateTime.Parse("1977-05-16")}
            }.AsQueryable();
        }

        public GridViewDataSet<CustomerData> Customers { get; set; }

        public string SelectedSortColumn { get; set; }

        public TablaViewModel()
        {
            // creates new GridViewDataSet and sets PageSize
            Customers = new GridViewDataSet<CustomerData>();
            Customers.PageSize = 10;
        }


        public void Edit(CustomerData customer)
        {
            Customers.EditRowId = customer.Id;
        }


        public void Delete(CustomerData customer)
        {
            Customers.EditRowId = customer.Id;
        }


        public override Task PreRender()
        {
            // fill customers
            if (SelectedSortColumn == "Nombre")
            {
                Customers.LoadFromQueryable(GetData().OrderBy(c => c.Nombre));
            }
            else if (SelectedSortColumn == "RFC")
            {
                Customers.LoadFromQueryable(GetData().OrderBy(c => c.RFC));
            }
            else
            {
                Customers.LoadFromQueryable(GetData());
            }

            CalculaPaginas();
            CalculaRegistros();

            return base.PreRender();
        }


        public void SortCustomers(string column)
        {
            SelectedSortColumn = column;
        }


    }

    public class CustomerData
    {
        public int Id { get; set; }

        public string Nombre { get; set; }

        public DateTime RFC { get; set; }

    }

}

Source: (StackOverflow)

Global object in DotVVM (for masterpage)

I'm looking for some global object in DotVVM framework as ViewBag in Asp.Net MVC. I wanna have a masterpage with dynamic title and I don't know how could I do this.

For example: In asp.net MVC "ViewBag.Title" -> where Title is property from view(model) and when I am changing articles, title changes too.


Source: (StackOverflow)

Redirect all the not found routes in dotvvm

How can I redirect all not found page requests to the same view?

This illustrates somehow what I mean:

config.RouteTable.Add("Home", "*", "Views/Home.dothtml", new { });

The idea behind is that when someone accesses a not existing page:

http://localhost/WhatEverNonExistingPage

The resquest is redirected to

http://localhost/Home

Source: (StackOverflow)

Event of PostBack in DotVVM

In my ViewModel I have the following code:

using System;
using DotVVM.Framework.ViewModel;
using DotVVM.Framework.Controls.Bootstrap;
using APP_MIS_FACTURAS.DTO.Contoles;
using System.Collections.Generic;
using APP.Models.View;

namespace APP.ViewModels
{

    public class InicioViewModel : DotvvmViewModelBase
    {

        // Variables para la Vista
        private InicioModel inicioModel = new InicioModel();
        private bool constructor = true;
        private SelectDTO[] inicializaLista;

        // Mensaje 1

        [Bind(Direction.ServerToClient)]
        public string AlertText1 { get; set; }

        [Bind(Direction.ServerToClient)]
        public AlertType AlertType1 { get; set; }
        public bool Dismissed1 { get; set; }

        // Mensaje 2
        [Bind(Direction.ServerToClient)]
        public string AlertText2 { get; set; }

        [Bind(Direction.ServerToClient)]
        public AlertType AlertType2 { get; set; }
        public bool Dismissed2 { get; set; }

        // Mensaje 3

        [Bind(Direction.ServerToClient)]
        public string AlertText3 { get; set; }

        [Bind(Direction.ServerToClient)]
        public AlertType AlertType3 { get; set; }
        public bool Dismissed3 { get; set; }


        // Pagina Inicio
        public string usuario { get; set; }
        public string password { get; set; }

        // Recuperar contrasena
        public string correoElectronico { get; set; }

        // Registro de usuario
        public string nombre { get; set; }
        public string apellidoPaterno { get; set; }
        public string apellidoMaterno { get; set; }
        public bool aceptoTerminos { get; set; }

        public SelectDTO[] genero { get; set; }
        public int selectGenero { get; set; } = 0;

        public InicioViewModel()
        {

            if (constructor)
            {
                AutenticarAplicacion();
                Limpiar();
                inicializaLista = CargaCatalogoGenero();
                constructor = false;
            }
        }

        public void Limpiar()
        {
            //Clean Form Data
        }

        public void Autenticar()
        {

            // Operations to validate user


        }

        public void RegistroUsuario()
        {

            //Operations to create a user

        }

        private void AutenticarAplicacion()
        {

           //Operations to validate the status of the application

        }

        private SelectDTO[] CargaCatalogoGenero()
        {
            //Loading catalogs (Call database)

        }

    }
}

I have a constructor called InicioViewModel (). Within this function I initialize the variables inside the viewmodel, but I have the problem that every time I press any event reloads the function. Then wanted to check if it is possible inside the viewmodel I can catch the postback event of view.


Source: (StackOverflow)

dotvvm and Telerik mvc

Hi all I did search to see for answer but nothing.

My question is related to dotvvm framework. I have installed dotvvm into a existing mvc 5 application and work correctly but becouse the dotvvm does not know razor markup I can't use telerik ui for mvc. Have somebody found a solution to this problem ?

Your wolkaround or council is appreciated.

Thanks


Source: (StackOverflow)

Problems with dotvvm Validation

Reviewing the documentation for using the Validator

If you want to validate some property, just use standard attributes from the System.ComponentModel.DataAnnotations namespace. DotVVM can translate some validation rules into javascript, so the validation can be executed also on the client side.

Then I developed the following code:

using System;
using DotVVM.Framework.ViewModel;
using APP_MIS_FACTURAS.Models;
using System.Web;
using DotVVM.Framework.Controls.Bootstrap;
using System.ComponentModel.DataAnnotations;

namespace APP_MIS_FACTURAS.ViewModels
{
    public class InicioViewModel : DotvvmViewModelBase
    {

        [Required(ErrorMessage = "No se indica la contraseña del usuario")]
        public string usuario { get; set; }
        public string password { get; set; }

    }
}

But I get the following error:

Severity Code Description Project File Line Suppression State Error CS0246 The type or namespace name 'Required' could not be found (are you missing a using directive or an assembly reference?) APP_MIS_FACTURAS C:\Users\leojfn\Documents\Visual Studio 2015\Projects\Cystem\APP_MIS_FACTURAS\APP_MIS_FACTURAS\ViewModels\InicioViewModel.cs 45 Active

I do not know if I need to import some specific library or I need to install something NuGetPackage


Source: (StackOverflow)

afterPostback event with Context.ReturnFile

I've found out that the afterPostback event is not being called when Context.ReturnFile() is used in the ViewModel. I use the following code to disable all the buttons on the page when postback is sent and enable them again after the postback is finished:

dotvvm.events.beforePostback.subscribe(function () {
    $('.btn-primary').prop('disabled', true).addClass('m-progress');
});
dotvvm.events.afterPostback.subscribe(function () {
    $('.btn-primary').removeAttr('disabled').removeClass('m-progress');
});

However, when some ViewModel uses Context.ReturnFile() to return a generated file, the afterPostback is not called and all the buttons on the page stay disabled.

I've also tried to use spaNavigating and spaNavigated events, but they don't seem to be called either.

Is there some workaround or another event that is called when a file is returned from ViewModel?


Source: (StackOverflow)

DotVVM DataPager not working

dothtml table with DataPager:

<bp:GridView DataSource="{value: UserRoleGroupListDTOs}" class="table table-bordered table-hover dataTable">
                <Columns>
                    <%--<dot:GridViewTextColumn ValueBinding="{value: Name}" HeaderText="Název" Events.Click="{command: GoToDetail() }"/>--%>
                    <bp:GridViewTemplateColumn HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Name}">
                        <dot:RouteLink Text="{value: Name}" RouteName="UserRoleGroupDetail" Param-Id="{value: Id}" />
                    </bp:GridViewTemplateColumn>
                    <bp:GridViewCheckBoxColumn ValueBinding="{value: IsBlocked}" HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Forbidden}" IsEditable="true"/>
                    <bp:GridViewTemplateColumn HeaderText="{resource: eCENTRE.Common.Resources.Admin.Common.Delete}" CssClass="align center">
                        <%--<i class="glyphicon glyphicon-remove remove-from-list" style="color:red;">
                        </i>--%>
                        <dot:Button class="btn btn-default" Click="{command: _parent.DeleteUserRoleGroup(Id)}" Text="{resource: eCENTRE.Common.Resources.Admin.Common.Delete}"/>

                    </bp:GridViewTemplateColumn>
                </Columns>

            </bp:GridView>
            <bp:DataPager DataSet="{value: UserRoleGroupListDTOs}"/>

ViewModel and init in function Prerender:

public GridViewDataSet<UserRoleGroupListDTO> UserRoleGroupListDTOs { get; set; }

    private readonly IUserRoleGroupFacade userRoleGroupDetailFacade;
    private readonly UserRoleGroupCrudFacade crudFacade;

    public UserRoleGroupListViewModel(IUserRoleGroupFacade userRoleGroupDetailFacade, UserRoleGroupCrudFacade crudFacade)
    {
        this.userRoleGroupDetailFacade = userRoleGroupDetailFacade;
        this.crudFacade = crudFacade;
    }

    public override Task Init()
    {
        return base.Init();
    }
    public override Task PreRender()
    {
        UserRoleGroupListDTOs = new GridViewDataSet<UserRoleGroupListDTO>();
        UserRoleGroupListDTOs.PagingOptions.PageSize = 10;
        UserRoleGroupListDTOs.SortingOptions.SortDescending = true;
        UserRoleGroupListDTOs.SortingOptions.SortExpression = nameof(UserRoleGroupListDTO.Name);
        UserRoleGroupListDTOs.OnLoadingData = options => Task.Run(() => userRoleGroupDetailFacade.GetUserRoleGroupGridViewDataSetLoadedData(options)).Result;

        return base.PreRender();
    }

Pager does show, but after click on any button, nothing is happening.

If I add initialization into Init method, pager works, but viewModel has another errors.


Source: (StackOverflow)

Dotvvm Repeater nested in Repeater

I like to use 2 dot:repeater(s) nested in one dothtml example :

<dot:Repeater DataSource="{value: Projects}">
    <div class="project">
        <dot:LinkButton Click="{command: _root.RedirectToTasks(Id)}">{{value: Title}}</dot:LinkButton>
        <dot:Repeater DataSource="{value: _parent.Tasks}" WrapperTagName="table">
            <ItemTemplate>
                <tr>
                    <td>{{value: Title}}</td>
                    <td>{{value: Completed ? ("Finished: " + CompletionDate) : "Not yet"}}</td>
                    <td>
                        <dot:LinkButton Text="Done"
                                        Click="{command: CompleteTask()}"
                                        Visible="{value: !Completed}" />
                    </td>
                </tr>
            </ItemTemplate>
        </dot:Repeater>
    </div>
</dot:Repeater>

i try different options for the _parent. in the task part, but i don't get it working. in other frameworks it is possible to alias the main repeater example: 'DataSource="{value: Projects}" as project' and then its possible in the nested repeater to use 'DataSource="{value: project.Tasks}"' does someone know how to get this working ?


Source: (StackOverflow)