如果表格无效,请保持同一页面

时间:2017-02-24 14:52:52

标签: asp.net-mvc validation

public ActionResult Add(Models.ContactModel contact)
    {
        if (ModelState.IsValid)
        {
            DAL.Contact mappedContact = Mapper.Map<Models.ContactModel, DAL.Contact>(contact);
            repository.AddContact(mappedContact);
            return RedirectToAction("Index");
        }
        else
            /* What to return here */                                 
    }

这是用于向数据库添加联系人的控制器。我正在使用数据注释验证表单,如果表单有效,我将其重定向到索引页面。如果它无效,它应该保持显示错误消息的同一页面。在其他部分写什么可以任何人建议我。添加控制器没有视图。

<div>
            <label>Name</label>
            @Html.ValidationMessageFor(model => model.Name, null, new { @class = "error-message"})
            @Html.TextBoxFor(model => model.Name, new { @class = "long-box" })
        </div>
        <div>
            <label>Email</label>
            @Html.ValidationMessageFor(model => model.Email, null, new { @class = "error-message" })
            @Html.TextBoxFor(model => model.Email, new { @class = "long-box" })
        </div>
        <div class="mob-land-container">
            <label>Mobile</label>
            @Html.ValidationMessageFor(model => model.MobileNumber, null, new { @class = "error-message" }) <br>
            @Html.TextBoxFor(model => model.MobileNumber, new { @class = "short-box" })
        </div>
        <div class="mob-land-container" id="landline-container">
            <label>Landline</label>
            @Html.ValidationMessageFor(model => model.LandlineNumber, null, new { @class = "error-message" })<br>
            @Html.TextBoxFor(model => model.LandlineNumber, new { @class = "short-box" })
        </div>
        <div>
            <label>Website</label>
            @Html.ValidationMessageFor(model => model.Website, null, new { @class = "error-message" })
            @Html.TextBoxFor(model => model.Website, new { @class = "long-box" })
        </div>
        <div>
            <label>Address</label>
            @Html.ValidationMessageFor(model => model.Address, null, new { @class = "error-message" })
            @Html.TextAreaFor(model => model.Address, new { @class = "address-box" })
        </div>
    </div>
    <div class="button-container">
        <input type="button" id="cancel" value="Cancel" onclick="location.href='@Url.Action("Index", "Contact")'" />
        <input type="submit" id="add" value="Add" onclick="location.href='@Url.Action("Add", "Contact")'" />
    </div>

这是我向控制器获取数据的表单。

 public class ContactModel
{
    public int Id { get; set; }
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }
    [Required(ErrorMessage = "Email is required")]
    public string Email { get; set; }
    [Required(ErrorMessage = "Mobile Number is required")]
    public string MobileNumber { get; set; }
    [Required(ErrorMessage = "Landline Number is required")]
    public string LandlineNumber { get; set; }
    [Required(ErrorMessage = "Website is required")]
    public string Website { get; set; }
    [Required(ErrorMessage = "Address is required")]
    public string Address { get; set; }
}

这是模型类。

提前致谢。

1 个答案:

答案 0 :(得分:1)

我喜欢在这样的情况下翻转登录。如果模型无效,则将其返回到视图。 POST上的模型绑定器将负责验证,一旦您将模型发送回视图,您将在屏幕上看到各个验证。

如果您有任何下拉菜单,则需要在发送模型之前重新填充它们。

public ContactController : Controller
{
    [HttpGet]
    public ActionResult Add()
    {
        return View(new Models.ContactModel());
    }

    [HttpPost]
    public ActionResult Add(Models.ContactModel contact)
    {
        if (!ModelState.IsValid)
        {
             return View(contact);
        }

        DAL.Contact mappedContact = Mapper.Map<Models.ContactModel, DAL.Contact>(contact);
        repository.AddContact(mappedContact);
        return RedirectToAction("Index");                           
    }
}

GET操作返回空表单。 POST操作将模型发布到服务器。

您的视图模型应该命名为Add.cshtml,mvc可以自动选择它。

并更改视图按钮

  <div class="button-container">
        @Html.ActionLink("Cancel", "Index", "Contact")
        <input type="submit" value="Save" />
  </div>

将“取消”链接设置为看起来像按钮 您的提交将自动提交到添加POST方法。

模型状态检查将模型返回到包含验证信息的视图,以便您可以更正表单。