Issue with ASP.NET MVC 5 and bootstrap 5 theme

preno 60 Reputation points
2023-05-18T14:39:03.0133333+00:00

I dont' know why code generated by VS2022 for MVC 5 project has css class name different from that used in bootstrap theme.

For validation errore, for example, asp.net generate ".field-validation-error" class but this is not present in bootstrap file. While it has ".invalid-feedback" class.

What am I missing?

This is what I've done:

  • downloaded a bootstrap 5 .css theme file (superhero.css)
  • added it to the Content folder
  • changed the BundleConfig.cs with this code
 bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/superhero.css",
                      "~/Content/site.css"));
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,278 questions
Accepted answer
  1. Bruce (SqlWork.com) 56,846 Reputation points
    2023-05-19T16:10:43.9966667+00:00

    the unobtrusive library does not use any bootstrap classes. you define CSS in the site.css for what you want them to be styled like.

    if you add the styles I defined above to your site.css you will get styled validation. you can change to what you want. there are just 3 classes for field level validation (there are two more for the validation summary):

    classes for the error text <span>:

    • field-validation-valid - error text hide
    • field-validation-error - error text display

    class for the input field:

    • input-validation-error - add some error decoration to input field

    as I stated above, if you want to use the bootstrap validation classes you need to modify the.

    jquery.validate.unobtrusive.js

    to use them.

    0 comments

3 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 56,846 Reputation points
    2023-05-18T18:30:57.4+00:00

    also the validation classes are not defined in bootstrap, but defined in site.css

    typical default:

    .field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

    note: bootstrap 5 added validation support. you would need to update jquery.validate.unobtrusive.js to use the bootstrap 5 approach.

    0 comments
  2. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    2023-05-19T06:24:39.8766667+00:00

    Hi @preno

    bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/superhero.css",
                      "~/Content/site.css"));

    Change to

    bundles.Add(new Bundle("~/Content/css").Include(
                      "~/Content/superhero.css",
              	       "~/Content/site.css"));

    Many users have reported that after upgrading to bootstrap 5, using StyleBundle results in abbreviations.

    Best Regards

    Qi You

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments
  3. preno 60 Reputation points
    2023-05-19T08:45:10.2166667+00:00

    Thank you all.

    I'm a bit confused.

    I hav created a new empty ASP.NET MVC 5 project with VS2022.

    I can see that Bootrstrap 5.2.3 is installed by defaultimage

    In the Content folder I have a lot of files automatically created:

    User's image

    The Site,cc file has only these lines

    User's image

    Finally I changed the bundleconfig.cs file as follow

    User's image

    Some questions:

    1. copy the superhero.css file is enough to apply the new theme? The site style looks like the downloaded theme.
    2. the html generated by the vs2022 asp.net has class names not present in site.css or superherp.css or other .css files inthe context folder. Why?

    This is an example of the create view page. As you can see there are "field-validation-error" or "input-validation-error" that I can't find anywhere. In the superhero.css on bootswatch there are "is-invalid" or "has-error" class names . 

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EmployeeCreate - My ASP.NET Application</title>
    <link href="/Content/superhero.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Application name</a>
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li><a class="nav-link" href="/">Home</a></li>
                    <li><a class="nav-link" href="/Home/About">About</a></li>
                    <li><a class="nav-link" href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        


<h2>EmployeeCreate</h2>


<form action="/Home/EmployeeCreate" method="post"><input name="__RequestVerificationToken" type="hidden" value="bD9XHFKF-i-e3W6FEr1HNj7o8xTb5cjGcqfyRLQY7q3FwbwAgwXU-jayg5Qy43MELU7KJoexpQGROz3BTk6K6m6S3o0O5P7wMw6OXJrpniI1" />    <div class="form-horizontal">
        <h4>Employee</h4>
        <hr />
        
        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="Name è campo obbligatorio" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="LastName">LastName</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="LastName è campo obbligatorio" id="LastName" name="LastName" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>
<div>
    <a href="/">Back to List</a>
</div>


        <hr />
        <footer>
            <p>&copy; 2023 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-3.4.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>

    
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>


</body>
</html>
    0 comments