2

現在、このような HTML を生成している簡単な調査システムを作成しています。もちろん、ソリューションで必要な場合は変更できます。

<form id="surveyForm"> 
  <input type="hidden" value="1" name="surveyId" />
  <div class="questionContainer">
    <h4>What is 2 + 2?</h4>
      <div class="optionsContainer">
        <div class="optionContainer">
          <input id="option_1" value="1" type="radio" name="question_1" />
          <label for="option_1">3</label>
        </div>
        <div class="optionContainer">
          <input id="option_2" value="2" type="radio" name="question_1" />
          <label for="option_2">4</label>
        </div>
      <div class="optionContainer">
        <input id="option_3" value="3" type="radio" name="question_1" />
        <label for="option_3">5</label>
      </div>
    </div>
    <div class="freeTextContainer">
      <h4>Comments:</h4>
      <textarea id="freetext_1" name="freetext_1"></textarea>
    </div>
  </div>
  <!-- Multiple questionContainer may follow -->
</form>

ご覧のとおり、いくつかの POST 変数、つまりquestion_1など、question_2などがfreetext_1ありfreetext_2ます。ラジオ ボタンの値は、バックエンド データベースで見つかったオプション ID に対応します。

ここで、jQuery などを使用して、Ajax を使用して応答を MVC API コントローラーに投稿したいと考えています。

質問 1 です。jQuery を使用してこれらの値をサーバー側でデコードできる JSON 文字列にシリアル化する方法と、この json 文字列を受け入れる MVC メソッド サーバー側を指定する方法を教えてください。

質問 2: 上記の解決策はあまり洗練されていないため、MVC API メソッドで入力パラメーターとして使用できる POCO オブジェクト構造に変換できる方法でシリアル化したいと考えています。

public class SurveyAnswer
{
    public int SurveyId { get; set; } // From a hidden field
    public List<QuestionAnswer> Answers{ get; set; }        
}

public class QuestionAnswer
{
    public int QuestionId { get; set;}
    public int OptionSelecion { get; set; }
    public string FreeText { get; set; }
}

そして、次のような MVC メソッド:

[HttpPost]
public ActionResult PostAnswer(SurveyAnswer answer)
{
    ...
}

上記を実現するためにフォームをシリアル化するにはどうすればよいですか?

4

2 に答える 2

0

次のコードを使用して、フォームをシリアル化できます。

var formData = $("#surveyForm").serialize();

このようなjQuery投稿でそれを送信できます

$.post('@Url.Action("Save", "ApiController")', $(this).serialize(), function(json) {
        // handle response
    }, "json");

次に、このモデルを使用する必要がある場合:

public class SurveyAnswer
{
    public int SurveyId { get; set; }
    public int question_1 { get; set; }        
}

このようなMVCアクションに送信できます

[HttpPost]
public JsonResult Save(SurveyAnswer Survey)
{
    // do work
    return new JsonResult { Data = new { Success = true } };
}

これは 2 番目の質問の答えにはなりませんが、引き続きお役に立てば幸いです。

于 2012-11-29T15:04:52.443 に答える
0

これがあなたが望むものかどうかはわかりませんが、jQuery を使用して AJAXify することができます:

$(function() {
    $('#surveyForm').submit(function() {
        $.ajax({
            url: '/controller/PostAnswer
            data: $('#surveyForm').serializeArray(),
            type:'POST',
        });
        return false;
    });
});

そしてサーバー側では：

[HttpPost]
public ActionResult PostAnswer(SurveyAnswer answer)
{
    return Json(new { success = true });
}

詳細な回答については、こちらをご覧ください。

于 2012-11-29T15:09:11.247 に答える