Question

我正在尝试弹出一个表单，以便用户填写它，然后保存该记录。如果数据有误，我想告诉用户一个经典的验证问题。

我正在尝试这段代码但是当模型无效时它会显示错误，但实际上它只返回局部视图中的内容，它不是加载我的布局也不是我的模态形式，所有我得到的只是一个白页我的偏爱。

所以我做错了什么？

这是我的模态形式：

enter image description here

经过验证，我得到的是：

enter image description here

代码：型号：

public class Car
{
    public int Id { get; set; }

    [Required]
    [StringLength(50, MinimumLength = 6)]
    public string Model { get; set; }
    public string Brand { get; set; }
    public string Year { get; set; }
    public string Color { get; set; }
}

查看：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Car</h4>
        </div>
        <div class="modal-body">
            @Html.Partial("CreatePartialView",new Car())
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="savechanges">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我的部分：

@model ControliBootstrap.Models.Car

@using (Ajax.BeginForm("ModalAdd", "Cars",new AjaxOptions()
{
UpdateTargetId = "mymodalform"
}))
{
<div class="form-horizontal" id="mymodalform">
    @Html.ValidationSummary(true)

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

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

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

    <div class="form-group">
        @Html.LabelFor(model => model.Color, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Color)
            @Html.ValidationMessageFor(model => model.Color)
        </div>
    </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>
}

并且完全是我的控制器：

 public ActionResult ModalAdd(Car car)
    {
        if (ModelState.IsValid)
        {
            db.Cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return PartialView("CreatePartialView",car);
    }

Answer 1

不要忘记包含jQuery Unobtrusive AJAX - 这是使普通HTML表单具有一些AJAX功能的库。

验证模态表格

1 个答案: