0

私はmvc.hereを学んでいます.1つのモデルがあります。今、私は html ヘルパーを使用してフォームを構築したいと考えています。そのため、インデックス アクションが呼び出されると、モデル データを手動で入力し、モデルをビューに送信します。ここに私のモデルデータがありますが、知識が不足しているため、フォームを構築したい方法ができません。だから可能であれば私を助けて

namespace MvcPractise.Models
{
    public class Student
    {
        [Required(ErrorMessage = "First Name Required")] // textboxes will show
        [Display(Name = "First Name :")]
        [StringLength(5, ErrorMessage = "First Name cannot be longer than 5 characters.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Last Name Required")] // textboxes will show
        [Display(Name = "Last Name :")]
        [StringLength(5, ErrorMessage = "Last Name cannot be longer than 5 characters.")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "DOB require")] // datepicker will show
        [Display(Name = "DOB :")]
        [DataType(DataType.Date)]
        public DateTime Dob { get; set; }

        [Required(ErrorMessage = "State Required")] // drodown will show
        [Display(Name = "State :")]
        public List<State> State { get; set; }

        [Required(ErrorMessage = "City Required")] // drodown will show
        [Display(Name = "City :")]
        public List<City> City { get; set; }

        [Required(ErrorMessage = "Language known Required")] // group of checkboxes will show
        [Display(Name = "Language known :")]
        public List<Language> Language { get; set; }

        [Required(ErrorMessage = "Sex Required")] // group of radio button will show
        [Display(Name = "Sex :")]
        public List<Sex> Sex { get; set; }

        [Required(ErrorMessage = "Computer Course Required")] // listbox will show
        [Display(Name = "Computer Course Done :")]
        public List<ComputerCourse> ComputerCourse { get; set; }

    }

    public class State
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    public class City
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    public class Language
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    public class Sex
    {
        public string ID { get; set; }
        public string Type { get; set; }
    }

    public class ComputerCourse
    {
        public string ID { get; set; }
        public string Type { get; set; }
    }
}

1）名前と姓のプロパティについて、テキストボックスを表示したい

2）DOBプロパティの場合、日付ピッカーでテキストボックスを表示したい

3）DOBプロパティの場合、日付ピッカーでテキストボックスを表示したい

4) State/City プロパティの場合、ドロップダウンまたはコンボを表示したい

5) Language プロパティについて、チェックボックスのグループを表示したい

6) Sex プロパティの場合、男性と女性の 2 つのラジオ ボタンを表示したい

7) リストボックスを表示したいコンピュータ コース プロパティの場合

モデルにダミー データを設定し、UI を生成するインデックス アクション メソッドを記述します。保存ボタンをクリックすると、モデルデータはsaved likeと呼ばれるアクションメソッドに戻ります

public ActionResult Save(Students) { ビューを返します。}

また

public ActionResult Save(StudentViewModel sv) { ビューを返します(); }

進め方を教えてください。ありがとう

アップデート

この方法でモデルを手動で設定できますか

var model =  new Student()

{

    FirstName = "John",

    LastName = "Doe",

    Dob = DateTime.Now,

    State = new list<State>()
        {
            new state({ID="1" , Name = "test1"});
            new state({ID="2" , Name = "test2"});
            new state({ID="3" , Name = "test3"});
        };

}

特にこのコードを参照してください....動作しますかbcoz私は今、私のPCの前ではありません。

 State = new list<State>()
            {
                new state({ID="1" , Name = "test1"});
                new state({ID="2" , Name = "test2"});
                new state({ID="3" , Name = "test3"});
            };
4

1 に答える 1

3

1）名前と姓のプロパティについて、テキストボックスを表示したい

@Html.EditorFor(x => x.FirstName)
@Html.EditorFor(x => x.LastName)

2）DOBプロパティの場合、日付ピッカーでテキストボックスを表示したい

@Html.TextBoxFor(x => x.Dob, new { @class = "datePicker" })

次に、お気に入りの JavaScript 日付ピッカー ライブラリを選択し、日付クラスを持つすべての要素にアタッチします。たとえば、次のように使用できますjQuery UI datepicker。

$(function() {
    $('.datePicker').datepicker();
});

4) State/City プロパティの場合、ドロップダウンまたはコンボを表示したい

@Html.DropDownListFor(x => x.SelectedState, new SelectList(Model.State, "ID", "Name"))

SelectedStateここで使用されているプロパティに注意してください。値を保持するには、文字列プロパティとしてモデルに追加する必要があります。

5) Language プロパティについて、チェックボックスのグループを表示したい

チェックされているかどうかを知るために、ブール型のプロパティを言語モデルに追加することから始めます。

public class Language
{
    public string ID { get; set; }
    public string Name { get; set; }
    public bool Selected { get; set; }
}

その後：

@for (var i = 0; i < Model.Language.Count;i++)
{
    @Html.HiddenFor(x => Model.Language[i].ID)
    @Html.HiddenFor(x => Model.Language[i].Name)
    @Html.LabelFor(x => Model.Language[i].Selected, Model.Language[i].Name)
    @Html.CheckBoxFor(x => Model.Language[i].Selected)
}

6) Sex プロパティの場合、男性と女性の 2 つのラジオ ボタンを表示したい

次に、リストではなく文字列として宣言します。

public string Sex { get; set; }

そしてあなたの見解では：

@Html.RadioButtonFor(x => x.Sex, "Male")
@Html.RadioButtonFor(x => x.Sex, "Female")

7) リストボックスを表示したいコンピュータ コース プロパティの場合

@Html.ListBoxFor(x => x.SelectedCourses, new SelectList(Model.ComputerCourse, "ID", "Type"))

モデルにダミー データを設定し、UI を生成するインデックス アクション メソッドを記述します。

public AcitonResult Index()
{
    Student student = ... go hit your backend to get a student
    return View(student);
}

ビュー内には、次のフォームがあります。

@model Student
@using (Html.BeginForm())
{
    ... generate the desired input fields

    <button type="submit">OK</button>
}

次に、フォームが送信されたときに呼び出される POST アクション:

[HttpPost]
public AcitonResult Index(Student student)
{
    ...
}

また、ビューにドメイン モデルを渡す代わりに、ビュー モデルを使用することをお勧めします。

于 2013-09-17T08:14:10.083 に答える