MVC 中的客户端验证 Entity framework

Client Side validation In MVC with Entity framework

我正在处理一个表单,我必须在其中验证我的用户输入(即文本框和下拉列表)。在此我使用了 MVC 架构以及 entity framework.

在此表单中,我必须验证文本框中的输入不应为空,并且下拉列表还应包含有效选项

表单是使用 razor html 语法生成的

VIEW

 <form method="post">
    <table>
        <tr>
            <td>
                @Html.Label(" Cartidge Number ") <span style="color:red">*</span>
            </td>
            <td>
                @Html.TextBoxFor(model => model.CartridgeNumber, "", new { @id = "txtNumber"})
                @Html.ValidationMessageFor(model => model.Brand)
            </td>
        </tr>
        <tr>
            <td>
                @Html.Label(" Brand ") <span style="color:red">*</span>
            </td>
            <td>

                @Html.DropDownListFor(model => model.Brand, ViewBag.BrandId as SelectList,"Please Select", new { @id = "ddlBrands" })
                @Html.ValidationMessageFor(model => model.Brand)

            </td>
        </tr>
        <tr>

型号

Modelname 是 CartridgeModel,它是使用 entity framework 的数据库优先方法生成的

    namespace MultiInfoMediaCloudSolution.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public partial class CartridgeModel
    {
        [Display(Name = "Cartridge Number: ")]
        [Required(ErrorMessage = " Please Enter Cartridge Number ")]

        public string CartridgeNumber { get; set; }

        [Display(Name = "Brand: ")]
        [Required(ErrorMessage = " Please Select Brand ")]
        public string Brand { get; set; }
        public string CartridgeKeywords { get; set; }
        public Nullable<bool> IsActive { get; set; }
        public Nullable<short> CreatedBy { get; set; }
        public Nullable<System.DateTime> CreatedDate { get; set; }
        public Nullable<short> ModifiedBy { get; set; }
        public Nullable<System.DateTime> ModifiedDate { get; set; }

        public virtual Brand BrandName { get; set; }
    }
}

控制器

{
                // check if the user has selected to edit the item or not.

                if (userAction == "Edit")
                {
                    var _Printer = (from c in _multiInfoMediaEntities.PrinterModels
                                    where c.PrinterModelNo.Equals(PrinterModelNo)
                                    select c).First();

                    //to store PrinterModelNo
                    string printerNumberTemp = _Printer.PrinterModelNo;
                    TempData["PrinterModelNo"] = printerNumberTemp;
                    TempData["IsActive"] = _Printer.IsActive;

                    TempData["userAction"] = "Edit";
                    return View(_Printer);
                }
                else
                {
                    return View();
                }
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message.ToString());
            }

我正在使用 javaScript 来验证我的表单,但它异常地没有给我预期的任何结果,

javascript如下

JavaScript

//................................Go Function is user for the Validation in all the List........................
function GO() {
    var ddl = document.getElementById("dllFilter");
    var brands = document.getElementById("ddlBrands");

    if (ddl.options[ddl.selectedIndex].text == "Please Select") {
        alert("Please select search field");
    }

    if(brands.innerText == "Please Select")
    {
        alert("Please select brand")
    }

}
//................................

//.......................Clear function is Used for Clearing the textbox Value from all the List........................
function Clear() {
    document.getElementById('txtSearch').value = 'Enter Value';
    //ViewData["Selected"] = "Please Select";
}
//......................................................................................................

所以,谁能帮助我或指导我解决这个问题。 ?

如果您需要简单的客户端验证,您可以使用 "required" 属性
<input type="text" required />
或您的情况
@Html.TextBoxFor(model => model.CartridgeNumber, "", new { @id = "txtNumber", required = "required"})

至于下拉列表,您可以使用相同的必需属性,但要使其正常工作,第一个 'option' 子元素的值必须为空字符串
<option value="">Please select an option</option>