Question

我正在尝试通过远程内容调用将一些现有的创建视图移动到Bootstrap模态中，但是，当我单击“提交”后，不会触发在字段（即“区域名称”）上设置的现有验证被注入模态内部。

我想知道我在做错什么，以及是否有更好的方法尝试将现有div从另一个页面拉入具有验证的Modal。

Index.cshtml

@Html.ActionLink("Create New Region", "Create", null, new { @class = "btn", onclick = "cselect(this)", title = "Create New Region", data_toggle = "modal", data_target = "#AdminModal", data_remote = "false" })

Layout.cshtml

    <!-- Modal HTML -->
    <div class="modal fade" id="AdminModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="ModalLabel"></h4>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
    <script>
        // Modal JS
        function cselect(obj) {
            ActionLinkTitle = $(obj).attr("title");
        }

        $("#AdminModal").on("show.bs.modal", function (e) {
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href") + ' #modal');
            $(this).find(".modal-title").html(ActionLinkTitle);

        });
    </script>

Create.cshtml-JavaScript将从div id =“ modal”中获取内容，并将其注入Modal中，而不用遍历整个页面内容。

@using System.Collections.Generic
@model Website.ViewModel.CountryViewModel
@{
    ViewBag.Title = "Create New Region";
}

<div style="padding: 20px 20px 20px 20px; font-size: 8pt;">
    Home > Regions >
    <strong>@ViewBag.Title</strong>
</div>

<div id="modal" style="padding: 0 20px 20px 20px;">

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

        <fieldset>
            <legend>Region Name</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <br />
                <div class="editor-label">
                    @Html.LabelFor(model => model.ServerId, "Server Alias")
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.ServerId, (IEnumerable<SelectListItem>)ViewBag.ServerId)
                    @Html.ValidationMessageFor(model => model.ServerId)
                </div>
                <br />
            <p />
            <p>
                <input type="submit" value="Create" class="btn" />
            </p>
        </fieldset>
    }
</div>

<div style="padding: 0 20px 20px 20px;">
    @Html.ActionLink("Back to Regions", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

CountryViewModel.cs-必填项是在“区域名称”上设置的。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Website.ViewModel
{
    public class CountryViewModel
    {
        public CountryViewModel()
        {
            CustomFieldDefinitions = new List<EntityCustomFieldDefinitionViewModel>();
        }

        public int Id { get; set; }

        [Required]
        [StringLength(256, MinimumLength = 1)]
        [Display(Name = "Region Name")]
        public string Name { get; set; }

        [Required]
        [Display(Name = "Server")]
        public int ServerId { get; set; }

        [DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy HH:mm:ss '(UTC)'}")]
        public DateTime? RetDate { get; set; }

        public string ServerAlias { get; set; }

        [Display(Name = "Customer Fields")]
        public IEnumerable<EntityCustomFieldDefinitionViewModel> CustomFieldDefinitions { get; set; }
    }
}

谢谢。

在Bootstrap Modal中不会触发验证

0 个答案: