ASP.NET Core 6 MVC how to get basePath/wwwroot path in Layout page

Question

I am trying to get the path to my root project directory in layout.cshtml, and pass it into Javascript as a global variable for use on ajax calls. This is what I thought would work, but I am getting an empty string as the value:

var basePath = Url.Content("~");

is returning empty string.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ButtaLove</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="~/lib/lightslider/css/lightslider.min.css">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ButtaLove.styles.css" asp-append-version="true" />
    <script type="text/javascript">
        var Global = Global || {};
        @{
            var basePath = Url.Content("~");
        }
        Global.basePath = '@basePath';
    </script>
</head>

This is all so that I can generate the correct URL in AJAX requests like so:

Admin.UpdateMainProductImage = function (imageId, isMain) {

    $.ajax({
        url: Global.basePath + 'Admin/Product/UpdateImageIsMain',
        type: "GET",
        dataType: 'html',//if returning view, must be html, else use json
        data: { imageId: imageId, isMain: isMain },
        cache: false,
        success: function (data) {
            alert('Main Product Image updated successfully.');
        },
        error: function (xhr, status, error) {
            alert('Error updating image settings');
        },
        complete: function (data) {
            //document.getElementById("quote_form").reset();
        }
    });
}

You can get path with var basePath = System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "wwwroot"),I use this is post https://stackoverflow.com/a/68184343/10193401 — abolfazl sadeghi, Jul 05 '23 at 18:57
I added to my question.... this is just so that I can get the correct path in ajax requests — JakeFromStateFarm, Jul 05 '23 at 21:47
this gets the path, but all slashes are being removed when I view the string in javascript, I get C:Usersjfordsource eposButtaLovewwwroot — JakeFromStateFarm, Jul 05 '23 at 21:55
please see this post https://stackoverflow.com/a/38592921/10193401 or https://stackoverflow.com/a/9988672/10193401 — abolfazl sadeghi, Jul 05 '23 at 21:55
I can't use Url.Action from inside my javascript file like so: $.ajax({ url: '@Url.Action("UpdateImageIsMain", "Product", new { Area = "Admin" })', — JakeFromStateFarm, Jul 05 '23 at 22:07
thank you that worked! data attribute like so, then ajax request I can use: — JakeFromStateFarm, Jul 05 '23 at 22:23
You cannot be Jake, you have no red sweater. FWIW you can drop the `type="text/javascript"` all browsers default to that now — Mark Schultheiss, Jul 05 '23 at 22:36

score 1 · Answer 1 · answered Jul 05 '23 at 22:31

So thanks to @abolfazl sadeghi, I used the following answer to fix my problem:

https://stackoverflow.com/a/13641191/10193401

In my Edit View:

                <input class="form-check-input" type="checkbox" asp-for="@image.IsMain" data-request-url="@Url.Action("UpdateImageIsMain", "Product", new { Area = "Admin" })">

My Javascript on Change Event:

//Update main product image checkbox
$('#edit_product_form').on('change', '#image_IsMain', function (e) {
    let imageId = $(this).closest('div.proudct_images').find('input#image_Id').val();
    let isMain = $(this).val();
    let updatePath = $(this).data('request-url');
    Admin.UpdateMainProductImage(updatePath, imageId, isMain);
});

My Ajax call to controller:

Admin.UpdateMainProductImage = function (updatePath, imageId, isMain) {

    $.ajax({
        url: updatePath,
        type: "GET",
        dataType: 'html',//if returning view, must be html, else use json
        data: { imageId: imageId, isMain: isMain },
        cache: false,
        success: function (data) {
            alert('Main Product Image updated successfully.');
        },
        error: function (xhr, status, error) {
            alert('Error updating image settings');
        },
        complete: function (data) {
            //document.getElementById("quote_form").reset();
        }
    });
}

I would consider putting the data attribute on the form perhaps and also `$(this).closest('div.proudct_images').find('input#image_Id').val();` can just be `$('#image_Id').val();` since an id must be unique and this uses the fastest selector — Mark Schultheiss, Jul 05 '23 at 22:42

ASP.NET Core 6 MVC how to get basePath/wwwroot path in Layout page

1 Answers1