locked
I Cannot intergrate the Bootstrap-tables in to Blazor RRS feed

All replies

  • User-1330468790 posted

    Hi, Prathamesh shende,

     

    You have to understand that data attributes and some class names are used by Bootstrap to implement its functionality

    However, Blazor has no knowledge about how Bootstrap or any other JS library works.

    Therefore, if you want to use Bootstrap-table in Blazor you should probably reimplement some logic from bootstrap-table.js in C#.

     
    Reason:

    Though Blazor supports most Bootstrap components but not bootstrap-table since its logic is inside bootrap-table.js file.

    Suggestion:

    You can check blazorise

    https://blazorise.com/docs/usage/bootstrap/

    which includes many components like table

    https://blazorise.com/docs/components/table/

    Example:

    .razor component:

    <h3>DataTable</h3>
    
    <Table IsHoverable="true">
        <TableHeader>
            <TableRow>
                <TableHeaderCell>Date</TableHeaderCell>
                <TableHeaderCell>Temp. (C)</TableHeaderCell>
                <TableHeaderCell>Summary</TableHeaderCell>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableRowCell>2020-03-04</TableRowCell>
                <TableRowCell>35</TableRowCell>
                <TableRowCell>Cloudy</TableRowCell>
            </TableRow>
            <TableRow>
                <TableRowCell>2020-03-05</TableRowCell>
                <TableRowCell>37</TableRowCell>
                <TableRowCell>Sunny</TableRowCell>
            </TableRow>
            <TableRow>
                <TableRowCell>2020-03-06</TableRowCell>
                <TableRowCell>32</TableRowCell>
                <TableRowCell>Rainy</TableRowCell>
            </TableRow>
            <TableRow>
                <TableRowCell>2020-03-07</TableRowCell>
                <TableRowCell>30</TableRowCell>
                <TableRowCell>Rainy</TableRowCell>
            </TableRow>
    
        </TableBody>
    </Table>

    Result:

     

    Hope this can help you.

    Best regards,

    Sean

    Thursday, March 12, 2020 9:56 AM
  • User2041008840 posted

    Error Showing in browser Inspect element - 
    Uncaught TypeError: Cannot set property 'BootstrapTable' of undefined
    at bootstrap-table.js:6870
    at bootstrap-table.js:4
    at bootstrap-table.js:5
    blazor.server.js:1 [2020-03-13T03:34:23.321Z] Information: Normalizing '_blazor' to 'https://localhost:44353/_blazor'.
    VM164 SourceOfHires:128 Uncaught ReferenceError: $ is not defined
    at VM164 SourceOfHires:128
    VM164 SourceOfHires:1 Unchecked runtime.lastError: The message port closed before a response was received.
    blazor.server.js:1 [2020-03-13T03

    _host.cshtml

    @page "/"
    @namespace HRManagementWeb.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HRManagementWeb</title>
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap-tables/bootstrap-table.min.css" />
        <link href="~/lib/font-awesome/fontawesome-all.css" rel="stylesheet" />
        <link href="~/lib/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
        <link href="css/site.css" rel="stylesheet" />
    </head>
    <body>
        <app>
            <component type="typeof(App)" render-mode="ServerPrerendered" />
        </app>
        <script src="~/lib/bootstrap-tables/bootstrap-table.js"></script>
    
        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss"></a>
        </div>
    
        <script src="_framework/blazor.server.js"></script>
    
        <script>
            var $table = $('#table');
            $('#table').attr("class", "bg-dark");
            //'json', 'xml', 'csv', 'sql'
            $(function () {
                $('#toolbar').find('select').change(function () {
                    $table.bootstrapTable('destroy').bootstrapTable({
                        exportDataType: $(this).val(),
                        exportTypes: ['txt', 'excel', 'pdf'],
                        columns: [
                            {
                                field: 'state',
                                checkbox: true,
                                visible: $(this).val() === 'selected'
                            },
                            {
                                field: 'name',
                                title: 'Customer'
                            },
                        ]
                    })
                }).trigger('change')
            });
        </script>
    
    </body>
    </html>
    

    but its not working properly. 

    Friday, March 13, 2020 3:39 AM
  • User-420925025 posted

    Actually I have same problem but I solved when you call bootstrap-table method don't call it in same razor page call it in another page then call razor page which in it the method in your main razor page ex:

    _Host.cshtml

    @page "/"
    @namespace TestApplication.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TestApplication</title>
        <base href="~/" />
        @*FontAwesome*@
        <link href="~/lib/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
        @*Bootstrap*@
        <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
        @*BootstrapTable*@
        <link href="~/lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
        <link href="~/lib/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.min.css" rel="stylesheet" />
        <link href="~/lib/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.min.css" rel="stylesheet" />
    
        @* MDBootstrap*@
        <link href="~/lib/mdbootstrap/css/mdb.min.css" rel="stylesheet" />
    
    </head>
    <body style="background-image: url('../images/2.png');">
        <app>
            <component type="typeof(App)" render-mode="ServerPrerendered" />
        </app>
    
        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss"></a>
        </div>
    
    
    
        <script src="_framework/blazor.server.js"></script>
        @*JQUERY*@
        <script src="~/lib/jquery/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    
        @*TableDND*@
        <script src="~/lib/TableDnD/jquery.tablednd.min.js"></script>
    
        @*BootStrap$*@
        <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
        @*MDBootStrap*@
        <script src="~/lib/mdbootstrap/js/mdb.min.js"></script>
        @*FONTAWESOME*@
        <script src="~/font-awesome/js/all.min.js"></script>
        @*Bootstrap Table*@
        <script src="~/lib/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="~/lib/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script>
        <script src="~/lib/bootstrap-table/extensions/multiple-sort/bootstrap-table-multiple-sort.min.js"></script>
        <script src="~/lib/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
    
      
        <script>
            function test() {
    
                $(function () {
                    $('#table').bootstrapTable()
                })
           
            }
        </script>
    </body> </html>

    Your Main Razor Page 

    Test.razor

    @page "/Test
    @using TestApplication.Models
    @using TestApplication.Services
    @using TestApplication.Services.Computer.FirstStageService
    @using TestApplication.Models.Computer.FirstStage
    @inject ITestService service
    @inject IJSRuntime jsRuntime
    
    
    @if (TestList == null)
    {
        <p><em>Loading...</em></p> }
    else
    
                    <!--Table-->
                    <table  id="table"
                            data-show-columns="true"
                            data-pagination="true"
                            data-search="true"
                            data-side-pagination="client"
                            data-show-jump-to="true"
                            data-use-row-attr-func="true"
                            data-reorderable-rows="true"
                            class="table table-sm table-responsive-sm  table-hover  text-center">
                        <thead class="thead-dark font-weight-bold">
                            <tr>
                                <th class="font-weight-bold" data-field="ID" data-sortable="true">Id</th>
                                <th class="font-weight-bold" data-field="Day" data-sortable="true">Day</th>
                                <th class="font-weight-bold" data-field="room" data-sortable="true">Room</th>
                                <th class="font-weight-bold" data-field="Group" data-sortable="true">Group</th>
                                <th class="font-weight-bold" data-field="time" data-sortable="true">Time</th>
                                <th class="font-weight-bold" data-field="subject" data-sortable="true">Subject</th>
                                <th class="font-weight-bold" data-field="teacher" data-sortable="true">Teacher</th>
                                <th class="font-weight-bold">Action <TF></TF>  </th>
    
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var TestListItem in TestList)
                            { 
    
    
    
                           YOUR CODE
    
    
    
                            }
                        </tbody>
    YOU CAN CALL Here
    <JSFunction></JSFunction>

    </table>

    OR YOU CAN CALL Here
    <JSFunction></JSFunction> } @code { List<TestModel> TestList; TestModel test = new TestModel(); . . . }

    Now in normal case we call js fuction in our same razor page but with bootstrap Table you need to call it in anothor razor page and call that razor page in main one but not any where you should call it inside the table or inside the condition . I give you an example in up code.

    JSFunction.razor

    @inject IJSRuntime jsRuntime
    
    
    
    @code{
        @* Call JQuery Library*@
    
    
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await jsRuntime.InvokeVoidAsync(identifier: "test");
    
    
            }
        }
    }

    Friday, August 7, 2020 11:32 PM