使用多个选项卡验证MVC表单

时间:2017-05-03 21:50:12

标签: asp.net-mvc razor

我有这个表格,我需要验证几个标签。这是我遇到的问题。我想引导用户回到"标签页"未输入必填字段的位置。例如,如果用户未选择任何财务部分选择,则“财务标签”页面将显示错误消息。

这是查看页面

     @using CalFresh.Models
     @model CalFresh.Models.calfreshByWorkUnitID

     @using (Html.BeginForm())
     {
         <form id="msform" class="form-inline" method="post">
         <div id="TabsSetMain">
             <table>
                 <tr>
                     <td>Some reviewer info</td>
                 </tr>
             </table>
         </div>
         @*--------------------- Sub Tabs (Household/Financial/Medical)-----
         <div id="TabsSet1">
            <ul id="progressbar">
               <li><a href="#tabs-household">Household</a></li>
               <li><a href="#tabs-financial">Financial</a></li>
               <li><a href="#tabs-medical">Medical</a></li>
            </ul>
         </div>
         @*-------------------- Household Tab -----------------
         <div id="tabs-household">
            <table>
               <tr>
                  <td>Was the SSN Verified?</td>
                  @{
                     List<SelectListItem> listItems = new List<SelectListItem>();
                     listItems.Add(new SelectListItem
                       {
                          Text = " -- Select One -- ",
                          Value="",
                          Selected = true
                       });
                     listItems.Add(new SelectListItem
                       {
                          Text = "Yes",
                          Value="Yes"
                       });
                      listItems.Add(new SelectListItem
                       {
                          Text = "No",
                          Value="No"
                       });

                   }
                  <td>
                     @Html.DropDownListFor(model=>model.tempHouseHoldSSNVerification, listItems, new {@class="form-control", value=Model.tempHouseHoldSSNVerification})
                     @Html.ValidationMessageFor(model=>model.tempHouseHoldSSNVerification, null, new {style="color:red"})
                  </td>
               </tr>
            </table>
         </div>
         @*-------------------- Financial Tab -----------------
         <div id=tabs-financial">
             <table>
               <tr>
                   <td>
                       Was an error found for earned income calculation?
                   </td>
                   <td>
                     @Html.DropDownListFor(model=>model.tempFinancialEarnIncome, listItems, new {@class="form-control", value=Model.tempHouseHoldSSNVerification})
                     @Html.ValidationMessageFor(model=>model.tempFinancialEarnIncome, null, new {style="color:red"})
                   </td>
               </tr>

             </table>
         </div>
       </form>
     }

     <script>
        $(function () {
        $("#TabsSetMain").tabs();
        });
     </script>

     <script>
      $(function () {
      $("#TabsSet1").tabs();
      });
     </script>

这是课程页面

  using System;
  using System.ComponentModel.DataAnnotations;

  namespace CalFresh.Models
  {
      public class calfreshByWorkUnitID
      {
         [Required(ErrorMessage = "Please select Household SSN verification.")]
         public string tempHouseHoldSSNVerification { get; set; }

         [Required(ErrorMessage = "Please select Financial Income Calculations.")]
         public string tempFinancialEarnIncome { get; set; }
      }
  }

这是控制器代码

  using System;
  using System.Configuration;
  using System.Linq;
  using System.Web.Mvc;
  using System.Net;
  using System.Data;
  using CalFresh.Models;

  namespace CalFresh.Controllers
  {
      public string pubTempHouseHoldSSNVerification;
      public string pubtempFinancialEarnIncome;

      [HttpPost]
      public ActionResult Add(calfreshByWorkUnitID customerinfo)

      pubTempHouseHoldSSNVerification = customerinfo.tempHouseHoldSSNVerification;

      pubtempFinancialEarnIncome = customerinfo.tempFinancialEarnIncome;

      if (ModelState.IsValid)
      {
               @*  Process my insert script here.
      }
  }

1 个答案:

答案 0 :(得分:1)

视图中的模型状态可通过ViewData.ModelState获得。我不知道您正在使用哪个选项卡库,但在某个地方您需要检查模型状态中哪些字段无效,找出它们所在的选项卡,并将焦点设置在该选项卡上。

您应该可以使用

之类的内容来获取包含错误的字段
ViewData.ModelState.Where(fld => fld.Value.Errors.Count > 0)

或检查各个字段,

ViewData.ModelState.IsValidField("FIELD_NAME")

如果您无法使用css或某种标记服务器端设置具有焦点的选项卡,则您需要将包含错误的字段转储到javascript变量中并从那里开始。

<script>
    var errors = '@string.Join(",", ViewData.ModelState.Where(x => x.Value.Errors.Count > 0).Select(fld => fld.Key))';
    ....
</script>