MVC3: проверка клиента

Question

У меня есть мини-форма, которая состоит из всех блоков выбора и списков флажков.

У меня уже есть аннотации данных в модели представления.Поэтому, если я отправляю форму (без включенного javascript), ModelState.IsValid работает так, как должно.

Но при проверке клиента у меня возникают проблемы.У меня есть ненавязчивая проверка jquery, но когда я делаю $("#form").valid(), он всегда возвращает true.

Я не уверен, как настроить это и проверить условия.Например, у меня есть флажок, который по умолчанию ничего не проверял.Так что если ничего не проверено, .valid() должен вернуть false.Кроме того, 2 из выпадающих меню имеют опцию «пожалуйста, выберите» в качестве первого, но JQuery по-прежнему возвращает действительным.Серверная сторона ModelState.IsValid работает для обоих из них.

Ниже приведен пример:

@using (Html.BeginForm("index", "home", FormMethod.Post, new { @id = "miniForm" })) {
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()

<div>
    @Html.LabelFor(m => m.NinjaType)
    @Html.DropDownListFor(m => m.NinjaType, Model.NinjaTypeList) // First value is '0'. Rest of the list is of type STRING
</div>

/// following is the rendered html code as i created a helper for it which i've omitted in this example
<ul>
    <li><input type="checkbox" id="poo1" name="pie" value="one" />one</li>
    <li><input type="checkbox" id="poo2" name="pie" value="two" />two</li>
    <li><input type="checkbox" id="poo3" name="pie" value="three" />three</li>
</ul>

<input type="submit" id="submitButton" />
}

Если это помогает, это действие контроллера POST:

public ActionResult Index(SuperDooperNinjaViewModel m)
{
    if (this.ModelState.IsValid)
        return Redirect("win");
    else 
        return Redirect("fail");
}

Я думал, что сделаю это по старинке $('#submitButton').click();, но у меня есть ощущение, что может быть лучший способ сделать это.Еще один способ, о котором я подумал, это превратить его в форму Ajax.Таким образом, в ответе на стороне сервера вместо Redirect("fail"); я возвращаю JsonResult.

Итак, в общем, каков наилучший способ проверки этой формы?

• Значение NinjaType должно не быть '0'
• Должен быть установлен по крайней мере один флажок.

Заранее спасибо

ОБНОВЛЕНИЕ:

ViewModel:

public class SuperDooperViewModel
{
    [Required]
    public string NinjaType {get;set;}
    public IEnumerable<SelectItemList> { get;set; }

    [Required]
    public string[] pie {get;set;} // checkbox
    public IEnumerable<string> PieList { get;set; } // list of values for checkbox
}

В jquery я тестирую это так:

$("#submitButton").click(function(e) {
    e.preventDefault();
    if ($("#miniForm").valid())
         alert("valid");
    else
         alert("fail");
});

Answer 1

Для выпадающего списка это просто:

public class SuperDooperNinjaViewModel
{
    [Required]
    public string NinjaType { get; set; }

    public SelectList NinjaTypeList { get; set; }
}

и в представлении:

@Html.DropDownListFor(
    m => m.NinjaType, 
    Model.NinjaTypeList,
    "Please Select"
)

Теперь о флажках, о которых вы говорили, о каком-то помощнике HTML, который их генерирует, но я не вижу этого помощника, испускающего какие-либо атрибуты HTML5 data-*, которые используются для ненавязчивой проверки.

Answer 2

Я не уверен, что это лучший способ сделать это, но сейчас я выкинул расширение checkboxlist и просто вручную сделал это:

@foreach(var nt in Model.NinjaTypeList)
{
    <li>@Html.CheckBox("pie", new { @id = nt })</li>
}
@Html.HiddenFor(m => m.NinjaType)

В jquery я прикрепил событие к флажкам:

$('input[name=pie]').click(function(){
    var pie = "";
    $('input[name=pie]').each(function(i) {
       if ($(this).is(':checked'))
           pie += $(this).val() + ';';
    });
    $("#NinjaType").val(pie);
});

В моем контроллере:

public ActionResult Index(SuperDooperViewModel m, string[] pie)
{
    /// I've add the following as a work around:
    if (string.IsNullOrEmpty(m.NinjaType) // no reason it should be, but it's a sort of failsafe
    {
         if(pie.Any())
              m.NinjaType = string.Join(";", pie.Where(w => w != "false"));
    }

    // rest of the controller here
}

Это в основном то, что я хочу, но мне кажется, что это немного обойдется. Любые улучшения будут оценены.