A legjobb megközelítés kiterjesztésének diszkrét javascript in MVC3 hozzá egy stílust div kliens oldali

szavazat
29

Én a HTML5 / Razor / MVC3 kihasználva a Bootstrap sablont Twitter. Azt akarom, hogy formában érvényesítési úgy néz ki, sima, mintha már dokumentált ( http://twitter.github.com/bootstrap/#forms ). Tehát, ha megnézzük, hogy a szabványos sablonkód MVC3 fiók regisztráció, a jelölés a következő lenne:

@using (Html.BeginForm(Register, Account, FormMethod.Post, new { @class=form-stacked })) {
    @Html.ValidationSummary(true, Snap! Something went wrong)
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class=clearfix error>
                @Html.LabelFor(m => m.UserName)
                <div class=input>
                    @Html.TextBoxFor(m => m.UserName)
                    <span class=help-inline>@Html.ValidationMessageFor(m => m.UserName)</span>
                </div>
            </div>

            <div class=clearfix>
                @Html.LabelFor(m => m.Email)
                <div class=input>
                    @Html.TextBoxFor(m => m.Email)
                    <span class=help-inline>@Html.ValidationMessageFor(m => m.Email)</span>
                </div>
            </div>

            <div class=clearfix>
                @Html.LabelFor(m => m.Password)
                <div class=input>
                    @Html.PasswordFor(m => m.Password)
                    <span class=help-inline>@Html.ValidationMessageFor(m => m.Password)</span>
                </div>
            </div>

            <div class=clearfix>
                @Html.LabelFor(m => m.ConfirmPassword)
                <div class=input>
                    @Html.PasswordFor(m => m.ConfirmPassword)
                    <span class=help-inline>@Html.ValidationMessageFor(m => m.ConfirmPassword)</span>
                </div>
            </div>
        </fieldset>
        <div class=actions>
            <button class=btn large primary type=submit>Register</button>
        </div>
    </div>

Amit akarok, hogy van a konténer div adja a „hiba” osztály, mint amit kódolva az első bemenet. (Tehát amikor belép az oldalra, a div egy osztály a „clearfix”, de ha ez a bemeneti blokk ellenőrzése nem sikerült, akkor címkézze a „clearfix hiba”). Gondolom fogok kell frissíteni a div blokk tartalmazza az id valamiféle és talán egy új adat- attribútumot ValidationMessage. Nem problémája meghosszabbításáról ValidationMessageFor segítő. Csak nem vagyok 100% biztos benne, mi a megközelítést kell meghosszabbítására a könyvtár, ami ott van. Bármilyen javaslatot, hogyan lehet megközelíteni ezt?

TIA.

UPDATE :

Gondolok ez a megközelítés indokolt:

<div id=UserNameContainer class=clearfix error>
    @Html.LabelFor(m => m.UserName)
    <div class=input>
        @Html.TextBoxFor(m => m.UserName)
        <span class=help-inline>@Html.ValidationMessageFor(m => m.UserName, null, new { @data_container = UserNameContainer })</span>
    </div>
</div>

A díszítő én érvényesítés üzenetet egy adat-tároló nevét, tudtam majd célba a tartály div. Most már csak meg kell kitalálni, hogyan, hogy elfogják az érvényesítési üzenetet.

A kérdést 27/08/2011 16:27
a forrás felhasználó
Más nyelveken...                            


7 válasz

szavazat
1

Ahelyett, újra felfedezték az adott kerék, ellenőrizze a validationEngine bővítmény elérhető http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ .

Testreszabhatja a felugró elemeket, amit akar, és ez triviális csatlakozni jQuery.validate.js.

Válaszolt 28/08/2011 05:14
a forrás felhasználó

szavazat
4

Jött Átfedés ugyanazt a kérdést. Én kezelésével kapcsolatos hozzáadásával és extesion a HtmlHelper osztály.

Ez az, amit tettem a ValidationSummary:

   public static class TwitterBootstrapHelperExtensions
    {
        public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper,
                               bool excludePropertyErrors,
                               string message)
        {
            if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty);

            string errorsList = "<ul>";
            foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0))
            {
                errorsList += string.Format("<li>{0}</li>", error.Errors.First().ErrorMessage);
            }
            errorsList += "</ul>";
            return new MvcHtmlString(string.Format("<div class=\"alert-message error\"><span>{0}</span>{1}</div>",message,errorsList));

        }
    }

És a .cshtml fájlt, amit cserélni Html.ValidationSummary ezzel:

@Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

Ne feledje, hogy adjunk a namespance a kiterjesztés osztály a véleményét mappa web.config fájlt.

Én is hozzászólok itt később, ha a kezelése az egyes input elem előtt. HTH

Válaszolt 01/09/2011 19:26
a forrás felhasználó

szavazat
52

A $.validator.setDefaultsmódszer megoldotta ezt a kérdést nekem a Bootstrap a Twitter. Én használ jquery.validate.jsés jquery.validate.unobtrusive.js.

Mivel diszkrét érvényesítés DOM kész beolvassa a dokumentumot, és cache diszkrét érvényesítési lehetőségek minden formában találkozik, szükség van rá, hogy hívja a $.validator.setDefaultsmódot, mielőtt a dokumentum szkennelési bekövetkezik.

// setup defaults for $.validator outside domReady handler
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".clearfix").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest(".clearfix").removeClass("error");
    }
});

$(document).ready(function() {
       // do other stuff
});
Válaszolt 10/10/2011 17:59
a forrás felhasználó

szavazat
0

Mit tettem készítették a css osztályokat az érvényesítési hibákat, és létrehozott egy új css fájlt az azonos osztályban, de bootstrap értékeket.

Megtalálható egy nuget csomagot: http://nuget.org/List/Packages/MahApps.Twitter.Bootstrap

Ez is ad némi állványzatot sablonokat autocreate új nézeteket.

Válaszolt 17/11/2011 06:29
a forrás felhasználó

szavazat
1

Azt prefere változtatni a CSS bootstrap. Csak ki az osztályok jQuery érvényesítse a megfelelő helyen. field-érvényesítési hiba és input-érvényesítési hiba

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
Válaszolt 04/01/2012 13:38
a forrás felhasználó

szavazat
1

Akkor integrálni MVC3 érvényesítés Bootstrap keretet úgy, hogy a következő javascriptet az oldal (View)

<script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest("div.control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest("div.control-group").removeClass("error");
    }
});
var current_div;
$(".editor-label, .editor-field").each(function () {
    var $this = $(this);
    if ($this.hasClass("editor-label")) {
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    }
    current_div.append(this);
});
$(".editor-label").each(function () {
    $(this).contents().unwrap();
});
$(".editor-field").each(function () {
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
});
$("label").each(function () {
    $(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
    $(this).addClass("help-inline");
});
$("form").each(function () {
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () {
        if ($(this).find("span.field-validation-error").length > 0) {
            $(this).addClass("error");
        }
    });
});
});
</script>

Különben is, a Views (például „Create.cshtml”) arról, hogy a mezők formájában vannak formázva, mint a következő ...

    <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>

Ezzel a megoldással, akkor valószínűleg elég csak adj egy javascript nélkül szerkesztheti a nézet.

Válaszolt 14/12/2012 15:47
a forrás felhasználó

szavazat
0

Kellett, hogy megoldja ezt a Bootstrap 3.1 és Razor. Ez az, amit használnak:

$.validator.setDefaults({
    highlight: function (element) {
        $(element).parents(".form-group").addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).parents(".form-group").removeClass("has-error");
    }
});

$(function () {

    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-block');
    });

    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.form-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                }
            });
        }
        else {
            $(this).find('div.form-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).addClass('has-error');
                }
            });
        }
    });

    $('form').each(function () {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('has-error');
            }
        });
    });
});

Ez a kombináció a @ német válasza, és segít ebből bejegyzést a „theBraindonor”. Frissítve használják az új Bootstrap 3 osztály.

Válaszolt 07/11/2013 18:00
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more