2011-09-14 2 views
1

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

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

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

Я не уверен, как настроить это и проверить условия. Например, у меня есть checkboxlist, который по умолчанию ничего не проверял. Поэтому, если ничего не проверено, .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'
  • По крайней мере один флажка необходимо проверять.

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

UPDATE:

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"); 
}); 
+0

@CjCoax, что делает этот скрипт для проверки? –

+0

@ Darin Dimitrov, извинения Я имел в виду «~/Scripts/jquery.validate.unobtrusive.js» – CjCoax

ответ

0

Я не уверен, если это лучший способ сделать это, но сейчас я уже бросил расширение 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 
} 

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

1

для dropdownlist это просто е:

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-* атрибутов, которые используется для незаметной проверки.

+0

Что касается ninjatype, это на самом деле строка, но я устанавливаю значение первого параметра как «0». Что касается флажков, я еще не добавил данные - * материал, но как бы проверить его только на один галочек, если все они имеют атрибут 'data-required'? – jzm

+0

@rudeovski ze bear, я обновил свой ответ, чтобы NinjaType был строкой, и она по-прежнему работает для выпадающего списка. Что касается флажков, то для проверки этого условия вы можете написать собственный атрибут проверки. –

+0

У меня есть такой же код, что и у вас в вашем ответе. Единственное отличие: я использую IEnumerable вместо SelectList для NinjaTypeList. Таким образом, он работает на стороне сервера, просто на стороне клиента он ничего не делает/возвращает как действительный. – jzm

Смежные вопросы