CODEWITHSUNDEEP
razor-pagesblazorblazor-server-side.net-core-3.1
frustratedITGuy
frustratedITGuy

Reputation: 21

Razor Component event not firing in Razor Page

How do I get events to fire in a Razor component running in a Razor page?

My Startup:

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapBlazorHub();
            });
        }

My Razor Page calling the component:

@page
@model DocketDetail.OrderModel
@{
    Layout = null;
}
@using RelationalObjectLayerCore;

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

    <script src="_framework/blazor.server.js"></script>

    <script src="~/js/site.js"></script>
    <title>Order</title>
</head>
<body>
<component type="typeof(Component.Filedby)" render-mode="ServerPrerendered"  />
</body>

Everything displays properly.

My component:

@using Microsoft.AspNetCore.Components


@code {

    private void SearchPerson()
    {
        string x = "TEST";
    }    
}


<button @onclick="SearchPerson">Search</button>

Obviously this is pared down from my actual code... but I can not figure out how to get "SearchPerson" to fire in the Razor Component.

Upvotes: 0

Views: 1564

Answers (2)

David Shader
David Shader

Reputation: 145

I think I see what you're trying to do. Not sure if that is going to work they way you intend. The component will get rendered using Blazor, but the code attached to the button won't function. Put the @code{} for your button on the page that gets loaded. Or you can do an OnInitialized() overload if you want that code to run each time the page is loaded.

Also, make sure that the Blazor is rendering properly in the browser. Use F12 and make sure it says connected.

https://learn.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1

Upvotes: 0

frustratedITGuy
frustratedITGuy

Reputation: 21

Found this: https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#integrate-razor-components-into-razor-pages-and-mvc-apps

With this little note:

Add a <script> tag for the blazor.server.js script inside of the closing </body> tag:

HTML

<script src="_framework/blazor.server.js"></script>

Moved my script tag and it now works.

Thanks everyone for your suggestions.

Upvotes: 1

Related Questions