Forem: Shekhar Tarare

A Simple Guide to Destructuring in JavaScript: Learn with Easy Examples

Shekhar Tarare — Tue, 15 Oct 2024 20:39:49 +0000

Introduction

JavaScript has a feature called destructuring that allows you to easily extract values from arrays or properties from objects and assign them to variables. Destructuring makes it easier to work with data, and it’s an essential tool for beginners learning JavaScript.
In this post, we’ll break down destructuring with super simple examples so you can understand it in no time.

What is Destructuring?

Imagine you have a box full of toys, and you want to take some toys out of the box and play with them. Instead of picking up each toy individually, destructuring allows you to grab the specific toys (or data) you need in one go!
In JavaScript, destructuring lets you unpack values from arrays or extract properties from objects into variables. It’s a clean and convenient way to handle data, especially when working with complex arrays or objects.

Destructuring Arrays

Let’s start with array destructuring. Arrays are like lists that hold multiple values, and destructuring allows you to take values from an array and assign them to variables in a single line of code.

Example 1: Basic Array Destructuring

let fruits = ['apple', 'banana', 'orange'];
// Destructuring the array
let [fruit1, fruit2, fruit3] = fruits;
console.log(fruit1); // Output: apple
console.log(fruit2); // Output: banana
console.log(fruit3); // Output: orange

In this example, we have an array called fruits, and we use destructuring to assign the values to fruit1, fruit2, and fruit3. Instead of accessing each element manually, destructuring lets us do it all at once!

Example 2: Skipping Array Elements
You can also skip elements in an array using destructuring. Let’s say you only want the first and third fruit from the fruits array.

let fruits = ['apple', 'banana', 'orange'];
// Skipping the second element
let [fruit1, , fruit3] = fruits;
console.log(fruit1); // Output: apple
console.log(fruit3); // Output: orange

Here, by leaving a blank space (just a comma) in the destructuring pattern, we skip the second element (banana) and go straight to orange.

Example 3: Default Values in Array Destructuring
What if the array doesn’t have enough elements? You can set default values to avoid getting undefined.

let colors = ['red'];
// Setting a default value for the second color
let [color1, color2 = 'blue'] = colors;
console.log(color1); // Output: red
console.log(color2); // Output: blue

Since colors only has one element (red), the second variable (color2) gets the default value of ‘blue’.

Destructuring Objects

Now, let’s move on to object destructuring. Objects are like containers that store key-value pairs, and destructuring helps you pull out specific properties easily.

Example 4: Basic Object Destructuring

let person = {
  name: 'John',
  age: 30,
  job: 'developer'
};
// Destructuring the object
let { name, age, job } = person;
console.log(name); // Output: John
console.log(age);  // Output: 30
console.log(job);  // Output: developer

Here, the person object has three properties: name, age, and job. Destructuring allows us to extract these properties into separate variables with the same names.

Example 5: Assigning to New Variable Names
What if you want to assign these properties to variables with different names? You can do that easily with object destructuring.

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2020
};
// Assigning to new variable names
let { brand: carBrand, model: carModel, year: carYear } = car;
console.log(carBrand); // Output: Toyota
console.log(carModel); // Output: Corolla
console.log(carYear);  // Output: 2020

In this example, we used brand: carBrand to assign the brand property to a new variable called carBrand, and similarly for model and year.

Example 6: Default Values in Object Destructuring
Just like with arrays, you can set default values when destructuring objects.

let student = {
  name: 'Alice'
};
// Setting default value for age
let { name, age = 18 } = student;
console.log(name); // Output: Alice
console.log(age);  // Output: 18 (since age wasn't in the object)

Since the student object doesn’t have an age property, it defaults to 18.

Example 7: Nested Destructuring
Sometimes, objects can have other objects inside them. This is where nested destructuring comes in handy.

let user = {
  name: 'Bob',
  address: {
    city: 'New York',
    zip: 10001
  }
};
// Destructuring nested object
let { name, address: { city, zip } } = user;
console.log(name);  // Output: Bob
console.log(city);  // Output: New York
console.log(zip);   // Output: 10001

In this example, we not only destructured the name property but also the city and zip from the nested address object.

Why Use Destructuring?

Cleaner Code: Destructuring allows you to write cleaner and more readable code.
Easier Data Handling: It’s much easier to extract data from arrays and objects without needing to write a lot of repetitive code.
Default Values: You can set default values for variables, which helps prevent errors when values are missing.

Conclusion

Destructuring is a powerful and simple feature in JavaScript that makes working with arrays and objects much easier. By using destructuring, you can write cleaner, more efficient code while saving time and reducing errors. Whether you’re a beginner or just learning JavaScript, destructuring is something you’ll use often in your coding journey.
Start experimenting with destructuring, and see how it can simplify your code! Happy coding!

Understanding the Spread Operator in JavaScript: A Simple Guide for Beginners

Shekhar Tarare — Tue, 15 Oct 2024 18:06:13 +0000

Introduction

JavaScript is a fun programming language, and one of its most exciting features is the spread operator. If you’re just starting out with coding, or even if you’re a kid interested in learning JavaScript, don’t worry! I’ll break this concept down in the simplest way possible, with examples to help you understand.

What is the Spread Operator?

The spread operator looks like three dots (…). Just like how spreading butter across bread makes it cover everything evenly, the spread operator in JavaScript “spreads” or expands elements like arrays or objects, making them easy to work with.

Imagine you have a bag of marbles. Instead of taking out each marble one by one, you can just pour them all out at once. That’s kind of what the spread operator does! It takes the items inside something (like an array or object) and “spreads” them out so you can work with them individually.

Where Do We Use the Spread Operator?

The spread operator is most commonly used with:

Arrays (which are like lists of things)
Objects (which are like containers that hold information)
Functions (which are like recipes that perform a task)

Let’s dive into each one with examples!

Using the Spread Operator with Arrays

An array is a list of items. Imagine you have two baskets of fruits and you want to combine all of them into one big basket. The spread operator can help you do that.

Example 1: Combining Arrays

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'grape'];
// Using the spread operator to combine them into one array
let allFruits = [...fruits1, ...fruits2];
console.log(allFruits); // Output: ['apple', 'banana', 'orange', 'grape']

Here, the spread operator takes the fruits from both fruits1 and fruits2 and combines them into one big basket called allFruits.

Example 2: Copying an Array
The spread operator also helps when you want to make a copy of an array. This is useful when you don’t want to change the original array.

let originalArray = [1, 2, 3];
let copiedArray = [...originalArray];
console.log(copiedArray); // Output: [1, 2, 3]

With this, you’ve made a copy of originalArray and stored it in copiedArray. Now you can change one without affecting the other!

Using the Spread Operator with Objects

Objects in JavaScript are like containers that store data in key-value pairs. The spread operator can be used to copy or combine objects.

Example 3: Copying an Object

let person = { name: 'John', age: 25 };
// Copying the object using the spread operator
let copiedPerson = { ...person };
console.log(copiedPerson); // Output: { name: 'John', age: 25 }

Just like with arrays, this makes a copy of the person object.

Example 4: Combining Objects
Let’s say you want to combine two objects: one has personal details, and the other has contact details.

let personalInfo = { name: 'Alice', age: 30 };
let contactInfo = { phone: '123-4567', email: 'alice@example.com' };
// Combining the objects
let completeInfo = { ...personalInfo, ...contactInfo };
console.log(completeInfo);
// Output: { name: 'Alice', age: 30, phone: '123-4567', email: 'alice@example.com' }

By using the spread operator, we’ve combined personalInfo and contactInfo into a single object.

Using the Spread Operator with Functions

The spread operator can also be used with functions to pass multiple arguments.

Example 5: Passing an Array to a Function
If you have a function that expects multiple arguments, but you have them stored in an array, the spread operator can help spread the array elements as separate arguments.

function addNumbers(a, b, c) {
  return a + b + c;
}
let numbers = [1, 2, 3];
// Using the spread operator to pass the array elements as arguments
let sum = addNumbers(...numbers);
console.log(sum); // Output: 6

In this example, numbers is an array, and the spread operator passes its values as arguments to the addNumbers function.

Why Use the Spread Operator?

Simplicity: It reduces the need for loops or complex code.
Readability: It makes your code cleaner and easier to understand.
Flexibility: It works well with both arrays and objects, making it very versatile.

Conclusion

The spread operator (…) is one of the coolest features of JavaScript! It helps you easily handle arrays, objects, and even functions. Whether you’re combining, copying, or spreading things out, the spread operator has you covered.

The next time you need to work with arrays or objects, try using the spread operator — it will make your life much easier!

By now, you should have a good understanding of how the spread operator works. Happy coding, and don’t forget to experiment with your own examples!

Integrating Stripe Checkout in an ASP.NET Core 8 Application: A Step-by-Step Guide

Shekhar Tarare — Sat, 06 Jul 2024 09:16:29 +0000

Introduction

In this tutorial, we will walk through the process of integrating Stripe Checkout into an ASP.NET Core NET Core 8 application. This guide will cover everything from setting up a new ASP.NET Core NET Core 8 project to creating a Stripe checkout session. This is ideal for developers looking to implement a seamless payment gateway in their web applications.

Step 1: Setting Up a New ASP.NET Core 8 Project

First, let's create a new ASP.NET Core 8 project.
Select the template ASP.NET Core Web App (Model-View-Controller). Give a project name and click Next.

Select .NET 8 and click on Create.

Step 2: Adding Stripe Library

Next, we need to add the Stripe library to our project. This will allow us to interact with the Stripe API.

Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution. Search for stripe. net and install the latest version.

Step 3: Configuring Stripe

To use Stripe, we need to configure it with our secret key. Add your Stripe secret key in the appsettings.json file.

Open appsettings.json and add the following configuration:

{
    "Stripe": {
        "SecretKey": "your_stripe_secret_key"
    }
}

Create a StripeSettings class to represent this configuration in your application. This class should be placed in your Models or Configuration folder. I am placing this is Models:
StripeSettings.cs

namespace StripeCheckoutDemo.Models
{
    public class StripeSettings
    {
        public string? SecretKey { get; set; }
    }
}

Update Program.cs to configure Stripe:

using Stripe;
using StripeCheckoutDemo.Models;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
// Configure Stripe settings
builder.Services.Configure<StripeSettings>(builder.Configuration.GetSection("Stripe"));
StripeConfiguration.ApiKey = builder.Configuration["Stripe:SecretKey"];
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapControllerRoute(
    name: "checkout",
    pattern: "checkout/{action=Index}/{id?}",
    defaults: new { controller = "Checkout", action = "Index" });
app.Run();

Step 4: Creating a Model for the Form Data

Create a model to capture the form data for the Stripe checkout session.

Add a new class CheckoutFormModel.cs in the Models folder:

namespace StripeCheckoutDemo.Models
{
    public class CheckoutFormModel
    {
        public string? ProductName { get; set; }
        public string? ProductDescription { get; set; }
        public long Amount { get; set; }
        public string? Currency { get; set; }
    }
}

Step 5: Creating the Checkout Session Endpoint

Create an endpoint to handle the form submission and create a Stripe checkout session. Also add a action methods for success and cancel.
Add a new controller CheckoutController.cs in the Controllers folder:

using Microsoft.AspNetCore.Mvc;
using Stripe.Checkout;
using Stripe;
using StripeCheckoutDemo.Models;
namespace StripeCheckoutDemo.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class CheckoutController : Controller
    {
        private readonly IConfiguration _configuration;
        public CheckoutController(IConfiguration configuration)
        {
            _configuration = configuration;
        }
        [HttpPost("create-checkout-session")]
        public IActionResult CreateCheckoutSession([FromBody] CheckoutFormModel model)
        {
            StripeConfiguration.ApiKey = _configuration["Stripe:SecretKey"];
            var options = new SessionCreateOptions
            {
                PaymentMethodTypes = new List<string> { "card" },
                LineItems = new List<SessionLineItemOptions>
            {
                new SessionLineItemOptions
                {
                    PriceData = new SessionLineItemPriceDataOptions
                    {
                        Currency = model.Currency,
                        ProductData = new SessionLineItemPriceDataProductDataOptions
                        {
                            Name = model.ProductName,
                            Description = model.ProductDescription,
                        },
                        UnitAmount = model.Amount,
                    },
                    Quantity = 1,
                },
            },
                Mode = "payment",
                SuccessUrl = $"{Request.Scheme}://{Request.Host}/checkout/success",
                CancelUrl = $"{Request.Scheme}://{Request.Host}/checkout/cancel",
            };
            var service = new SessionService();
            var session = service.Create(options);
            return Ok(new { sessionId = session.Id });
        }
        [HttpGet("success")]
        public IActionResult Success()
        {
            return View();
        }
        [HttpGet("cancel")]
        public IActionResult Cancel()
        {
            return View();
        }
    }
}

Step 6: Creating the Checkout Form

Create a simple form using Bootstrap to capture the product details and amount for the Stripe checkout.
Update the Index.cshtml file in the Views/Home folder:

@page
@model CheckoutFormModel
@using StripeCheckoutDemo.Models
<form id="payment-form">
    <div class="form-group pt-2">
        <label for="productName">Product Name</label>
        <input type="text" class="form-control" id="productName" name="productName" placeholder="Enter product name" required>
    </div>
    <div class="form-group pt-2">
        <label for="productDescription">Product Description</label>
        <input type="text" class="form-control" id="productDescription" name="productDescription" placeholder="Enter product description" required>
    </div>
    <div class="form-group pt-2">
        <label for="amount">Amount (in cents)</label>
        <input type="number" class="form-control" id="amount" name="amount" placeholder="Enter amount" required>
    </div>
    <div class="form-group pt-2">
        <label for="currency">Currency</label>
        <select class="form-control" id="currency" name="currency" required>
            <option value="inr">INR</option>
            <!-- Add more currencies as needed -->
        </select>
    </div>
    <button type="button" class="btn btn-primary mt-2" id="checkout-button">Checkout</button>
</form>
@section scripts {
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        var stripe = Stripe('enter_publishable_key');
        document.getElementById('checkout-button').addEventListener('click', function () {
            fetch('/checkout/create-checkout-session', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    productName: document.getElementById('productName').value,
                    productDescription: document.getElementById('productDescription').value,
                    amount: document.getElementById('amount').value,
                    currency: document.getElementById('currency').value
                })
            })
                .then(function (response) {
                    return response.json();
                })
                .then(function (session) {
                    return stripe.redirectToCheckout({ sessionId: session.sessionId });
                })
                .then(function (result) {
                    if (result.error) {
                        alert(result.error.message);
                    }
                })
                .catch(function (error) {
                    console.error('Error:', error);
                });
        });
    </script>
}

Step 7: Creating the Success Page

Create a simple success page which will be shown after payment is done.
Update the Success.cshtml file in the Views/Checkout folder:

@{
    ViewData["Title"] = "Payment Successful";
}
<h2>Payment Successful</h2>
<p>Thank you for your purchase! Your payment has been successfully processed.</p>

Step 8: Creating the Cancel Page

Create a simple cancel page which will be shown after payment is canceled.
Update the Cancel.cshtml file in the Views/Checkout folder:

@{
    ViewData["Title"] = "Payment Canceled";
}
<h2>Payment Canceled</h2>
<p>Your payment has been canceled. Please try again or contact support if you need assistance.</p>

Step 9: Running the Application

Finally, run your application to see the Stripe checkout integration in action.

Complete code on GitHub:

Please find here the complete code used in this blog.

Conclusion

You've successfully integrated Stripe Checkout into your ASP.NET Core NET Core 8 application. This guide provided step-by-step instructions to set up the project, configure Stripe, and create a checkout session. Now you can easily accept payments through Stripe in your web application.

Creating an Umbraco Backoffice Accessor for Conditional Page Rendering

Shekhar Tarare — Sat, 06 Jul 2024 07:42:41 +0000

Introduction

Umbraco is a popular CMS that offers extensive customization and security features. One of the critical aspects of managing an Umbraco site is ensuring that only authenticated users can access certain parts of the site. In this guide, we'll create an accessor to check the user's authentication status in the Umbraco backoffice and use it in a view to conditionally display content.

Prerequisites

Basic knowledge of ASP.NET Core.
An existing Umbraco installation. (Check this blog to create a new umbraco 13 project)
Visual Studio or any other C# IDE.

Setting Up the Umbraco Backoffice User Accessor

First, we need to create an accessor that checks the user's authentication status in the backoffice.

Step 1: Define the IBackofficeUserAccessor Interface
This interface exposes the authentication status of the backoffice user

using System.Security.Claims;
namespace YourNamespace
{
    public interface IBackofficeUserAccessor
    {
        ClaimsPrincipal BackofficeUser { get; }
    }
}

Explanation:
This code defines an interface called IBackofficeUserAccessor with a property BackofficeUser of type ClaimsPrincipal. This interface will be implemented to access the user's claims.

Step 2: Implement the BackofficeUserAccessor Class
This class implements the IBackofficeUserAccessor interface to retrieve the backoffice user's authentication status. There are some extra logging added to log errors.

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.Options;
using System.Security.Claims;
namespace YourNamespace
{
    public class BackofficeUserAccessor : IBackofficeUserAccessor
    {
        private readonly IOptionsSnapshot<CookieAuthenticationOptions> _cookieOptionsSnapshot;
        private readonly IHttpContextAccessor _httpContextAccessor;

        private readonly ILogger<BackofficeUserAccessor> _logger;
        public BackofficeUserAccessor(
            IOptionsSnapshot<CookieAuthenticationOptions> cookieOptionsSnapshot,
            IHttpContextAccessor httpContextAccessor,
            ILogger<BackofficeUserAccessor> logger
        )
        {
            _cookieOptionsSnapshot = cookieOptionsSnapshot;
            _httpContextAccessor = httpContextAccessor;
            _logger = logger; 
        }

        public ClaimsIdentity BackofficeUser
        {
            get
            {
                var httpContext = _httpContextAccessor.HttpContext;
                if (httpContext == null)
                {
                    _logger.LogWarning("BackofficeAUserAccessor: HttpContext is null.");
                    return new ClaimsIdentity();
                }

                CookieAuthenticationOptions cookieOptions = _cookieOptionsSnapshot.Get(Umbraco.Cms.Core.Constants.Security.BackOfficeAuthenticationType);

                string? backOfficeCookie = httpContext.Request.Cookies[cookieOptions.Cookie.Name!];
                if (string.IsNullOrEmpty(backOfficeCookie))
                {
                    _logger.LogWarning("BackofficeAUserAccessor: BackOffice cookie is null or empty.");
                    return new ClaimsIdentity();
                }
                AuthenticationTicket? unprotected;
                try
                {
                    unprotected = cookieOptions.TicketDataFormat.Unprotect(backOfficeCookie!);
                }
                catch (Exception ex)
                {
                    _logger.LogError(ex, "BackofficeAUserAccessor: Failed to unprotect the BackOffice cookie.");
                    return new ClaimsIdentity();
                }
                if (unprotected == null)
                {
                    _logger.LogWarning("BackofficeAUserAccessor: Unprotected authentication ticket is null.");
                    return new ClaimsIdentity();
                }
                ClaimsIdentity? backOfficeIdentity = unprotected.Principal.GetUmbracoIdentity();
                if (backOfficeIdentity == null)
                {
                    _logger.LogWarning("BackofficeAUserAccessor: BackOffice identity is null.");
                }
                else
                {
                    _logger.LogInformation("BackofficeAUserAccessor: User authenticated.");
                }
                return backOfficeIdentity;
            }
        }
    }
}

Explanation:

Class Declaration: BackofficeUserAccessor class implements the IBackofficeUserAccessor interface.

Constructor: The constructor accepts IOptionsSnapshot and IHttpContextAccessor to access cookie options and the current HTTP context.

BackofficeUser Property: This property checks if the current HTTP context is null. If not, it retrieves the backoffice authentication cookie and checks if it's empty. If the cookie is valid, it unprotects the cookie and retrieves the user's claims principal. If not, it returns an empty claims principal.

Step 3: Register the Accessor in Program.cs
Register the BackofficeUserAccessor in the dependency injection container.

using InstallingUmbracoDemo;
using Umbraco.Cms.Core.Services;
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);

// Register IHttpContextAccessor
builder.Services.AddHttpContextAccessor();
// Register the BackofficeUserAccessor
builder.Services.AddTransient<IBackofficeUserAccessor, BackofficeUserAccessor>();

builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .Build();
WebApplication app = builder.Build();
await app.BootUmbracoAsync();
app.UseUmbraco()
    .WithMiddleware(u =>
    {
        u.UseBackOffice();
        u.UseWebsite();
    })
    .WithEndpoints(u =>
    {
        u.UseInstallerEndpoints();
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
    });
await app.RunAsync();

Using the Backoffice User Accessor in a Controller and View

We can now use the BackofficeUserAccessor directly in our controller and views to conditionally render content.

Use BackofficeUserAccessor in a Controller
Inject the IBackofficeUserAccessor into your controller to check the user's authentication status.

YourController.cs:

using Microsoft.AspNetCore.Mvc;
namespace YourNamespace.Controllers
{
    public class YourController : Controller
    {
        private readonly IBackofficeUserAccessor _backofficeUserAccessor;
        public YourController(IBackofficeUserAccessor backofficeUserAccessor)
        {
            _backofficeUserAccessor = backofficeUserAccessor;
        }
        public IActionResult YourAction()
        {
            if (!_backofficeUserAccessor.BackofficeUser.IsAuthenticated)
            {
                return Unauthorized("You are not authorized to view this page.");
            }
            return View();
        }
    }
}

Explanation:

Constructor Injection: The YourController class receives an instance of IBackofficeUserAccessor via its constructor.

Authentication Check: In the YourAction method, the user's authentication status is checked using _backofficeUserAccessor. BackofficeUser. IsAuthenticated. If the user is not authenticated, it returns an Unauthorized result; otherwise, it renders the view.

Use BackofficeUserAccessor in a View
Use the IBackofficeUserAccessor directly in your Razor view to conditionally render content.

YourView.cshtml:

@inject YourNamespace.IBackofficeUserAccessor BackofficeUserAccessor
@if (BackofficeUserAccessor.BackofficeUser.IsAuthenticated)
{
    <h1>Welcome, authenticated user!</h1>
    <!-- Your protected content goes here -->
}
else
{
    <h1>You are not authorized to view this content.</h1>
}

Explanation:
Dependency Injection in View: The BackofficeUserAccessor is injected into the view using the @inject directive.
Conditional Rendering: The view checks if the user is authenticated using BackofficeUserAccessor. BackofficeUser. IsAuthenticated. If the user is authenticated, it displays the protected content; otherwise, it shows an unauthorized message.

Complete code:

You can check the complete code here. I have used Umbraco 13.4.0 in the project.

Conclusion

By following these steps, you have created a backoffice user accessor that checks if a user is logged into the Umbraco backoffice and used it to conditionally render content in your views. This ensures that only authenticated users can access specific parts of your site, enhancing its security.

Securing Your Hangfire Dashboard in ASP.NET Core 8: Adding an Authorization Filter

Shekhar Tarare — Sat, 06 Jul 2024 07:01:12 +0000

Introduction

In our previous blog post, we explored a step-by-step guide to scheduling API calls with Hangfire in ASP.NET Core. Now, we’ll enhance our application by adding an authorization filter to secure the Hangfire dashboard. This guide will walk you through implementing an authorization filter that ensures only authenticated users can access the Hangfire dashboard.

Adding Authorization Filter to Hangfire Dashboard

To restrict access to the Hangfire dashboard, create a custom authorization filter.

Create a custom authorization filter class:

using Hangfire.Dashboard;
using Microsoft.AspNetCore.Http;
public class MyAuthorizationFilter : IDashboardAuthorizationFilter
{
    public bool Authorize(DashboardContext context)
    {
        var httpContext = context.GetHttpContext();
        return httpContext.User.Identity.IsAuthenticated;
    }
}

Explanation:

MyAuthorizationFilter class implements the IDashboardAuthorizationFilter interface provided by Hangfire.

The Authorize method checks if the user is authenticated by accessing the HttpContext through context.GetHttpContext().

It returns true if the user is authenticated (httpContext.User.Identity.IsAuthenticated), allowing access to the Hangfire dashboard; otherwise, it returns false, denying access.

Update the Program.cs to include the custom authorization filter:

using Hangfire;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

builder.Services.AddIdentity<IdentityUser, IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders();
builder.Services.AddHangfire(config => 
    config.UseSqlServerStorage(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddHangfireServer();
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseHangfireDashboard("/hangfire", new DashboardOptions
{
    Authorization = new[] { new MyAuthorizationFilter() }
});
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();

Explanation:

builder.Services.AddHangfire (config => config. UseSqlServerStorage (builder.Configuration. GetConnectionString (“DefaultConnection”))) configures Hangfire to use SQL Server for job storage.

builder.Services.AddHangfireServer() adds Hangfire’s background processing server to the services collection.

app.UseHangfireDashboard(“/hangfire”, new DashboardOptions { Authorization = new[] { new MyAuthorizationFilter() } }) configures the Hangfire dashboard to use the custom authorization filter we created earlier.

The Authorization property of DashboardOptions is set to an array containing an instance of MyAuthorizationFilter, ensuring that only authenticated users can access the Hangfire dashboard.

Conclusion

By following this guide, you have successfully added an authorization filter to secure the Hangfire dashboard in your ASP.NET Core 8 application. This setup ensures that only logged-in users can access sensitive scheduling data, enhancing the security of your application.

Step-by-Step Guide to Scheduling API Calls with Hangfire in ASP.NET Core

Shekhar Tarare — Sat, 06 Jul 2024 06:47:40 +0000

Introduction

In the last blog post, we created a test API in ASP.NET Core NET Core. If you haven’t checked that, here’s the link for that blog. In this blog post, we’ll walk you through the steps to integrate Hangfire in your ASP.NET Core NET Core project to schedule an API to run daily. Hangfire is a powerful library that simplifies background job processing in .NET applications, making it an excellent choice for scheduling tasks. Follow along to learn how to set up Hangfire and configure it to run your API on a daily basis.

Why Use Hangfire for Background Jobs in ASP.NET Core?

Before diving into the implementation, let’s understand why Hangfire is a preferred choice for background jobs:

Ease of Use: Hangfire is simple to set up and use, allowing you to focus on your application’s core functionality.
Scalability: It can handle a large number of jobs and is scalable to meet your application’s demands.
Reliability: Hangfire ensures that jobs are executed even after server restarts, providing reliability for critical tasks.
Dashboard: It comes with a built-in dashboard for monitoring jobs, making it easy to track and manage background processes.

Types of Scheduling Provided by Hangfire

Hangfire supports various types of background jobs, making it flexible to use in different scenarios. Here are the main types of scheduling it provides:

Fire-and-Forget Jobs: These jobs are executed only once and almost immediately after creation. They are useful for tasks that need to be done quickly and don’t need to be repeated.



BackgroundJob.Enqueue(() => Console.WriteLine("Fire-and-forget job executed!"));

Delayed Jobs: These jobs are executed only once but not immediately. They are scheduled to run after a specified delay.



BackgroundJob.Schedule(() => Console.WriteLine("Delayed job executed!"), TimeSpan.FromDays(1));

Recurring Jobs: These jobs are executed many times on a specified CRON schedule. They are useful for tasks that need to run on a regular basis.



RecurringJob.AddOrUpdate(() => Console.WriteLine("Recurring job executed!"), Cron.Daily);

Continuations: These jobs are executed when their parent job has finished. They are useful for workflows where a job depends on the successful completion of another job.



var jobId = BackgroundJob.Enqueue(() => Console.WriteLine("Parent job executed!"));
BackgroundJob.ContinueWith(jobId, () => Console.WriteLine("Continuation job executed!"));

Prerequisites

Before starting, ensure you have the following:

Visual Studio 2019 or later
. NET Core SDK installed
Basic knowledge of ASP.NET Core NET Core

Step-by-Step Guide to Integrate Hangfire

Step 1: Create a New ASP.NET Core Web API Project
First, create a new ASP.NET Core project or open an existing one. If you don’t have any project, then follow the steps mentioned here to create one. I have also added the steps for creating a test API.

Step 2: Install Hangfire NuGet package

Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution…
Search for Hangfire and install the latest one.

Search for System.Data.SqlClient and install the latest one.

Step 3: Create a database for using with Hangfire
Open SSMS and create a new Database. You can use the existing one also.

Step 4: Add connection string to appsettings.json
In the appsettings.json file, add the connection string for your SQL Server:



{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "TestDatabase": "Server=SHEKHAR\\SQLEXPRESS;Database=HangfireDemo;TrustServerCertificate=True;User Id=adminuser;Password=adminuser;"
  }
}

Step 5: Configure Hangfire in Program.cs
Modify the Program.cs file to configure Hangfire:

I have added the steps on the comments.



using Hangfire;
using Hangfire.SqlServer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Step 1 -> Hangfire configuration with SQL Server storage

var connectionString = builder.Configuration.GetConnectionString("TestDatabase"); 
builder.Services.AddHangfire(config =>
{
    config.UseSqlServerStorage(connectionString, new SqlServerStorageOptions
    {
        CommandBatchMaxTimeout = TimeSpan.FromMinutes(5),
        SlidingInvisibilityTimeout = TimeSpan.FromMinutes(5),
        QueuePollInterval = TimeSpan.Zero,
        UseRecommendedIsolationLevel = true,
        DisableGlobalLocks = true
    });
});
// Step 2 -> Add Hangfire's server.
builder.Services.AddHangfireServer();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
//Step 3 -> Added the dashboard url
app.UseHangfireDashboard("/hangfire");
app.Run();

Step 6: Create a Background Job to Call the API

Create a background job that calls your API. For this example, I am using my API endpoint which is https://localhost:7282/api/TestApi. We need to create a service to call this endpoint and then schedule it with Hangfire.
Create a new service class ApiCallService.cs and add the below code:



namespace TestApi
{
    public class ApiCallService
    {
        private readonly HttpClient _httpClient;
        public ApiCallService(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }
        public async Task CallApiEndpointAsync()
        {
            var response = await _httpClient.GetAsync("https://localhost:7282/api/TestApi");
            response.EnsureSuccessStatusCode();
            // Log success or handle the response as needed
        }
    }
}



builder.Services.AddHttpClient<ApiCallService>();

Schedule the job in Program.cs:



// Schedule the job to call the API endpoint
RecurringJob.AddOrUpdate<ApiCallService>("call-api-endpoint", service => service.CallApiEndpointAsync(), Cron.Daily); // Adjust the schedule as needed

Final Program.cs code:



using Hangfire;
using Hangfire.SqlServer;
using TestApi;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Step 1 -> Hangfire configuration with SQL Server storage
var connectionString = builder.Configuration.GetConnectionString("TestDatabase"); 
builder.Services.AddHangfire(config =>
{
    config.UseSqlServerStorage(connectionString, new SqlServerStorageOptions
    {
        CommandBatchMaxTimeout = TimeSpan.FromMinutes(5),
        SlidingInvisibilityTimeout = TimeSpan.FromMinutes(5),
        QueuePollInterval = TimeSpan.Zero,
        UseRecommendedIsolationLevel = true,
        DisableGlobalLocks = true
    });
});
// Step 2 -> Add Hangfire's server.
builder.Services.AddHangfireServer();
// Register httpclient
builder.Services.AddHttpClient<ApiCallService>();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
//Step 3 -> Added the dashboard url
app.UseHangfireDashboard("/hangfire");
// Schedule the job to call the API endpoint
RecurringJob.AddOrUpdate<ApiCallService>("call-api-endpoint", service => service.CallApiEndpointAsync(), Cron.Daily); // Adjust the schedule as needed
app.Run();

Step 7: Run and Monitor Your Application
After running the project. You will see some new tables got created in the database. Hangfire creates those to track the jobs and to perform other things:

Access the Hangfire Dashboard at https://localhost:7282/hangfire/ to monitor your background jobs.

Click on Recurring Jobs tab to see all the recurring jobs. Currently it’s showing only one which we have scheduled.

Click on Jobs > Succeeded to see the status of the jobs.

To get more details click on that job:

Final code on GitHub:

Here’s the GitHub link for the repo where all the code has been added.

Conclusion

By following this guide, you have integrated Hangfire into your . NET 8 project and scheduled an API call using Hangfire with SQL Server as the storage provider. This setup ensures your API is called regularly according to the specified schedule. For more advanced Hangfire configurations and storage options, refer to the official Hangfire documentation.

Creating a Simple ASP.NET Core Web API for Testing Purposes

Shekhar Tarare — Fri, 05 Jul 2024 16:16:18 +0000

Introduction

ASP.NET Core NET Core is a powerful framework for building web APIs. In this tutorial, we will walk you through creating a simple API for testing. Whether you are a beginner or looking to refresh your knowledge, this guide will help you set up a basic web API project in no time.

Prerequisites

Before we begin, ensure you have the following installed on your development machine:

Visual Studio (2019 or later)
.NET Core SDK (I am using 8 for this tutorial)

Step-by-Step Guide to Creating a Simple ASP.NET Core API

Step 1: Create a New Web API Project

Open Visual Studio.
Click on Create a new project.
Select the template ASP.NET Core NET Core Web API Application and click Next.

Name your project and click Next.
Provide Additional information. I am selecting . NET 8.0 as a framework. Click Create.

Once the project gets created. You will find one controller by default available called WeatherForecastController.

Step 2: Create our API

Right click on Controllers > Add > Controller.
Click on API on the left and select API Controller — Empty.

Give it a name and click on Add.
Add the following code. I am adding one get method which is just returning “Hello World!”.



using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace TestApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TestApiController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            return Ok(new { Message = "Hello, World!" });
        }
    }
}

Step 3: Run the Application

Press F5 to run the application.
You will see the Swagger UI with your API endpoints listed.

Step 4: Test the API Endpoints

Using the Swagger UI, you can test the endpoints.
Click on execute and it will give the data as response.

If you want to check which URL it’s hitting then open developer tools and go to network tab. Click on execute button for the endpoint and you will see one request on the network. Click on it. On the Headers tab, you will get the Request URL. That’s the API URL.

You can even run the URL on the new tab and it will give the response.

Conclusion

Congratulations! You’ve successfully created a simple ASP.NET Core NET Core API for testing purposes. This basic setup can serve as a foundation for more complex APIs. Remember, practice makes perfect, so continue experimenting and building upon what you’ve learned.

In the next blog, we will schedule this test API call with Hangfire. Here’s the link for that blog.

Create an API in Umbraco in 5 Minutes: A Quick Guide for Developers

Shekhar Tarare — Fri, 05 Jul 2024 14:26:39 +0000

Why Create an API in Umbraco?

APIs (Application Programming Interfaces) allow different software systems to communicate with each other. By creating an API in Umbraco, you can enable external applications to interact with your website’s content, offering enhanced functionality and improved user experiences.

Prerequisites

Before we start, ensure you have the following:

An Umbraco installation
Visual Studio or your preferred IDE

Step 1: Set Up Your Umbraco Project

First, ensure your Umbraco project is set up correctly. If you haven’t installed Umbraco yet, follow the steps mentioned here:

Step 2: Create the API Controller

Add a New Folder called Controllers: Add a new class file and name it MyAPIController.cs.

Write the API Code:



using Microsoft.AspNetCore.Mvc;

using Umbraco.Cms.Web.Common.Controllers;

namespace InstallingUmbracoDemo.Controllers

{

    public class MyAPIController : UmbracoApiController

    {

        [HttpGet]

        public string GetGreeting()

        {

            return "Hello, Umbraco API!";

        }

    }

}

Step 3: Test Your API

We don’t need to do anything about routing. Umbraco will automatically handle that for us. Now, let’s test our API:

Open your browser and navigate to http://yourdomain.com/umbraco/api/myapi/getgreeting. You should see the message “Hello, Umbraco API!”.

Conclusion

Creating an API in Umbraco is quick and easy, allowing you to expand the functionality of your website and integrate with external systems. By following the steps outlined in this guide, you can set up a basic API in just 5 minutes without the need for additional routing configuration.

For more advanced Umbraco tutorials and tips, stay tuned to our blog and feel free to leave your questions in the comments!

How to Create a New Umbraco Project: A Step-by-Step Guide

Shekhar Tarare — Fri, 05 Jul 2024 12:58:49 +0000

Introduction to Umbraco

Umbraco is a highly versatile and user-friendly CMS that allows developers to create dynamic websites and applications. Known for its flexibility and extensive customization options, Umbraco is ideal for a range of projects from small blogs to large enterprise solutions.

Prerequisites

Before you begin, ensure you have the following prerequisites:

Visual Studio 2019 or later
NET SDK installed (version 8)

Installing Umbraco

To install Umbraco, follow these steps:
Step 1: Install Umbraco Template
dotnet new install Umbraco.Templates::13.4.0 to install the project templates. After installing that, you will see the umbraco templates while creating a new project.

Step 2: Create a New Project
Open Visual Studio and create a new Umbraco Project. Name your project and choose the appropriate location. Select the Framework and fill other additional information if needed.

Setting Up Your project

Run the project. You will get the below screen. Add your details and click on Change database if you don’t want to use SQLite and click on Install.

You will get the below screen. Add your credentials and login.

After login, this screen will come:

Conclusion

Creating a new Umbraco project is straightforward and highly customizable, making it a great choice for developers of all levels. By following this step-by-step guide, you can set up your Umbraco project and start building dynamic, content-rich websites.

If you found this guide helpful, consider sharing it with others looking to get started with Umbraco. Happy coding!

Step-by-Step Guide to Reading CSV Files in ASP.NET Core

Shekhar Tarare — Fri, 05 Jul 2024 12:33:08 +0000

Introduction

Reading and displaying data from a CSV file is a common requirement in web applications applications. In this guide, we’ll walk through the steps to build an ASP.NET Core NET Core 8 application that reads a CSV file uploaded by a user and displays the data in a styled HTML table. We’ll also cover error handling to manage any issues that may arise during the file processing.

Step 1: Create a New ASP.NET Core Web Application

Start by creating a new ASP.NET Core Web Application:

dotnet new webapp -n CsvReaderApp

Step 2: Install CsvHelper Package

Install the CsvHelper package which will help us read the CSV file:

dotnet add package CsvHelper

Step 3: Add the User Model

Create a new folder called Models and add a User.cs file. The headers of the CSV file and the fields here should match as we will be getting the data into this model.

namespace CsvReaderApp.Models
{
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

Step 4: Add the CsvService Class

Create a new folder called Services and add a CsvService.cs file. This class will be responsible for parsing the CSV file and converting it to a list of User objects.

using CsvHelper;
using CsvHelper.TypeConversion;
using CsvReaderApp.Models;
using System.Globalization;
namespace CsvReaderApp.Services
{
    public class CsvService
    {
        public IEnumerable<User> ReadCsvFile(Stream fileStream)
        {
            try
            {
                using (var reader = new StreamReader(fileStream))
                using (var csv = new CsvReader(reader, CultureInfo.InvariantCulture))
                {
                    var records = csv.GetRecords<User>();
                    return records.ToList();
                }
            }
            catch (HeaderValidationException ex)
            {
                // Specific exception for header issues
                throw new ApplicationException("CSV file header is invalid.", ex);
            }
            catch (TypeConverterException ex)
            {
                // Specific exception for type conversion issues
                throw new ApplicationException("CSV file contains invalid data format.", ex);
            }
            catch (Exception ex)
            {
                // General exception for other issues
                throw new ApplicationException("Error reading CSV file", ex);
            }
        }
    }
}

Step 5: Create the CsvImporterController

Create a new folder called Controllers and add a CsvImporterController.cs file:

using CsvReaderApp.Models;
using CsvReaderApp.Services;
using Microsoft.AspNetCore.Mvc;
namespace CsvReaderApp.Controllers
{
    [Route("[controller]")]
    public class CsvImporterController : Controller
    {
        private readonly CsvService _csvService;
        public CsvImporterController(CsvService csvService)
        {
            _csvService = csvService;
        }
        [HttpGet("")]
        [HttpGet("Index")]
        public IActionResult Index()
        {
            return View(new List<User>());
        }
        [HttpPost("")]
        [HttpPost("Index")]
        public IActionResult Index(IFormFile csvFile)
        {
            if (csvFile != null && csvFile.Length > 0)
            {
                using (var stream = csvFile.OpenReadStream())
                {
                    try
                    {
                        var users = _csvService.ReadCsvFile(stream).ToList();
                        return View(users); // Return users list to the view
                    }
                    catch (ApplicationException ex)
                    {
                        ModelState.AddModelError(string.Empty, ex.Message);
                    }
                    catch (Exception ex)
                    {
                        ModelState.AddModelError(string.Empty, $"An unexpected error occurred: {ex.Message}");
                    }
                }
            }
            else
            {
                ModelState.AddModelError(string.Empty, "Please select a valid CSV file.");
            }
            return View(new List<User>());
        }
    }
}

Step 6: Create the View

Right click on the Index action method on controller and click on Add View and give it a name as Index.cshtml:

@model IEnumerable<CsvReaderApp.Models.User>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV File Upload</title>
    <link rel="stylesheet" href="~/css/site.css">
</head>
<body>
    <div class="container">
        <h1>Upload CSV File</h1>
        <form asp-controller="Home" asp-action="Upload" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <input type="file" name="csvFile" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        @if (Model != null && Model.Any())
        {
            <h2>User List</h2>
            <table class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var user in Model)
                    {
                        <tr>
                            <td>@user.Id</td>
                            <td>@user.Name</td>
                            <td>@user.Email</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
</body>
</html>

Step 7: Configure Services and Routing

I am using .NET 8. Here, we don’t have the Startup.cs file. Instead, we have to configure services and routing in the Program.cs file. Open the Program.cs file and update it as follows:

using CsvReaderApp.Services;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<CsvService>(); // Register CsvService
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapControllerRoute(
        name: "default",
        pattern: "{controller=CsvImporter}/{action=Index}/{id?}");
app.UseAuthorization();
app.MapRazorPages();
app.Run();

Step 8: Add CSS for Styling

Create a wwwroot/css/site.css file to style the form and table:

html {
    font-size: 14px;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    margin-bottom: 60px;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
    text-align: center;
}
form {
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 15px;
}
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.btn-primary {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
    .btn-primary:hover {
        background-color: #0056b3;
    }
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
    .table th, .table td {
        padding: 12px;
        border: 1px solid #ccc;
    }
    .table th {
        background-color: #f2f2f2;
    }

Final Output:

As we have added a routing, you will get the output here in this URL: https://localhost:7039/csvimporter. This is how it looks after selecting the file and clicking on upload:

Complete Code on GitHub

For the complete code with a csv file for testing, you can visit the GitHub repository. Feel free to clone or download the project and experiment with it further.

Conclusion

By following these steps, you can create an ASP.NET Core NET Core 8 application that allows users to upload CSV files and displays the data in a styled HTML table. This setup includes proper error handling to manage any issues that may arise during file processing. Happy coding!

Resolving the "Length of LOB Data (78862) to be Replicated Exceeds Configured Maximum 65536" Error

Shekhar Tarare — Fri, 07 Jun 2024 22:19:22 +0000

Understanding the Error

The error indicates that the LOB data size (78862 bytes) exceeds the configured maximum limit (65536 bytes) set for replication in SQL Server. This typically happens during the replication process, leading to the failure of data transfer.

Common Causes

Default Configuration Limits: SQL Server has default settings for the maximum size of LOB data that can be replicated.
Large Data Inserts: Inserting large multimedia files or extensive text data can exceed the default LOB size limit.
Inadequate Configuration Settings: The database settings might not be optimized for handling large LOB data, resulting in replication issues.

Solutions to Resolve the Error

Adjusting the 'max text repl size' Configuration Option

SQL Server provides a simple yet effective way to handle large LOB data during replication by adjusting the max text repl size configuration option. Here's how you can do it:

EXEC sp_configure 'max text repl size', <desired_value>;
RECONFIGURE;

Replace with the desired maximum size. You can also set it to -1 for the maximum supported size (2 GB).

After making the configuration changes, restart the SQL Server service to apply the modifications.

Adjusting max text repl size Through SQL Server Management Studio
Additionally, you can adjust another setting in SQL Server to accommodate larger LOB data during replication. This setting is called max text repl size. Here's how you can change it through SQL Server Management Studio (SSMS):

Open SQL Server Management Studio (SSMS):
Launch SSMS and connect to your SQL Server instance.
Right-click the server and select Properties:
In the Object Explorer, right-click on the server name and
select Properties from the context menu.
Go to the Advanced page:
In the Server Properties window, select the Advanced tab.
Change the max text replication size:
In the Miscellaneous section, find the Max Text Replication
Size option and change it to the desired value. You can set
it to -1 for the maximum supported size (2 GB).
Apply and restart:
Click OK to apply the changes and then restart the SQL Server
service for the changes to take effect.

Why Adjusting max text repl size Works

By adjusting both the max text repl size and max text repl size configuration options, you're ensuring that SQL Server can handle larger LOB data sizes during replication. This prevents the error from occurring and enables seamless replication processes for your database.

Conclusion

Don't let the "Length of LOB data to be replicated exceeds configured maximum" error halt your database replication efforts. With simple adjustments to the max text repl size configuration option in SQL Server, both through SQL scripts and SQL Server Management Studio, you can overcome this hurdle and ensure seamless replication processes.

Troubleshooting “The File Does Not Have an App Associated with It” Error in Visual Studio

Shekhar Tarare — Wed, 22 May 2024 15:39:10 +0000

Introduction:

Visual Studio is a powerful integrated development environment (IDE) used by developers worldwide to build applications, including ASP.NET MVC web projects. However, you may encounter an error message stating, “The file does not have an app associated with it for performing the action. Please install an app or if one is already installed, create an association in the default apps settings page.” This issue prevents the project from launching in a web browser, disrupting your workflow. This blog post will delve into the possible causes of this error and provide comprehensive solutions to resolve it.

Understanding the Error:

The error message indicates that Visual Studio is unable to find or use a suitable application (web browser) to open the web project. This problem can stem from several underlying issues, including misconfigured default browser settings, project properties, or issues with the Visual Studio installation itself.

Possible Solutions

1. Repair Visual Studio
Sometimes, repairing Visual Studio can resolve underlying configuration issues:

Open Visual Studio Installer: From the Start Menu, open the Visual Studio Installer.
Select More Options: Find your version of Visual Studio and click on More (three dots).
Choose Repair: Select Repair and follow the prompts.

2. Verify Default Browser Settings in Windows
The first step is to ensure that you have a default browser set in Windows. Here’s how you can do it:

Open Settings: Press Windows + I to open the Settings window.
Go to Apps: Navigate to Apps > Default apps.
Set Default Browser: Under the Web browser section, select your preferred browser from the list.

3. Configure the Default Browser in Visual Studio
Next, ensure that Visual Studio is configured to use the correct browser:

Open Options: In Visual Studio, go to Tools > Options.
Navigate to Web Browser: Under Environment, select Web Browser.
Set Default Browser: Ensure your preferred browser is selected as the default.

4. Check Project Debug Settings
Your project settings may need adjustment to properly start the web browser:

Open Project Properties: Right-click on your project in Solution Explorer and select Properties.
Go to Web Tab: Navigate to the Web tab.
Verify Start Action: Ensure that Start Action is set to Current Page or Specific Page with a valid URL.

5. Reinstall the Browser
Reinstalling your browser can fix file association issues:

Uninstall Browser: Uninstall your current browser through Settings > Apps > Apps & features.
Reinstall Browser: Download and reinstall the latest version of your preferred browser.

6. Check File Associations
Ensure that .htm and .html files are associated with your web browser:

Open Settings: Press Windows + I to open the Settings window.
Go to Apps: Navigate to Apps > Default apps.
Choose Default Apps by File Type: Scroll down and select Choose default apps by file type.
Set Associations: Ensure that .htm and .html are associated with your preferred browser.

7. Clear Visual Studio Cache
Clearing the Visual Studio cache can sometimes resolve issues:

Close Visual Studio: Ensure Visual Studio is closed.
Delete Cache: Delete the contents of %LOCALAPPDATA%\Microsoft\VisualStudio<version>\ComponentModelCache.
Restart Visual Studio: Open Visual Studio again and try running your project.

8. Launch Project Manually
As a temporary workaround, you can manually launch your browser:

Run Without Debugging: Press Ctrl + F5 to run your project in Visual Studio.
Open Browser: Manually open your preferred browser.
Navigate to URL: Enter the project URL (usually http://localhost:) in the browser’s address bar.

9. Check IIS Express Configuration
If you’re using IIS Express, verify its configuration:

Open Options in Visual Studio: Go to Tools > Options.
Navigate to Web Projects: Under Projects and Solutions, select Web Projects.
Enable 64-bit IIS Express: Ensure Use the 64 bit version of IIS Express for web sites and projects is checked if applicable.

Conclusion:

Encountering the “The file does not have an app associated with it” error in Visual Studio can be frustrating, but by systematically addressing the potential causes, you can resolve the issue and get back to your development work. Whether it’s adjusting your default browser settings, configuring project properties, or repairing your Visual Studio installation, these solutions cover the most common reasons for this error. If you continue to experience problems, consider reaching out to the Visual Studio community or support for further assistance.

In my case, the issue was resolved by repairing Visual Studio.