Question

我有这些字段，并在其上实现了必需的属性。

        @using (Html.BeginForm("Edit", "ChannelsGrid", FormMethod.Post, new {name = "channelForm", @class = "channelForm", @enctype = "multipart/form-data"}))
{
    <div class="form-group">
        @Html.HiddenFor(model => Model.Id)
        <div class="row">

            <div class="col-md-6">

                @Html.Label("Part/Location", new {@class = "control-label"})
                @Html.TextBox("PartLocation", null, new { @class = "form-control", @required = "required" })

            </div>
            <div class="col-md-6">

                @Html.Label("Index", new {@class = "control-label"})
                @Html.TextBox("Index", null, new {@class = "form-control"})

            </div>

        </div>

        <div class="row">
            <div class="col-md-6">

                @Html.Label("Measurement", new {@class = "control-label"})
                @Html.DropDownListFor(model => model.Measurement, (SelectList)ViewBag.Measurements, "-- Select Measurement --", new { @class = "form-control", @required = "required" })


            </div>

            <div class="col-md-6">

                @Html.Label("Location", new {@class = "control-label"})
                @Html.DropDownList("Directions", ViewBag.DirectionTypes as List<SelectListItem>, "-- Select Direction --", new { @class = "form-control", @required = "required" })


            </div>
        </div>

        <div class="row">
            <div class="col-md-6">

                @Html.LabelFor(model => model.ChannelGroupId, new {@class = "control-label"})
                @Html.DropDownListFor(x => x.ChannelGroupId, Model.ChannelGroups, "Select Channel Group", new {@class = "form-control"})
                @Html.ValidationMessageFor(model => model.ChannelGroupId)

            </div>

            <div class="col-md-3">
                <label class="control-label"></label>
                <a href="#" id="addChannelGroup" class="form-control" style="border: none">
                    <i class="fa fa-plus-circle">Add Group</i>
                </a>
            </div>
            <div class="col-md-3">
                <label class="control-label"></label>
                <a href="#" id="addMeasurement" class="form-control" style="border: none">
                    <i class="fa fa-plus-circle">Add Measurement</i>
                </a>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-md-6">
                @Html.Label("Channel name: ", new {id = "channelName", @class = "control-label"})
            </div>
            <div class="col-md-6">
                @Html.TextBox("HiddenTextBox", null, new {@class = "hidden"})
                <div class="col-md-1">
                    @Html.TextBoxFor(a => a.Name, new {@class = "hidden"})
                </div>
            </div>
        </div>

    </div>
    <div class="row" id="pnlAddChannelGroupName" style="display: none">
        <div class="col-md-6">
            <label class="control-label">Channel Group Name :</label>
            <input type="text" id="ChannelGroupName" name="ChannelGroupName" class="form-control"/>
            <input type="button" value="Cancel" id="channelGroupButton" />
            @*<button id="channelGroupButton">Cancel</button>*@
        </div>

    </div>
    <div class="row" id="pnlMeasurement" style="display: none">
        <div class="col-md-6">
            @Html.Label("Measurement :", new {@class = "control-label"})
            @Html.TextBox("MeasurementName", null, new {@class = "form-control"})
            <input type="button" value="Cancel" id="measurementButton" />
            @*<button id="measurementButton">Cancel</button>*@
        </div>
    </div>
}

我还有两个按钮，用于切换此表单中的其他文本框。这是代码。

    <div class="row" id="pnlAddChannelGroupName" style="display: none">
        <div class="col-md-6">
            <label class="control-label">Channel Group Name :</label>
            <input type="text" id="ChannelGroupName" name="ChannelGroupName" class="form-control"/>
            <button id="channelGroupButton">Cancel</button>
        </div>

    </div>
    <div class="row" id="pnlMeasurement" style="display: none">
        <div class="col-md-6">
            @Html.Label("Measurement :", new {@class = "control-label"})
            @Html.TextBox("MeasurementName", null, new {@class = "form-control"})
            <button id="measurementButton">Cancel</button>
        </div>
    </div>

问题是每当我在该字段中单击这两个取消按钮时，似乎会调用三个字段并且文本框下拉列表周围有棕色边框。我想这些字段已经提交。但我以为我使用按钮元素而不是输入的类型按钮，所以我可以消除按钮的提交动作，对吧？有线索吗？如何在没有在其他字段中调用验证的情况下单击这些取消按钮？

编辑：我将所有按钮更改为输入type =“button”，这些其他字段的验证消失了。有人可以解释一下吗？

这是我的viewmodel：

namespace CrashTestScheduler.Entity.ViewModel
{
    public class ChannelViewModel
    {
        public int Id { get; set; }
        //[Display(Name = "Name")]
        //[Required(ErrorMessage = "Please specify the channel name.")]
        public string Name { get; set; }
        public string Description { get; set; }
        public string ChannelGroupName { get; set; }

        public string MeasurementName { get; set; }
        [Required(ErrorMessage = "Please select a channel group.")]
        public int ChannelGroupId { get; set; }
        public IEnumerable<SelectListItem> ChannelGroups { get; set; }

        //[Required]
        public string Measurement { get; set; }
    }
}

Answer 1

单击按钮时提交表单的原因是<button>元素的默认操作是type="submit"（请参阅documentation）。您需要明确设置type属性

<button type="button" ....>

但是你的方法存在很多问题。

删除[Required]属性并使用required = "required" html属性，您现在需要包含手册控制器上的验证（永远不要相信用户！）
您可能会在视图中混淆Razor和手动html 为模型绑定创建问题。一些标签元素不会工作。（例如，第一个与名为的控件相关联＆＃34;部件/位置＆＃34;但是没有名为＆＃34; Part / Location＆＃34;）的控件。
强制用户单击按钮进行交换的用户界面文本框和下拉列表之间的混淆是一种令人困惑的方式失去客户。相反，你应该使用自动完成控件 as jQuery Autocomplete允许从列表中选择或直接文字输入。

您的视图模型应包含其属性的验证属性，并可简化为

public class ChannelViewModel
{
  public int Id { get; set; }
  [Display(Name = "Part/Location")]
  [Required]
  public string PartLocation { get; set; }
  public string Index { get; set; }
  [Required]
  public string Measurement { get; set; }
  [Required]
  [Display(Name = "Location")]
  public int Direction { get; set; }
  .... // other properties
  public SelectList DirectionList { get; set; }
}

查看

@Html.HiddenFor(model => Model.Id)

@Html.LabelFor(m => m.PartLocation, new {@class = "control-label"})
@Html.TextBoxFor(m => m.PartLocation, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.PartLocation)

@Html.LabelFor(m => m.Index, new {@class = "control-label"})
@Html.TextBoxFor(m => m.Index, new {@class = "form-control"})

@Html.LabelFor(m => m.Measurement, new {@class = "control-label"})
@Html.TextBoxFor(m => m.Measurement, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Measurement)

@Html.LabelFor(m => m.Direction, new {@class = "control-label"})
@Html.DropDownListFor(m => m.Direction, Model.DirectionList, "-- Select Direction --", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Direction)

.... // more controls

将自动填充功能附加到$(#Measurement).autocomplete({...

这将为您提供开箱即用的客户端和服务器端验证，以及更好的用户界面。

语言必需属性以语音方式调用，但单击按钮

1 个答案: