CODEWITHSUNDEEP
c#asp.net-mvc.net-coreasp.net-core-mvc
cezar5122
cezar5122

Reputation: 49

.Core mvc published app partial views doesnt work in ASPNETCORE_ENVIRONMENT "production" but working fine with "development"

When Im publish my .core mvc app no matter if I lunch it by .exe or in IIS my custom partial views doesnt render. This is how it should look (when Im debbugin it localy or publish to .exe and change environment to development): ![Working partial view And this is how it looks after publishing on production environment: Not working I've noticed that after triger event that make this partial view appear in working example url doesnt change(this is what I want) and looks like this https://localhost:5002/CharacterAndItems/Index but in secound one it changes https://localhost:5002/CharacterAndItems/GetCharacter I have no idea what causes this this problem. Here is my controller code: 

[HttpPost]
public async Task<IActionResult> GetCharacter([FromForm] CharacterFindViewModel characterFindModel)
{
   var character = await _characterSerivce.GetCharacterByNameAsync(characterFindModel.CharacterName);
   var item = await _itemSerivce.GetItemNameReturnItem(characterFindModel.ItemName, character);

    model = new CharacterWithItemViewModel { character = character, item = item };
    return PartialView("_CharacterPartial", model);
}

Partial view code: 

@model App.ViewModels.CharacterWithItemViewModel

<div class="row form-group" style="margin-top:15px">
    <div class="col-md-6">
        <div class="text-right">
            <div>
                <div class="text-left align-top">
                    Name: @Model.character.CharName CharacterId: @Model.character.ObjId ItemId: @Model.item.ItemId 
                    <div id="Test">
                        Count: @Model.item.Count
                    </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 text-right">
        <form asp-controller="CharacterAndItems" asp-action="AddItems"
              data-ajax="true" data-ajax-method="post"
              data-ajax-mode="replace" data-ajax-update="#Test">
            <input type="hidden" name="characterId" value="@Model.character.ObjId" />
            <input type="hidden" name="itemId" value="@Model.item.ItemId" />
            <input class="form" placeholder="Item quantity" name="count" style="text-align:center" />
            <input type="submit" value="Add items" name="add" class="btn btn-primary" />
            <input type="submit" value="Delete items" name="delete" class="btn btn-danger" />
        </form>
    </div>
</div>

@section Scripts {
    <script>
        $.ajax({
            url: '/CharacterAndItems/AddItems',
            type = 'POST',
            data: JSON.stringify(@Model)
        })
        var results = $("#Results");
    </script>
}

Upvotes: 1

Views: 174

Answers (2)

Travis Acton
Travis Acton

Reputation: 4440

The fact that it even shows up means your partial view IS in fact being served. From the screenshots you've shown, it looks like you are missing your css files.

Open you prod site in chrome developer tools and inspect if the CSS files you are expecting are there, further check that they are accessible.

In Core, go to your layout page and in the header, you will see something like below. It is telling it where and what to load based upon its operating environment. Dev vs Prod. Make sure those are valid. Alos make sure that your org is not blocking a CDN if you are using one as some have rules around their network.

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>

Upvotes: 1

Chris Pratt
Chris Pratt

Reputation: 239400

Based on your screenshots, it doesn't look like styling is being applied when in production, which would also suggest you're facing a similar problem with necessary JavaScript files. However, we don't have your layout to see what the problem might be.

My best guess is that you have something like:

<environment include="Development>
    <script src="~/js/script.js"></script>
</environment>
<environment exclude="Development>
    <script src="~/js/script.min.js"></script>
</environment>

I'm just using an example of a JS file here, but the same probably applies to your CSS as well, i.e. the production reference includes a .min.js/.min.css extension, instead of just .js/.css.

By default, there's nothing that will take your JS/CSS files and minify them into .min.js/.min.css versions, so those files likely just don't even exist in production. Since all your JS/CSS file references are 404s, the style and functionality you expect don't exist either.

To have these files created, you either need to include a bundleconfig.json, or set up build tasks with something like Gulp or Grunt.

Also, FWIW, you cannot include sections in a partial, so that @section block isn't doing anything.

Upvotes: 1

Related Questions