Ajax.BeginForm返回结果并显示相应的数据

Question

我有一个页面如下:

<% using (Ajax.BeginForm("AddAnswer","Marketplace",new AjaxOptions() {HttpMethod = "POST" })){ %>

AddAnsweraction将一些数据添加到db.我想要做的是:当成功添加答案时,将#answersdiv与当前答案传递给控制器​​.当答案尚未成功添加到db时 - 我想在#errorsdiv中显示适当的错误.我怎样才能做到这一点？

Answer 1

这是我可以建议的:

控制器:

[HttpPost]
public ActionResult AddAnswer(string Value)
{
    // TODO: Try to insert the answer value into the database
    // and return a JSON object that contains the attempted value
    // and an error message if necessary
    return Json(new { Answer = Value, ErrorMessage = "" });
}

视图:

<% using (Ajax.BeginForm("AddAnswer", "Home", 
       new AjaxOptions { HttpMethod = "POST", OnSuccess = "success" })) { %>
    <%= Html.TextBoxFor(x => x.Value) %>
    <input type="submit" value="Add answer" />
<% } %>

<div id="errors"></div>
<div id="answers"></div>

<script type="text/javascript">
    function success(arg) {
        var obj = arg.get_response().get_object();
        // I apologize for the ugliness that follows, I don't know MS Ajax
        // but this might written better:
        if (obj.ErrorMessage === '') {
            var answer = document.createElement('div');
            answer.appendChild(document.createTextNode(obj.Answer));
            document.getElementById('answers').appendChild(answer);
        } else {
            document.getElementById('errors').innerHTML = obj.ErrorMessage;
        }
    }
</script>