4

編集 3 / 最終

これは、.NET MVC、Jquery、およびエディター テンプレートを使用した完全に機能する例です。 https://www.dropbox.com/s/t4yxbhkuowyd7va/exerciseTest.rar

編集 2

それは最終的に動作します!以下の回答に感謝します。NewAnswerRow 部分行を変更する必要があったようです:

<input type='text' id='Answers_@(Model.AnswerId)__Answer'   name='Answers[@Model.AnswerId].Answer'/>

ありがとう !

編集1:

私はこのガイドに従いました: http://www.techiesweb.net/asp-net-mvc3-dynamically-added-form-fields-model-binding/

おもしろいのは、彼のソースを使用すると、本来のように機能することです。しかし、それはほとんど同じです。

元の投稿

まず、このメッセージを読んでくれてありがとう。喜んで助けてくれます。ビックリです。私の状況を説明してみましょう。答えのリストがある新しい演習を作成しようとしています。これらの回答は、Jquery を使用してオンザフライで作成されます。それらの回答を EditorTemplates で読んでいます。新しい「回答」フィールドを作成して「投稿」を押すと、コントローラーがデータ(回答)を見ることができないことを除いて、すべてが機能します。奇妙なのは。たとえば、回答プロパティで [required] のようなデータ注釈を使用する場合。インデックスにリダイレクトされます。もう一度試してみると、モデルが空ではなくなりました。

だから基本的に私の質問は、どうすればそれらの答えを私のリストに入れることができるでしょうか?

より明確かつ具体的にするために、新しいプロジェクトを作成しました。

私は2つのモデルを持っています、

  • エクササイズ

  • 回答

エクササイズモデルクラス

[Table("Exercise")]
public class ExerciseModel
{

    [Key]
    public int ExerciseId { get; set; }


    public string Question { get; set; }


    public IList<AnswerModel> Answers { get; set; }
}

基本的にシンプルなクラスです。ご覧のとおりです。回答付きのリストがあります。

AnswerModel

[Table("Answer")]
public class AnswerModel
{
    [Key]
    public int AnswerId { get; set; }

    public string Answer { get; set; }
 }

Id と Answer を持つ単純な AnswerModel クラス。

私のコントローラー

public class ExerciseController : Controller
{
    private readonly DataContext db = new DataContext();
    //
    // GET: /Exercise/
    public ActionResult Index()
    {
        var exercise = new ExerciseModel();
        exercise.Answers = GetAnswers();

        return View(exercise);
    }


    [HttpPost]
    public ActionResult Index(ExerciseModel exercisemodel)
    {
        //need to implement interaction with database (not yet) testing phase.
        return View("PostedData", exercisemodel);
    }


    public ActionResult NewAnswersRow(int id)
    {
        var answers = new AnswerModel { AnswerId = id };
        return View("partial/NewAnswersRow", answers);
    }


    private List<AnswerModel> GetAnswers()
    {
        var answerslist = new List<AnswerModel>();
        answerslist.Add(new AnswerModel { AnswerId = 1, Answer = "This is a hardcoded answer"}); //normally db.Answers (for testing purposes)
        return answerslist;
    }

}

マイ インデックス ビュー

@model exerciseTest.Models.ExerciseModel
@using (Html.BeginForm())
{

    <div class="divAnswers">
        <div  id="container">
            <div class="editor-label">
                @Html.LabelFor(model => model.Question)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Question)
                @Html.ValidationMessageFor(model => model.Question)
            </div>
            @Html.EditorFor(m => m.Answers)

        </div>
        <input type="button" id="btnAdd" value="Add New Item" />
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>
}


    <script>

$(function () {
    $("#btnAdd").click(function (e) {
        var itemIndex = $("#container input.iHidden").length;
        console.debug("itemIndex : "+itemIndex);
        e.preventDefault();
        $.get("@Url.Action("NewAnswersRow", "Exercise")/"+itemIndex,function(data){
            $("#container").append(data);
        });           
    });
});

</script>

私の AnswerModel のエディター テンプレート

@model exerciseTest.Models.AnswerModel
@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<tr> 
 <td>
  @Html.HiddenFor(x => x.AnswerId, new { @class="iHidden" })
 @Html.TextBoxFor(x => x.Answer) </td>
</tr>

Jquery を使用してオンザフライで新しい行を作成するための My NewAnswersRow.cshtml (コード部分のインデックスを参照)

@model exerciseTest.Models.AnswerModel
@{    Layout = null; }
<tr> 
 <td>
  <input type="hidden" id="Answers_@(Model.AnswerId)__Id" class="iHidden"  name='Answers[@Model.AnswerId].Id' />
  <input type='text' id='Answers_@(Model.AnswerId)__AnswersText'   name='Answers[@Model.AnswerId].AnswersText'/>
 </td>
</tr>

そして、テスト目的の「postedData」ビュー

@model exerciseTest.Models.ExerciseModel
<h3>Posted data is </h3>

@foreach (var item in Model.Answers)
{
   <p>@item.Answer</p>
}

私はこれを機能させようとしています。答えを見つけることができたので、ここ5年間、StackOverflowで何かを尋ねたことはありません。しかし、今回はあなたの助けが必要です。

ありがとう !

4

1 に答える 1