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方法中的输入参数，例如： / p>

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

请查看here以获得深入的答案。

MVC中的动态表单数据

2 个答案: