使用C＃asp.net MVC代碼優先方法在Razor中驗證@ Html.DropDownList和@ Html.DropDownListFor

Question

我是MVC的新手，以前的經驗是asp.net Web表單，現在我很難使用C＃asp.net mvc代碼優先方法在Razor中為@ Html.DropDownList和@ Html.DropDownListFor添加驗證。

下面是我的設計：

   <div class="form-group">
        @Html.LabelFor(model => model.State, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("States", new SelectList(ViewBag.States as System.Collections.IEnumerable, "StateId", "StateName", new { @class = "control-label col-md-2" }), "Select a State", new { id = "dd_State" })

        </div>
    </div>

      <div class="form-group">
        @Html.LabelFor(model => model.City, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(Model => Model.City, new SelectList(Enumerable.Empty<SelectListItem>(), "CityName", "CityName"),"Select a City", new { id = "dd_City" })
            <span id="span1" name="span1"></span>
          </div>
      </div>

以下是我的模型代碼Register.cs，無法添加State和City的 require字段

  [Table("Register")]
public class Register
{
    [Key]
    public int Sno { get; set; }
    [Required(ErrorMessage = "Name is required.")]
    [Display(Name = "Full name")]
    public string Fullname { get; set; }
    [Display(Name = "Email Id")]
    [Required(ErrorMessage = "Email is required.")]
    public string EmailId { get; set; }
    [Required(ErrorMessage = "Password is required.")]
    public string Password { get; set; }
    [Required(ErrorMessage = "Mobile is required.")]
    public string Mobile { get; set; }
    [Required(ErrorMessage = "Address is required.")]
    public string Address { get; set; }
    public string State { get; set; }
    public string City { get; set; }
    [Required(ErrorMessage = "Entity is required.")]
    public string EntityType { get; set; }
    public string Website { get; set; }
    public string PinCode { get; set; }
    public string accountactivated { get; set; }

}

我也無法將Bootstrap CSS添加到@ Html.DropDownList和@ Html.DropDownListFor，請檢查下拉菜單外觀。

在此處輸入圖片說明

我的州和城市模型班。

在此處輸入圖片說明

在此處輸入圖片說明

Answer 1

您的問題是您不應將EF域模型用作視圖模型。 您應該創建特定於視圖需求的視圖模型。 然后，您可以將State和City指定為必填項，而不必在數據庫中進行設置。

您的域模型應該很簡單：

[Table("Register")]
public class Register
{
    [Key]
    public int Sno { get; set; }
    [Required(ErrorMessage = "Name is required.")]
    [Display(Name = "Full name")]
    public string Fullname { get; set; }
    [Display(Name = "Email Id")]
    [Required(ErrorMessage = "Email is required.")]
    public string EmailId { get; set; }
    [Required(ErrorMessage = "Password is required.")]
    public string Password { get; set; }
    [Required(ErrorMessage = "Mobile is required.")]
    public string Mobile { get; set; }
    [Required(ErrorMessage = "Address is required.")]
    public string Address { get; set; }
    public string State { get; set; }
    public string City { get; set; }
    [Required]
    public string EntityType { get; set; }
    public string Website { get; set; }
    public string PinCode { get; set; }
    public string accountactivated { get; set; }
}

然后，您的視圖模型可以如下所示：

public class RegisterViewModel
{
    public int Sno { get; set; }
    [Required(ErrorMessage = "Name is required.")]
    [Display(Name = "Full name")]
    public string Fullname { get; set; }
    [Display(Name = "Email Id")]
    [Required(ErrorMessage = "Email is required.")]
    public string EmailId { get; set; }
    [Required(ErrorMessage = "Password is required.")]
    public string Password { get; set; }
    [Required(ErrorMessage = "Mobile is required.")]
    public string Mobile { get; set; }
    [Required(ErrorMessage = "Address is required.")]
    public string Address { get; set; }
    [Required(ErrorMessage = "State is required.")]
    public string State { get; set; }
    [Required(ErrorMessage = "City is required.")] 
    public string City { get; set; }
    [Required(ErrorMessage = "Entity is required.")]
    public string EntityType { get; set; }
    public string Website { get; set; }
    public string PinCode { get; set; }
    public string accountactivated { get; set; }
 }

現在，在表格上輸入城市和州是必需的，但在數據庫中則不需要。 除非您將其添加到上下文中，否則將不會為此類創建遷移。

現在，您只需加載視圖即可使用HttpGet Action時所需的值，然后將要保存的內容移回實體中進行保存。

如果惡意用戶得知您正在使用域模型作為視圖模型，他們可以通過將元素添加到瀏覽器中的表單中而使用與您不認為要公開的屬性相同的名稱，從而將數據戳入屬性。 另一個原因是，您必須確保將模型中的每個值都返回給控制器，或者在發回時將值從模型中清除。 您只能通過將這些值放入帶有名稱的輸入中來執行此操作。 這將為惡意用戶提供他們所需要找出的所有更改。

更好的做法是使用特定於數據表示的單獨視圖模型。 然后將數據從視圖模型映射到域模型，反之亦然。

Answer 2

試試下面的代碼。 通過在DropDownListFor方法內添加新的{@class =“ form-control”}，這應該可以解決樣式問題。

關於驗證，您只需要在City / States上添加所需的屬性，這應該呈現沒有“ Select City / State”占位符的下拉列表。

     <div class="form-group">
        @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.City, Utility.GetCityList(), new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
        </div>
    </div>

對於我可能多次使用的國家/城市等下拉菜單，我將它們放在Models文件夾內的Utility類中，並在我的視圖頂部引用我的Utility，如下所示：

    @using SampleApp.Models

在Utility類中，我將有一個類似於下面的方法，該方法將SelectList返回到下拉列表。

    public static IEnumerable<SelectListItem> GetCityList()
    {
        IList<SelectListItem> list = new List<SelectListItem>
        {
            new SelectListItem() {Text="New York", Value="New York"},
            new SelectListItem() {Text="London", Value="London"}
        };

        return list;
    }