fullstack-classic

Classic Fullstack Integration Patterns

Form Handling

Server-Side Form Processing

// Controller
public class ContactController : Controller
{
    private readonly IContactService _contactService;
    private readonly ILogger<ContactController> _logger;

    public ContactController(
        IContactService contactService,
        ILogger<ContactController> logger)
    {
        _contactService = contactService;
        _logger = logger;
    }

    [HttpGet]
    public IActionResult Index()
    {
        return View(new ContactFormModel());
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Index(ContactFormModel model, CancellationToken ct)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        try
        {
            await _contactService.ProcessContactAsync(model, ct);
            TempData["SuccessMessage"] = "Thank you for your message!";
            return RedirectToAction(nameof(Index));
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Failed to process contact form");
            ModelState.AddModelError("", "An error occurred. Please try again.");
            return View(model);
        }
    }
}

Razor Form

@model ContactFormModel

@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success">
        @TempData["SuccessMessage"]
    </div>
}

<form asp-action="Index" method="post">
    @Html.AntiForgeryToken()
    
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    
    <div class="form-group">
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" type="email" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    
    <div class="form-group">
        <label asp-for="Message"></label>
        <textarea asp-for="Message" class="form-control" rows="5"></textarea>
        <span asp-validation-for="Message" class="text-danger"></span>
    </div>
    
    <button type="submit" class="btn btn-primary">Send Message</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

jQuery AJAX Integration

AJAX Form Submission

// JavaScript
$(document).ready(function() {
    $('#contact-form').on('submit', function(e) {
        e.preventDefault();
        
        var $form = $(this);
        var $submitBtn = $form.find('button[type="submit"]');
        var $result = $('#form-result');
        
        // Disable button and show loading state
        $submitBtn.prop('disabled', true).text('Sending...');
        $result.empty();
        
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: $form.serialize(),
            success: function(response) {
                if (response.success) {
                    $result.html('<div class="alert alert-success">' + response.message + '</div>');
                    $form[0].reset();
                } else {
                    showValidationErrors(response.errors);
                }
            },
            error: function(xhr, status, error) {
                $result.html('<div class="alert alert-danger">An error occurred. Please try again.</div>');
                console.error('Form submission failed:', error);
            },
            complete: function() {
                $submitBtn.prop('disabled', false).text('Send Message');
            }
        });
    });
    
    function showValidationErrors(errors) {
        // Clear previous errors
        $('.field-validation-error').text('');
        $('.input-validation-error').removeClass('input-validation-error');
        
        // Show new errors
        $.each(errors, function(field, messages) {
            var $field = $('[name="' + field + '"]');
            $field.addClass('input-validation-error');
            $field.siblings('.field-validation-error').text(messages.join(', '));
        });
    }
});

AJAX Controller Action

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SubmitAjax(ContactFormModel model, CancellationToken ct)
{
    if (!ModelState.IsValid)
    {
        var errors = ModelState
            .Where(x => x.Value.Errors.Count > 0)
            .ToDictionary(
                kvp => kvp.Key,
                kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()
            );
            
        return Json(new { success = false, errors });
    }

    try
    {
        await _contactService.ProcessContactAsync(model, ct);
        return Json(new { success = true, message = "Thank you for your message!" });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Failed to process contact form");
        return Json(new { 
            success = false, 
            errors = new { General = new[] { "An error occurred. Please try again." } }
        });
    }
}

Anti-Forgery Token Handling

Include Token in AJAX Requests

// Setup for all AJAX requests
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'DELETE') {
            var token = $('input[name="__RequestVerificationToken"]').val();
            if (token) {
                xhr.setRequestHeader('RequestVerificationToken', token);
            }
        }
    }
});

// Or include in data for form-encoded requests
$.ajax({
    url: '/api/items',
    type: 'POST',
    data: {
        __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
        name: 'New Item'
    }
});

Token in Layout

@* Add to _Layout.cshtml for global availability *@
<form id="__AjaxAntiForgeryForm" action="#" method="post">
    @Html.AntiForgeryToken()
</form>

// Get token from hidden form
function getAntiForgeryToken() {
    return $('#__AjaxAntiForgeryForm input[name="__RequestVerificationToken"]').val();
}

Loading Content Dynamically

Partial View Loading

// Controller
[HttpGet]
public async Task<IActionResult> LoadProducts(
    int page = 1, 
    string category = null,
    CancellationToken ct = default)
{
    var products = await _productService.GetPagedAsync(page, 12, category, ct);
    return PartialView("_ProductGrid", products);
}

[HttpGet]
public async Task<IActionResult> ProductDetails(Guid id, CancellationToken ct)
{
    var product = await _productService.GetByIdAsync(id, ct);
    if (product == null)
    {
        return NotFound();
    }
    return PartialView("_ProductDetails", product);
}

// Load more products
$('#load-more').on('click', function() {
    var $btn = $(this);
    var page = parseInt($btn.data('page')) + 1;
    var category = $btn.data('category');
    
    $btn.prop('disabled', true).text('Loading...');
    
    $.get('/Products/LoadProducts', { page: page, category: category })
        .done(function(html) {
            $('#product-grid').append(html);
            $btn.data('page', page);
        })
        .fail(function() {
            alert('Failed to load products');
        })
        .always(function() {
            $btn.prop('disabled', false).text('Load More');
        });
});

// Load product details in modal
$(document).on('click', '[data-product-details]', function(e) {
    e.preventDefault();
    var productId = $(this).data('product-details');
    
    $.get('/Products/ProductDetails/' + productId)
        .done(function(html) {
            $('#modal-content').html(html);
            $('#product-modal').modal('show');
        })
        .fail(function() {
            alert('Failed to load product details');
        });
});

Search with Debounce

JavaScript

var MYAPP = MYAPP || {};

MYAPP.search = (function($) {
    var debounceTimer;
    var $input;
    var $results;
    var minChars = 3;
    var debounceDelay = 300;
    
    function init() {
        $input = $('#search-input');
        $results = $('#search-results');
        
        $input.on('keyup', function() {
            var query = $(this).val().trim();
            
            clearTimeout(debounceTimer);
            
            if (query.length < minChars) {
                $results.empty().hide();
                return;
            }
            
            debounceTimer = setTimeout(function() {
                performSearch(query);
            }, debounceDelay);
        });
        
        // Close results when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.search-container').length) {
                $results.hide();
            }
        });
    }
    
    function performSearch(query) {
        $results.html('<div class="search-loading">Searching...</div>').show();
        
        $.get('/Search/Results', { q: query })
            .done(function(html) {
                $results.html(html).show();
            })
            .fail(function() {
                $results.html('<div class="search-error">Search failed</div>');
            });
    }
    
    return { init: init };
})(jQuery);

$(document).ready(function() {
    MYAPP.search.init();
});

Controller

[HttpGet]
public async Task<IActionResult> Results(string q, CancellationToken ct)
{
    if (string.IsNullOrWhiteSpace(q) || q.Length < 3)
    {
        return PartialView("_NoResults");
    }

    var results = await _searchService.SearchAsync(q, maxResults: 10, ct);
    return PartialView("_SearchResults", results);
}

Pagination

Controller

[HttpGet]
public async Task<IActionResult> Index(int page = 1, CancellationToken ct = default)
{
    const int pageSize = 12;
    var result = await _productService.GetPagedAsync(page, pageSize, ct);
    
    ViewBag.CurrentPage = page;
    ViewBag.TotalPages = result.TotalPages;
    ViewBag.HasPrevious = page > 1;
    ViewBag.HasNext = page < result.TotalPages;
    
    return View(result.Items);
}

Razor Partial

@* _Pagination.cshtml *@
@{
    var currentPage = (int)ViewBag.CurrentPage;
    var totalPages = (int)ViewBag.TotalPages;
    var hasPrevious = (bool)ViewBag.HasPrevious;
    var hasNext = (bool)ViewBag.HasNext;
}

@if (totalPages > 1)
{
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item @(!hasPrevious ? "disabled" : "")">
                <a class="page-link" 
                   asp-action="Index" 
                   asp-route-page="@(currentPage - 1)"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            
            @for (int i = 1; i <= totalPages; i++)
            {
                <li class="page-item @(i == currentPage ? "active" : "")">
                    <a class="page-link" asp-action="Index" asp-route-page="@i">@i</a>
                </li>
            }
            
            <li class="page-item @(!hasNext ? "disabled" : "")">
                <a class="page-link" 
                   asp-action="Index" 
                   asp-route-page="@(currentPage + 1)"
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
}

AJAX Pagination

$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    
    var url = $(this).attr('href');
    
    $.get(url)
        .done(function(html) {
            $('#content-container').html(html);
            // Update browser URL without reload
            history.pushState(null, '', url);
        })
        .fail(function() {
            alert('Failed to load page');
        });
});

// Handle browser back/forward
$(window).on('popstate', function() {
    $.get(location.href)
        .done(function(html) {
            $('#content-container').html(html);
        });
});

File Upload

Razor Form

<form asp-action="Upload" method="post" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    
    <div class="form-group">
        <label for="file">Select file</label>
        <input type="file" name="file" id="file" class="form-control-file" accept=".jpg,.png,.pdf" />
        <small class="form-text text-muted">Max size: 5MB. Allowed: JPG, PNG, PDF</small>
    </div>
    
    <button type="submit" class="btn btn-primary">Upload</button>
</form>

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(IFormFile file, CancellationToken ct)
{
    if (file == null || file.Length == 0)
    {
        ModelState.AddModelError("file", "Please select a file");
        return View();
    }

    if (file.Length > 5 * 1024 * 1024) // 5MB
    {
        ModelState.AddModelError("file", "File size cannot exceed 5MB");
        return View();
    }

    var allowedExtensions = new[] { ".jpg", ".png", ".pdf" };
    var extension = Path.GetExtension(file.FileName).ToLowerInvariant();
    if (!allowedExtensions.Contains(extension))
    {
        ModelState.AddModelError("file", "Invalid file type");
        return View();
    }

    var fileName = $"{Guid.NewGuid()}{extension}";
    var filePath = Path.Combine(_uploadPath, fileName);

    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await file.CopyToAsync(stream, ct);
    }

    TempData["SuccessMessage"] = "File uploaded successfully";
    return RedirectToAction(nameof(Index));
}

AJAX File Upload

$('#upload-form').on('submit', function(e) {
    e.preventDefault();
    
    var formData = new FormData(this);
    var $progress = $('#upload-progress');
    var $progressBar = $progress.find('.progress-bar');
    
    $progress.show();
    
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    var percent = Math.round((e.loaded / e.total) * 100);
                    $progressBar.css('width', percent + '%').text(percent + '%');
                }
            });
            return xhr;
        },
        success: function(response) {
            if (response.success) {
                showSuccess('File uploaded successfully');
                $('#file-input').val('');
            } else {
                showError(response.message);
            }
        },
        error: function() {
            showError('Upload failed');
        },
        complete: function() {
            setTimeout(function() {
                $progress.hide();
                $progressBar.css('width', '0%').text('');
            }, 1000);
        }
    });
});

Error Handling

Global AJAX Error Handler

$(document).ajaxError(function(event, xhr, settings, error) {
    if (xhr.status === 401) {
        // Redirect to login
        window.location.href = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname);
        return;
    }
    
    if (xhr.status === 403) {
        showError('You do not have permission to perform this action');
        return;
    }
    
    if (xhr.status === 404) {
        showError('The requested resource was not found');
        return;
    }
    
    if (xhr.status >= 500) {
        showError('A server error occurred. Please try again later.');
        return;
    }
    
    console.error('AJAX error:', settings.url, error);
});

Display Errors from Server

// Controller returning JSON errors
[HttpPost]
public IActionResult Process(ProcessRequest request)
{
    try
    {
        // Process...
        return Json(new { success = true });
    }
    catch (ValidationException ex)
    {
        return BadRequest(new { 
            success = false, 
            errors = ex.Errors 
        });
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "Processing failed");
        return StatusCode(500, new { 
            success = false, 
            message = "An unexpected error occurred" 
        });
    }
}

$.ajax({
    url: '/api/process',
    type: 'POST',
    data: formData,
    success: function(response) {
        if (response.success) {
            showSuccess('Operation completed');
        }
    },
    error: function(xhr) {
        if (xhr.responseJSON) {
            if (xhr.responseJSON.errors) {
                displayFieldErrors(xhr.responseJSON.errors);
            } else if (xhr.responseJSON.message) {
                showError(xhr.responseJSON.message);
            }
        } else {
            showError('An error occurred');
        }
    }
});

Session and State Management

Server-Side Session

// Store in session
HttpContext.Session.SetString("UserPreference", "dark");
HttpContext.Session.SetInt32("CartCount", 5);

// Complex objects
HttpContext.Session.SetString("Cart", JsonSerializer.Serialize(cart));

// Retrieve from session
var preference = HttpContext.Session.GetString("UserPreference");
var cartCount = HttpContext.Session.GetInt32("CartCount");
var cart = JsonSerializer.Deserialize<Cart>(HttpContext.Session.GetString("Cart"));

Client-Side with Cookies

// Set cookie
function setCookie(name, value, days) {
    var expires = '';
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = '; expires=' + date.toUTCString();
    }
    document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
}

// Get cookie
function getCookie(name) {
    var nameEQ = name + '=';
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        if (cookie.indexOf(nameEQ) === 0) {
            return decodeURIComponent(cookie.substring(nameEQ.length));
        }
    }
    return null;
}

// Delete cookie
function deleteCookie(name) {
    setCookie(name, '', -1);
}

Notification/Toast Messages

JavaScript Toast System

var MYAPP = MYAPP || {};

MYAPP.toast = (function($) {
    var $container;
    
    function init() {
        $container = $('<div id="toast-container"></div>').appendTo('body');
    }
    
    function show(message, type, duration) {
        type = type || 'info';
        duration = duration || 5000;
        
        var $toast = $('<div class="toast toast-' + type + '">' + 
            '<span class="toast-message">' + message + '</span>' +
            '<button class="toast-close">&times;</button>' +
            '</div>');
        
        $container.append($toast);
        
        setTimeout(function() {
            $toast.addClass('show');
        }, 10);
        
        var timer = setTimeout(function() {
            remove($toast);
        }, duration);
        
        $toast.find('.toast-close').on('click', function() {
            clearTimeout(timer);
            remove($toast);
        });
    }
    
    function remove($toast) {
        $toast.removeClass('show');
        setTimeout(function() {
            $toast.remove();
        }, 300);
    }
    
    function success(message) { show(message, 'success'); }
    function error(message) { show(message, 'error'); }
    function warning(message) { show(message, 'warning'); }
    function info(message) { show(message, 'info'); }
    
    return {
        init: init,
        show: show,
        success: success,
        error: error,
        warning: warning,
        info: info
    };
})(jQuery);

$(document).ready(function() {
    MYAPP.toast.init();
});

CSS for Toasts

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    min-width: 300px;
    padding: 15px 40px 15px 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    
    &.show {
        opacity: 1;
        transform: translateX(0);
    }
    
    &-success { background: #28a745; color: white; }
    &-error { background: #dc3545; color: white; }
    &-warning { background: #ffc107; color: #333; }
    &-info { background: #17a2b8; color: white; }
    
    &-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        color: inherit;
        font-size: 20px;
        cursor: pointer;
        opacity: 0.7;
        
        &:hover { opacity: 1; }
    }
}