CODEWITHSUNDEEP
cssasp.net-mvc
Wraith King
Wraith King

Reputation: 192

Can't add CSS Style in MVC forms

I'm developed the MVC Project, I want to style My project, but its not working correctly; I can't style my forms. From control, button and Input areas how can I do it my project? I want to some help

My code 

@model ContosoUniversity.Models.Student

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control " } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirstMidName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstMidName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstMidName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EnrollmentDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EnrollmentDate, "", new { @class = "text-danger" })
            </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>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Upvotes: 0

Views: 1813

Answers (2)

Mahbubur Rahman Manik
Mahbubur Rahman Manik

Reputation: 5161

you can add css in many ways. Best method is creating own css file and making it Bundles. Or you can place it in _Layout.cshtml head section:

 <style>
    .custom-class{
        border:1px solid red;
    }
</style>

Then using it is pretty simple:

<div class="form-group custom-class">
        @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control " } })
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
        </div>
    </div>

Hope this will help :)

Upvotes: 3

Paul DS
Paul DS

Reputation: 879

You have to do the following steps :

  • Create your CSS file with styles rules you want to apply (you will easily find many tutorials for CSS file creation).

  • Add the created CSS file in a StyleBundle. To do this, go to the "BundleConfig.cs" file, and add the following line (replace the bundle name and CSS file path by real values) :

    bundles.Add(new StyleBundle("~/NameOfTheBundle").Include("~/Content/YourCssFile.css"));

  • Add a reference to the created bundle into your cshtml file (between the < head > tags, on the top of the file) :

    @Styles.Render("~/NameOfTheBundle")

A bundle is a file generated from one or several CSS (or javascript) files, by the .NET framework. It allows grouping CSS rules in a single file, to avoid client recovering many CSS files on your server (saving client/server requests).

Let me know if my answer is not clear enough.

Upvotes: 2

Related Questions