Question

我正在尝试验证剃刀页面上的多个单选按钮组。单选按钮是通过编辑器模板动态生成的。当它们显示在页面上时，它们显示为带有字形的按钮。现在我有这种形式的19个不同的单选按钮组。当我单击“提交”时，如果未选择其中一个按钮，则在每个单选按钮组上显示3条验证消息，并在顶部的验证摘要中显示该消息。理想情况下，如果我在按钮组周围有一个红色边框，如果用户提交表单并且没有选择该组中的选项以及该组下面的一些文本表明他们需要选择一个选项，我希望如此。我如何通过jquery或razor代码或两者来实现这一目标？

编辑模板

@Html.ValidationSummary()
<div class="btn-group" data-toggle="buttons">
    @Html.HiddenFor(m => Model.Proposals[d].lVoteOptions)
    @for (int v = 0; v < Model.Proposals[d].lVoteOptions.Count; v++)
    {
        @Html.HiddenFor(m => Model.Proposals[d].lVoteOptions[v].Icon)
        @Html.HiddenFor(m => Model.Proposals[d].lVoteOptions[v].Title)
        @Html.HiddenFor(m => Model.Proposals[d].lVoteOptions[v].Option_ID)
        <label class="btn btn-default btn-radio-group">
            <span class="glyphicon @Html.DisplayFor(m => Model.Proposals[d].lVoteOptions[v].Icon)"></span>
            @Html.DisplayFor(m => Model.Proposals[d].lVoteOptions[v].Title)
            @Html.RadioButtonFor(m => Model.Proposals[d].SelectedVoteOption, true, Model.Proposals[d].lVoteOptions[v].Option_ID, new { id = Model.Proposals[d].lVoteOptions[v].Option_ID })                                                            
        </label>
        @Html.ValidationMessageFor(m => Model.Proposals[d].SelectedVoteOption)
    }
</div>

视图模型

[Required(ErrorMessage = "Proposal must be selected")]
public int SelectedVoteOption { get; set; }

如果表单无效，则jquery阻止表单提交上的模式弹出

$(function () {
    $("#btnBallotFormSubmit").click(function () {
        var ValidStatus = $("#ballotForm").valid();
        console.log(ValidStatus);
    if (ValidStatus == false) {
        return false;
    }
});

索引cshtml页面

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "ballotForm" }))
{
    @Html.AntiForgeryToken()
    @Html.EditorFor(m => m.BallotViewModel, new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "BallotViewModel" } })
    <table class="col-sm-12">
        <tr>
            <td>
                <button type="submit" id="btnBallotFormSubmit" class="btn btn-default btn-md btn-submit" data-target="#modal-container" data-toggle="modal">
                    <span class="glyphicon glyphicon-send" aria-hidden="true"></span> Submit
                </button>
            </td>
        </tr>
    </table>
}

BallotViewModel

public class BallotViewModel
    {
        public bool IsVoteConfirmationView { get; set; }
        public List<ProposalViewModel> Proposals { get; set; }
    }

ProposalViewModel

public class ProposalViewModel
{
    public string ProposalItemID { get; set; }
    public string ProposalItemTitle { get; set; }
    public string DirectorImageURL { get; set; }
    public string BookmarkLink { get; set; }
    public string ArtifactBookmarkLink { get; set; }
    public string ArtifactsLink { get { return AppSettings.MeetingArtifactLocation; } }
    public int Option0_ID { get; set; }
    public string Option0_Name { get; set; }
    public int Option1_ID { get; set; }
    public string Option1_Name { get; set; }
    public int Option2_ID { get; set; }
    public string Option2_Name { get; set; }
    public int Option3_ID { get; set; }
    public string Option3_Name { get; set; }

    public int MgmtRecommendation { get; set; }
    public bool IsHeader { get; set; }
    public int TagOrder { get; set; }
    [Required(ErrorMessage = "Proposal must be selected")]
    public int SelectedVoteOption { get; set; }

    public bool IsVoteConfirmationView { get; set; }

    public bool DirectorProposal { get; set; }


    public List<VoteOptionViewModel> lVoteOptions { get; set; }
}

多动态MVC 5单选按钮组验证

0 个答案: