MVC中的动态表单数据

Question

我正在创建一个简单的调查系统，该系统当前正在生成诸如此类的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：以上建议的解决方案不是很好，我想以一种可以序列化为POCO对象结构的方式对其进行序列化，该结构可用作MVC API方法中的输入参数，例如：

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)
{
    ...
}

我将如何序列化表格以达到上述要求？

Answer 1

您可以使用以下代码序列化表单。

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

这不能回答您的第二个问题，但是我希望它仍然可以帮助您。

Answer 2

不知道这是否是您想要的，但是您可以使用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 });
}

在这里查看详细答案。