Is There Some Way to Intercept and Modify The HTML Output Stream in Asp.Net, to Combine The JavaScript

  • Home
  • Languages
  • Csharp
  • Is There Some Way to Intercept and Modify The HTML Output Stream in Asp.Net, to Combine The JavaScript

Is there some way to intercept and modify the html output stream in asp.net, to combine the javascript?

You can set Response.Filter.

Is there some way to intercept and modify the html output stream in asp.net, to combine the javascript?

You can set Response.Filter.

Concatenate and minify JavaScript on the fly OR at build time - ASP.NET MVC

In the appendix of Professional ASP.NET 3.5 Scott Hanselman talks about Packer for .NET. This will integrate with MSBuild and pack javascript files for production deployments etc.

Can an ASP.NET MVC controller return an Image?

Use the base controllers File method.

public ActionResult Image(string id)
{
    var dir = Server.MapPath("/Images");
    var path = Path.Combine(dir, id + ".jpg"); //validate the path for security or use other means to generate the path.
    return base.File(path, "image/jpeg");
}

As a note, this seems to be fairly efficient. I did a test where I requested the image through the controller (http://localhost/MyController/Image/MyImage) and through the direct URL (http://localhost/Images/MyImage.jpg) and the results were:

  • MVC: 7.6 milliseconds per photo
  • Direct: 6.7 milliseconds per photo

Note: this is the average time of a request. The average was calculated by making thousands of requests on the local machine, so the totals should not include network latency or bandwidth issues.

Uploading both data and files in one form using Ajax?

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Short Version

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

Download File Using JavaScript/jQuery

Use an invisible <iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

To force the browser to download a file it would otherwise be capable of rendering (such as HTML or text files), you need the server to set the file's MIME Type to a nonsensical value, such as application/x-please-download-me or alternatively application/octet-stream, which is used for arbitrary binary data.

If you only want to open it in a new tab, the only way to do this is for the user to a click on a link with its target attribute set to _blank.

In jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Whenever that link is clicked, it will download the file in a new tab/window.

Download file from webservice - in ASP.NET site

First, rather than send a base64 byte array, have your web service simply return a byte array for your file. Response.OutputStream.Write() will automatically base64 encode your bytes, so you might as well have them un-encoded in your memory stream.

Second, you'll need more than just the bytes. You'll need meta-data associated with the file. For the snippet below, I've placed all of that metadata into a separate class (local instance named "file"). Then, just use this snippet, once you have the data you need:

Response.Clear();
Response.ClearHeaders();
Response.ContentType = file.ContentType;
Response.AddHeader("Content-Disposition", "attachment; filename=\"" + file.FileName + "\"");
Response.AddHeader("Content-Length", file.FileSize.ToString());
Response.OutputStream.Write(file.Bytes, 0, file.Bytes.Length);
Response.Flush();
Response.End();

Razor pages identity profile image

Thanks for all the help it helped me massively to resolve the issue. At the end of registering the image in the scaffolded razor pages Identity I had to use the code behind file register.cshtl.cs and add it to the Input module there and be consumed by the register.cshtml which now works perfectly.

I hope this helps someone else.

First I extended the ApplicationUser and added the migration.

public class ApplicationUser : IdentityUser
{
    [Required]
    public string Name { get; set; }

  
    public string? StreetAddress { get; set; }

    public string? City { get; set; }

 
    public string? PostalCode { get; set; }

    [ValidateNever]
    public string? ImageUrl { get; set; }  
    
    public int? CompanyId { get; set; }

    [ForeignKey("CompanyId")]
    [ValidateNever]
    public Company Company { get; set; }
}

Then added to the Input model in the Register.cshtml.cs

public class InputModel
    {
        /// <summary>
        ///     This API supports the ASP.NET Core Identity default UI infrastructure and is not intended to be used
        ///     directly from your code. This API may change or be removed in future releases.
        /// </summary>
        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

        /// <summary>
        ///     This API supports the ASP.NET Core Identity default UI infrastructure and is not intended to be used
        ///     directly from your code. This API may change or be removed in future releases.
        /// </summary>
        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        /// <summary>
        ///     This API supports the ASP.NET Core Identity default UI infrastructure and is not intended to be used
        ///     directly from your code. This API may change or be removed in future releases.
        /// </summary>
        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }

        //Added custom fields
        [Required]
        public string Name { get; set; }

        public string? StreetAddress { get; set; }

        public string? City { get; set; }

        public string? PostalCode { get; set; }
        public string? PhoneNumber { get; set; }

        [ValidateNever]
        public string? ImageUrl { get; set; }

        public string? Role { get; set; }

        public int? CompanyId { get; set; }

        [ValidateNever]
        public IEnumerable<SelectListItem> RoleList { get; set; }

        [ValidateNever]
        public IEnumerable<SelectListItem> CompanyList { get; set; }
    }`

Then in the on Post method add the file path to the database.

public async Task<IActionResult> OnPostAsync(IFormFile file, string returnUrl = null)
    {
        returnUrl ??= Url.Content("~/");
        ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
        if (ModelState.IsValid)
        {
            var user = CreateUser();

            string wwwRootPath = _hostEnvironment.WebRootPath;
            if (file != null)
            {
                string fileName = Guid.NewGuid().ToString();
                var uploads = Path.Combine(wwwRootPath, @"images\companies");
                var extension = Path.GetExtension(file.FileName);

                if (Input.ImageUrl != null)
                {
                    var oldImagePath = Path.Combine(wwwRootPath, Input.ImageUrl.TrimStart('\\'));
                }

                using (var fileStreams = new FileStream(Path.Combine(uploads, fileName + extension), FileMode.Create))
                {
                    file.CopyTo(fileStreams);
                }
                Input.ImageUrl = @"\images\companies\" + fileName + extension;
            }
            else
            {
                Input.ImageUrl = @"\images\companies\QPQ-logo.jpg";
            }
            await _userStore.SetUserNameAsync(user, Input.Email, CancellationToken.None);
            await _emailStore.SetEmailAsync(user, Input.Email, CancellationToken.None);

            user.Name = Input.Name;
            user.StreetAddress = Input.StreetAddress;
            user.City = Input.City;
            user.PostalCode = Input.PostalCode;
            user.PhoneNumber = Input.PhoneNumber;
            user.ImageUrl = Input.ImageUrl;

            var result = await _userManager.CreateAsync(user, Input.Password);

            if (result.Succeeded)
            {
                _logger.LogInformation("User created a new account with password.");

                if (Input.Role == null)
                {
                    await _userManager.AddToRoleAsync(user, SD.Role_User_Indi);
                }
                else
                {
                    await _userManager.AddToRoleAsync(user, Input.Role);
                }
                var userId = await _userManager.GetUserIdAsync(user);
                var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
                code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
                var callbackUrl = Url.Page(
                    "/Account/ConfirmEmail",
                    pageHandler: null,
                    values: new { area = "Identity", userId = userId, code = code, returnUrl = returnUrl },
                    protocol: Request.Scheme);

                await _emailSender.SendEmailAsync(Input.Email, "Confirm your email",
                    $"Please confirm your account by <a href='{HtmlEncoder.Default.Encode(callbackUrl)}'>clicking here</a>.");

                if (_userManager.Options.SignIn.RequireConfirmedAccount)
                {
                    return RedirectToPage("RegisterConfirmation", new { email = Input.Email, returnUrl = returnUrl });
                }
                else
                {
                    await _signInManager.SignInAsync(user, isPersistent: false);
                    return LocalRedirect(returnUrl);
                }
            }
            foreach (var error in result.Errors)
            {
                ModelState.AddModelError(string.Empty, error.Description);
            }
        }

        // If we got this far, something failed, redisplay form
        return Page();
    }`

One of the first mistakes I made was not declaring the front-end form as a multipart form in the Register.cshtml.

<h1>@ViewData["Title"]</h1><div class="row pt-4">
<div class="col-md-8">
    <form id="registerForm" class="row" asp-route-returnUrl="@Model.ReturnUrl" method="post" enctype="multipart/form-data">
        <h2>Create a new account.</h2>
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-floating py-2 col-12">
            <input asp-for="Input.Email" class="form-control" aria-required="true" />
            <label asp-for="Input.Email"></label>
            <span asp-validation-for="Input.Email" class="text-danger"></span>
        </div>

        <div class="form-floating py-2 col-6">
            <input asp-for="Input.Name" class="form-control" aria-required="true" />
            <label asp-for="Input.Name"></label>
            <span asp-validation-for="Input.Name" class="text-danger"></span>
        </div>
       
        <div class="form-floating py-2 col-6">
            <input asp-for="Input.StreetAddress" class="form-control" />
            <label asp-for="Input.StreetAddress"></label>
            <span asp-validation-for="Input.StreetAddress" class="text-danger"></span>
        </div>
        <div class="form-floating py-2 col-6">
            <input asp-for="Input.City" class="form-control" />
            <label asp-for="Input.City"></label>
            <span asp-validation-for="Input.City" class="text-danger"></span>
        </div>
        <div class="form-floating py-2 col-6">
            <input asp-for="Input.PostalCode" class="form-control" />
            <label asp-for="Input.PostalCode"></label>
            <span asp-validation-for="Input.PostalCode" class="text-danger"></span>
        </div>
        <div class="form-floating py-2 col-6">
            <input asp-for="Input.Password" class="form-control" aria-required="true" />
            <label asp-for="Input.Password"></label>
            <span asp-validation-for="Input.Password" class="text-danger"></span>
        </div>
        <div class="form-floating py-2 col-6">
            <input asp-for="Input.ConfirmPassword" class="form-control" aria-required="true" />
            <label asp-for="Input.ConfirmPassword"></label>
            <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
        </div>
        <div class="form-floating py-2 col-6">
            <select asp-for="Input.Role" asp-items="@Model.Input.RoleList" class=form-select>
                <option disabled selected>-Select Role-</option>
            </select>

        </div>
        <div class="form-floating py-2 col-6">
            <select asp-for="Input.CompanyId" asp-items="@Model.Input.CompanyList" class=form-select>
                <option disabled selected>-Select Company-</option>
            </select>

        </div>
        <div class="form-floating py-2 col-12">
            <label asp-for="Input.ImageUrl"></label>
            <input asp-for="Input.ImageUrl" type="file" id="uploadBox" name="file" class="form-control" />
        </div>
        <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
    </form>
</div>
<div class="col-md-4">
    <section>
        <h3>Use another service to register.</h3>
        <hr />
        @{
            if ((Model.ExternalLogins?.Count ?? 0) == 0)
            {
                    <div>
                        <p>
                            There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
                            about setting up this ASP.NET application to support logging in via external services</a>.
                        </p>
                    </div>
            }
            else
            {
                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                        <div>
                            <p>
                                @foreach (var provider in Model.ExternalLogins)
                            {
                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                            }
                            </p>
                        </div>
                    </form>
            }
        }
    </section>
</div>

Uploading and Downloading large files in ASP.NET Core 3.1?

If you have files that large, never use byte[] or MemoryStream in your code. Only operate on streams if you download/upload files.

You have a couple of options:

  • If you control both client and server, consider using something like tus. There are both client- and server-implementations for .NET. This would probably the easiest and most robust option.
  • If you upload large files with the HttpClient, simply use the StreamContent class to send them. Again, don't use a MemoryStream as source, but something else like a FileStream.
  • If you download large files with the HttpClient, it is important to specify the HttpCompletionOptions, for example var response = await httpClient.SendAsync(httpRequest, HttpCompletionOption.ResponseHeadersRead). Otherwise, the HttpClient would buffer the entire response in memory. You can then process the response file as a stream via var stream = response.Content.ReadAsStreamAsync().

ASP.NET Core specific advice:

  • If you want to receive files via HTTP POST, you need to increase the request size limit: [RequestSizeLimit(10L * 1024L * 1024L * 1024L)] and [RequestFormLimits(MultipartBodyLengthLimit = 10L * 1024L * 1024L * 1024L)]. In addition, you need to disable the form value binding, otherwise the whole request will be buffered into memory:
   [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
   public class DisableFormValueModelBindingAttribute : Attribute, IResourceFilter
   {
       public void OnResourceExecuting(ResourceExecutingContext context)
       {
           var factories = context.ValueProviderFactories;
           factories.RemoveType<FormValueProviderFactory>();
           factories.RemoveType<FormFileValueProviderFactory>();
           factories.RemoveType<JQueryFormValueProviderFactory>();
       }

       public void OnResourceExecuted(ResourceExecutedContext context)
       {
       }
   }
  • To return a file from a controller, simple return it via the File method, which accepts a stream: return File(stream, mimeType, fileName);

A sample controller would look like this (see https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1 for the missing helper classes):

private const MaxFileSize = 10L * 1024L * 1024L * 1024L; // 10GB, adjust to your need

[DisableFormValueModelBinding]
[RequestSizeLimit(MaxFileSize)]
[RequestFormLimits(MultipartBodyLengthLimit = MaxFileSize)]
public async Task ReceiveFile()
{
    if (!MultipartRequestHelper.IsMultipartContentType(Request.ContentType))
        throw new BadRequestException("Not a multipart request");

    var boundary = MultipartRequestHelper.GetBoundary(MediaTypeHeaderValue.Parse(Request.ContentType));
    var reader = new MultipartReader(boundary, Request.Body);

    // note: this is for a single file, you could also process multiple files
    var section = await reader.ReadNextSectionAsync();

    if (section == null)
        throw new BadRequestException("No sections in multipart defined");

    if (!ContentDispositionHeaderValue.TryParse(section.ContentDisposition, out var contentDisposition))
        throw new BadRequestException("No content disposition in multipart defined");

    var fileName = contentDisposition.FileNameStar.ToString();
    if (string.IsNullOrEmpty(fileName))
    {
        fileName = contentDisposition.FileName.ToString();
    }

    if (string.IsNullOrEmpty(fileName))
        throw new BadRequestException("No filename defined.");

    using var fileStream = section.Body;
    await SendFileSomewhere(fileStream);
}

// This should probably not be inside the controller class
private async Task SendFileSomewhere(Stream stream)
{
    using var request = new HttpRequestMessage()
    {
        Method = HttpMethod.Post,
        RequestUri = new Uri("YOUR_DESTINATION_URI"),
        Content = new StreamContent(stream),
    };
    using var response = await _httpClient.SendAsync(request);
    // TODO check response status etc.
}

In this example, we stream the entire file to another service. In some cases, it would be better to save the file temporarily to the disk.


Related Topics

Why Does "Dtoa.C" Contain So Much Code

MySQL "Network-Related or Instance-Specific Error Occurred While Establishing a Connection to SQL Server"

C++, C# and JavaScript on Winrt

Render PDF in Itextsharp from HTML with CSS

Multiple Producers, Single Consumer

Is C# Really Slower Than Say C++

Detect Browser Close on Asp.Net

Asp.Net: Literal Vs Label

Find Element in Selenium Using Xpath or CSS Selector

What Is the Fastest Way to Compute Sin and Cos Together

Use Debug.Log from C++

How to Programmatically Apply a CSS Class to an ASP.NET Control

How to Fix Ill-Formed HTML with HTML Agility Pack

How Get List of Local Network Computers

Return Contents of a Std::Wstring from C++ into C#

Serializing Strings Containing Apostrophes with JSON.Net

How to Clone Objects

Windows Phone 8: Media File Access


Leave a reply



Submit