客户端验证 在具有实体框架的 MVC 中

Client Side validation In MVC with Entity framework

本文关键字:框架 MVC 实体 验证 客户端      更新时间:2023-09-26

我正在处理一个表单,我必须在其中验证我的用户输入(即文本框和下拉列表)。 在这方面,我同时使用了MVC架构和实体框架。

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

表单是使用 Razor HTML 语法生成的

视图

 <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>

模型名称是CartridgeModel,它是使用实体框架的数据库优先方法生成的

    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 value="">Please select an option</option>的空白字符串