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_2and 等等。单选按钮的值对应于后端数据库中的选项 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 } };
}

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

于 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 回答