Documentation:MVC Generated ViewModel UI in MDrivenFramework

This article describes how to use a standard MVC c# Visual Studio 2019 project with MDriven generated ViewModel views.

You are free to use any name on the controller - in this sample it is called "My".

The MDriven generated MVC UI needs a view called GenericView.cshtml , a template is provided here:

@using Eco.ViewModel.Runtime
@using Eco.MVC
@model VMClass

@{
    ViewBag.Title = Model.ViewModelClass.Name;
}

<style>
    .tk-data-table {
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-grow: 1;
        width: 100%;
        min-height: 90px;
        height: 100%;
        overflow-y: auto;
    }

    .tk-data-table.ctGridMidAirY .tk-data-table__content {
        height: 100%;
    }

        .tk-data-table.ctGridYBottom .tk-data-table__content {
            height: 100%;
        }

    .tk-data-table__content {
        border-color: #dadce0;
    }

    .tk-data-table__content {
        margin-top: 10px;
        position: relative;
        width: 100%;
        overflow: auto;
        border-radius: 4px;
        border: 1px solid #dadce0;
    }

    .tk-text-field {
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .tk-button.NoLabel {
         padding: calc(1rem * 1.5 + 5px) 5px 5px 5px; 
    }



</style>

@using (Html.BeginForm("Submit", Html.GetControllerName(), FormMethod.Post))
{
<fieldset>
    <div id="contentWrapper" class="@Model.ViewModelClass.Name mvc-rendered">
        <!-- Start of inserted MVC ViewModel body -->
        <div id="viewmodelWrapper">
            @Html.Partial(Html.RazorPartialFile());
            <!-- End of inserted MVC ViewModel body -->
        </div>
    </div>
    <div>
        <button id="SubmitButton" type="submit" value="Submit" class="tk-state-action ripple-effect update-action">Submit</button>
    </div>
    <div id="validationMessageWrapper">
        <div class="validationMessage">
            @Html.ValidationSummary(true)
        </div>
    </div>
    <div class="form-group" style="display:none">
        @* When form is posted, the VMClassBinder recreates the viewmodel with data from the form, starting with the viewmodels name and root id below *@
        @Html.Hidden(VMClass.ThisAsExternalId_nameOf) <!-- This creates a hidden form attribute with the root objects external ID -->
        @Html.Hidden(VMClassBinder.ViewModelNameFormAttribute, Model.ViewModelClass.ViewModel.RootViewModelClass.Name)
    </div>
</fieldset>
}


<script>
    var _this = this;


    function SubmitAction(event, target, theaction, areYouSureQuestion) {
        if (areYouSureQuestion === void 0) { areYouSureQuestion = ""; }
        if (event !== undefined)
            event.stopPropagation();
        if (areYouSureQuestion !== undefined && areYouSureQuestion != '') {
            var answer = window.confirm(areYouSureQuestion);
            if (!answer)
                return;
        }
        var theform = $(target).closest('form');
        $(theform).attr('action', '/'+theaction); // a bit unclear why I need the '/' , but routing adds controller twice otherwise ; probably not needed in Turnkey because of use of Angular JQuery
        theform.submit();
    };

    function NavigateTo(event, target, url, areYouSureQuestion) {
        if (areYouSureQuestion === void 0) { areYouSureQuestion = ""; }
        if (event !== undefined)
            event.stopPropagation();
        if (areYouSureQuestion !== undefined && areYouSureQuestion != '') {
            var answer = window.confirm(areYouSureQuestion);
            if (!answer)
                return;
        }
        var theform = $(target).closest('form');
        window.location.href = url;
    };
    // Toggle row check-box
    function ToggleRow(event, target) {
        if (event !== undefined) {
            event.stopPropagation();
            if (event.target.type == 'checkbox')
                return; // if the automated click below bubbles up and calls again
        }
        var theform = $(".selector", target).click();
    };
    // Toggle row check-box
    function SetCurrentRow(event, target) {
        if (event !== undefined) {
            event.stopPropagation();
            if (event.target.type == 'checkbox')
                return; // if the automated click below bubbles up and calls again
        }
        $(".selector", target.parentElement).removeAttr('checked'); // Unselect all checked in the list
        $(".vmTableRow", target.parentElement).removeClass("vmCurrentRow"); // Remove the current visual style 
        $(".selector", target).click(); // Click the hidden checkbox
        var theform = $(target).closest('form');
        theform.submit();
    };

    
</script>