Comprehensive GridView CRUD Sample for ASP.NET MVC Core 3.1 with different classes and ViewModel

[Zryan Kamal]

Greetings,

Recently, we have purchased 3 licenses for Essential Studio Enterprise Edition and we are totally new to this component. I have been searching without any success for an example that we can use as a base for converting our old applications to ASP.NET MVC Core 3.1 using SyncFusion.

I will be very grateful if you could provide me with a comprehensive example for a project that will have a grid view with CRUD operation to register users using popup (modal).

Lets say, we have the below models:-

1- CountryModel (CountryID, CountryText)

2- GenderModel (GenderID, GenderText)

3- UserDetailsModel (UserID, GivenName, FamilyName, DateOfBirth, GenderID, CountryID, EmailAddress, Languages, Comments, Picture)

4- LanguageModel (LanguageID, LanguageText)

I need a gridview where a user can perform CRUD operations. The gridView should show User details with texts (to show the text instead of IDs of some fields)

The insert/update needs to be in shape of popup, Country should be a drop-down list, gender should be radio button, dateOfBrith should be a calendar, Languages should be checkboxes where they can select more than one language, the comments needs to be shown in syncfusion editor and finally the picture should be file-upload and the picture should be stored in SQL server 2012 "as Image field".

I need to have MVC structure for this project and would be grateful if you could also use ViewModel to combine the required models and use it as a base for the gridview source data (instead of ViewBag that I saw in most of the examples). 

I am sure that such example will be very useful for all SyncFusion users who deal with .net core mvc and it will answer all our questions about how to proceed with converting our old applications (mostly written in asp.net forms) to asp.net mvc core 3.1 with syncfusion.

Many thanks in advance & best regards

[Ajith Govarthan]

Hi Zryan, 

 

Greetings from Syncfusion support and sorry for the delayed response. 

We checked your query and we have consider your requirement as a custom sample. So we will update you the sample on November 6th 2020. We appreciate your patience until then. 

   

Regards,  

Ajith G. 

[Ajith Govarthan]

Hi Zryan,  

  

Thanks for the patience.  

  

We have prepared sample based on your requirement “ Need sample with asp net core 3.1 sample with custom components in the dialog editing”.  Based on that we have prepared sample with asp net core 3.1 version. In the sample, we have used the dialog template and rendered the custom components like radio buttons, checkbox component, and file uploader.  

  

We have used URL Adaptor as DataManager to handle the CRUD actions for the grid component.  For your convenience we have attached the sample so please refer the sample for your reference.  

  

Code Example:  

Index.cshtml  

  

<ejs-grid id="Grid" load="onLoad" allowPaging="true" actionBegin="actionBegin" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">  

    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editsettings>  

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" removeUrl="/Index?handler=Delete" updateUrl="/Index?handler=Update" adaptor="UrlAdaptor"></e-data-manager>  

    <e-grid-columns>  

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>  

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>  

        <e-grid-column field="EmployeeID" headerText="Name" width="120" foreignKeyField="EmployeeID"  foreignKeyValue="FirstName"   dataSource="@Model.DropDatasource"></e-grid-column> // foreignkey column used here  

        <e-grid-column field="OrderDate" headerText="Order Date" editType="datePickerEdit" format="yMd" type="date" width="170"></e-grid-column>  

        <e-grid-column field="City" headerText="City" textAlign="Right" width="120"></e-grid-column>  

        <e-grid-column field="Gender" headerText="Gender" width="150"></e-grid-column>  

  

    </e-grid-columns>  

</ejs-grid>  

  

<script id='dialogtemplate' type="text/x-template">  

    <div id="dialogTemp">  

    </div>  

</script>  

  

<script>  

  

    var foreignkeyData;  

     

    function onLoad() {  

        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];  

    }  

  

    function onFileSuccess(args) {  

        console.log(args);  

    }  

  

    var btnChanged;  

    var btnChecked;  

    var currentbtnVakue;  

  

    function actionBegin(args) {  

        if (args.requestType == 'save') {  

            args.data.Gender = btnChanged === undefined ? args.rowData.Gender : btnChanged;  // changes the radio button value here.  

                args.data["EmployeeID"] = parseInt(args.data["EmployeeID"])  

        }  

        if (args.requestType == 'beginEdit') {  

            btnChecked = args.rowData.Gender;  

        }  

    }  

    function radioBtnChange(args) {  

        btnChanged = args.value;  // change event of the radio button  

    }  

    function radioBtnCreated(args) {  

  

        if (this.value == btnChecked) {  

            this.checked = true;  

        }  

    }  

  

    function onCreate(args) {  

        this.value = foreignkeyData ? foreignkeyData.Id[0].name : "";  

  

    }  

  

  

    function actionComplete(args) {  

        if (args.requestType === "beginEdit") {  

            foreignkeyData = args.foreignKeyData;  

        }  

        if (args.requestType === "save") {  

            btnChanged = undefined;  

        }  

        if (args.requestType === 'beginEdit' || args.requestType === 'add') {  

            let spinner = ej.popups.createSpinner({ target: args.dialog.element });  

            ej.popups.showSpinner(args.dialog.element);  

            if (args.requestType === 'beginEdit') {  

                var ajax = new ej.base.Ajax({  

                    type: "POST",  

                    url: "/Index?handler=EditPartial",  

                    beforeSend: function (xhr) {  

                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN",  

                            $('input:hidden[name="__RequestVerificationToken"]').val());  

                    },  

                    contentType: "application/json",  

                    dataType: 'json',  

                    data: JSON.stringify({ value: args.rowData })  

                });  

                ajax.send().then(function (data) {  

                    console.log(data);  

                    appendElement(data, args.form);  

                    args.form.elements.namedItem('CustomerName').focus();  

                    ej.popups.hideSpinner(args.dialog.element);  

                }).catch(function (xhr) {  

                    console.log(xhr);  

                    ej.popups.hideSpinner(args.dialog.element);  

                });  

            }  

  

            if (args.requestType === 'add') {  

                var ajax = new ej.base.Ajax({  

                    type: "POST",  

                    url: "/Index?handler=AddPartial",  

                    beforeSend: function (xhr) {  

                        ajax.httpRequest.setRequestHeader("XSRF-TOKEN",  

                            $('input:hidden[name="__RequestVerificationToken"]').val());  

                    },  

                    contentType: "application/json",  

                    dataType: 'json'  

                });  

                ajax.send().then(function (data) {  

                    $("#dialogTemp").html(data);  

                    args.form.elements.namedItem('OrderID').focus();  

                    ej.popups.hideSpinner(args.dialog.element);  

                }).catch(function (xhr) {  

                    console.log(xhr);  

                    ej.popups.hideSpinner(args.dialog.element);  

                });  

            }  

        }  

    }  

    function appendElement(elementString, form) {  

        form.querySelector("#dialogTemp").innerHTML = elementString;    

        var script = document.createElement('script');  

        script.type = "text/javascript";  

        var serverScript = form.querySelector("#dialogTemp").querySelector('script');  

        script.textContent = serverScript.innerHTML;  

        document.head.appendChild(script);   // append the elements to dialog template  

        serverScript.remove();  

    }  

      

</script>  

  

  

In the above code example we have used the foreignkey column feature to show the text values and to store the id values in the grid component.  

  

  

_EditPartial.cshtml  

  

<div>  

    <div class="form-row">  

        <div class="form-group col-md-6">  

            <div class="e-float-input e-control-wrapper">  

                <input asp-for="OrderID" value=@Model.OrderID.ToString() disabled type='text' />  

                <span class="e-float-line"></span>  

                <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label>  

            </div>  

        </div>  

        <div class="form-group col-md-6">  

            <div class="e-float-input e-control-wrapper">  

                <input asp-for="CustomerID" value=@Model.CustomerID />  

                <span class="e-float-line"></span>  

                <label asp-for="CustomerID" class="e-float-text e-label-top">CustomerID</label>  

            </div>  

        </div>  

        <div class="form-group col-md-6">  

            <div class="e-float-input e-control-wrapper">  

                <ejs-dropdownlist id="EmployeeID" value=@Model.EmployeeID dataSource="IndexModel.employee" placeholder="Employee ID" floatLabelType="Always" popupHeight="300px">  

                    <e-dropdownlist-fields text="FirstName" value="EmployeeID"></e-dropdownlist-fields>  

                </ejs-dropdownlist>  

            </div>  

            </div>  

        </div>  

  

        <div class="form-row">  

            <div class="form-group col-md-6">  

                <ejs-datepicker id="OrderDate" width="150px" value=@Model.OrderDate placeholder="Order Date" floatLabelType="Always"></ejs-datepicker>  

            </div>  

            <div class="form-group col-md-6">  

                <ejs-dropdownlist id="ShipCity" value="@Model.City" dataSource="@IndexModel.OrdersDetails.GetAllRecords().ToArray()" placeholder="City" floatLabelType="Always" popupHeight="300px">  

                    <e-dropdownlist-fields text="City" value="City"></e-dropdownlist-fields>  

                </ejs-dropdownlist>  

            </div>  

            <div class="form-group col-md-6">  

                <div class="e-float-input e-control-wrapper">  

                    <input asp-for="CustomerName" value=@Model.CustomerName />  

                    <span class="e-float-line"></span>  

                    <label asp-for="CustomerName" class="e-float-text e-label-top">Customer Name</label>  

                </div>  

            </div>  

        </div>  

  

        <div class="form-row">  

            <h6 style="padding-left: 17px;">Gender </h6>  

            <div class="form-group col-md-4">  

                <ejs-radiobutton id="radio1" label="Male" name="Gender" change="radioBtnChange" created="radioBtnCreated" value="male"></ejs-radiobutton>  

            </div>  

            <div class="form-group col-md-4">  

                <ejs-radiobutton id="radio2" label="Female" name="Gender" change="radioBtnChange" created="radioBtnCreated" value="female"></ejs-radiobutton>  

            </div>  

        </div>  

  

        <div class="form-row">  

            <h6 style="padding-left: 17px;">Languages </h6>  

            <div class="form-group col-md-4">  

                <div class="e-float-input e-control-wrapper">  

                    <ejs-checkbox id="Language1" name="Language1" label="Language1" checked="@Model.Language1"></ejs-checkbox>  

  

                </div>  

            </div>  

            <div class="form-group col-md-4">  

                <div class="e-float-input e-control-wrapper">  

                    <ejs-checkbox id="Language2" name="Language2" label="Language2" checked="@Model.Language2"></ejs-checkbox>  

  

                </div>  

            </div>  

            <div class="form-group col-md-4">  

                <div class="e-float-input e-control-wrapper">  

                    <ejs-checkbox id="Language3" name="Language3" label="Language3" checked="@Model.Language3"></ejs-checkbox>  

  

                </div>  

            </div>  

            <div class="col-lg-8 control-section">  

                <div class="control_wrapper">  

                    <ejs-uploader id="File" success="onFileSuccess" dropArea=".control-fluid" asyncSettings="@asyncSettings">  // file uploader component  

                    </ejs-uploader>  

                </div>  

            </div>  

  

        </div>  

    </div>  

  

  

Find the edit partial view code in the above code example. In that we have rendered all the custom components like radio button, checkbox and file uploader.  

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/grid_Custom_sample1546497361.zip 

  

UG-Links:  

  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#dialoginline-template  

  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#foreign-key-column  

  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#url-adaptor  

Please get back to us if you need further assistance.  

  

Regards,  

Ajith G.