模型未在 POST 之前验证

model not validating before POST

我有我的模型和我的观点。一切正常。唯一的问题是它没有按预期显示警告标志。我在模型中添加了数据注释。

如果必填字段为空,我会收到错误消息。我希望如果需要的东西乱七八糟,它不会提交并且会显示警告标志。

这是我的模型:

public partial class RecipeV
{
    [Display(Name = "Title")]
    [Required(ErrorMessage = "Title required")]
    public string Title { get; set; }

    [Required(ErrorMessage = "Description required")]
    [StringLength(5)]
    [Display(Name = "Description")]
    public string Description { get; set; }

    public IngredientV Ingredient { get; set; }

    public DirectionV Direction { get; set; }
}

这是我的观点:

@model RecipesBlog.Models.ViewModels.RecipeV

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Create Recipe</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Ingredient.Text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @for (int i = 0; i < 3; i++)
                {
                    <p> <input class="form-control" type="text" name="Ingredient[@i].Text"><br></p>
                }
                <div class="Ingredient"></div>

                <input class="add_Ingredient" type="text" value="&#43" />

                @Html.ValidationMessageFor(model => model.Ingredient.Text, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Direction.Text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @for (int i = 0; i < 3; i++)
                {
                    <p> <input class="form-control" type="text" name="Direction[@i].Text"><br></p>
                }
                <div class="Directions"></div>

                <input class="add_Direction" type="text" value="&#43" />

                @Html.ValidationMessageFor(model => model.Direction.Text, "", new { @class = "text-danger" })

            </div>

        </div>



    <div class="form-group">

    </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>

</div>
}

这是控制器:

[HttpPost]
public ActionResult Create(Recipe recipe, List<Ingredient> ingredient, List<Direction> direction)

我添加了一个try catch,所以现在如果有错误就不会提交。

        try
        {
            recipe.Date = DateTime.Now;
            // Add the new recipe to the recipes table.
            db.Recipes.InsertOnSubmit(recipe);
            db.SubmitChanges();
        }
        catch
        {
           return View();
        }

    int id = recipe.RecipeID;

    foreach (Ingredient i in ingredient)
    {
        if (i.Text != null)
        {
            i.RecipeID = id;
            db.Ingredients.InsertOnSubmit(i);
            db.SubmitChanges();
        }               
    }

    foreach (Direction d in direction)
    {
        if (d.Text != null)
        {
            d.RecipeID = id;
            db.Directions.InsertOnSubmit(d);
            db.SubmitChanges();
        }
    }

    //Direct the user to the index page. 
    return RedirectToAction("index", "Recipes", new { id = recipe.RecipeID });
}

您当前在 Create HttpPost 操作方法中的代码尝试保存数据并进行重定向,这是一个新的 GET 调用。如果您想在提交的表单中查看验证错误,您应该 return 相同的视图。 Modelstate 字典将有验证错误(如果有),当视图被渲染时,它们将被显示。

在继续保存数据之前检查 ModelState.IsValid 属性 以查看模型验证是否失败是一个很好的做法。

[HttpPost]
public ActionResult Create(Recipe recipe, List<Ingredient> ingredient,
                                                                  List<Direction> direction)
{
    if (!ModelState.IsValid)
       return View(vm);   // validation failed. Return the same view

    //continue executing your save & redirect code
}

此外,您应该收到模型 RecipeV 而不是域。

[HttpPost]
        public ActionResult Create(RecipeV model, List<Ingredient> ingredient, List<Direction> direction)
        {

            if (!ModelState.IsValid)
            {
                return View(model);
            }
           // do something
            //Direct the user to the index page. 
            return RedirectToAction("index", "Recipes", new { id = recipe.RecipeID });
        }

所以这就是我所做的:

我下载了js验证文件并添加到视图的末尾。由@Shyju推荐 谢谢大家的帮助。

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

这是它的样子:

@model RecipesBlog.Models.ViewModels.RecipeV
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Create Recipe</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Ingredient.Text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @for (int i = 0; i < 3; i++)
                {
                    <p> <input class="form-control" type="text" name="Ingredient[@i].Text"><br></p>
                }
                <div class="Ingredient"></div>

                <input class="add_Ingredient" type="text" value="&#43" />

                @Html.ValidationMessageFor(model => model.Ingredient.Text, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Direction.Text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @for (int i = 0; i < 3; i++)
                {
                    <p> <input class="form-control" type="text" name="Direction[@i].Text"><br></p>
                }
                <div class="Directions"></div>

                <input class="add_Direction" type="text" value="&#43" />

                @Html.ValidationMessageFor(model => model.Direction.Text, "", new { @class = "text-danger" })

            </div>

        </div>



    <div class="form-group">

    </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>

</div>
}

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>