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">»</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">×</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; }
}

}