asp.net-mvc - Ajax.BeginForm 返回结果并显示适当的数据

Question

我有一个页面如下:

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

AddAnswer 操作向数据库添加一些数据。我想要做的是:成功添加答案后，附加 #answers div 将当前答案传递给 Controller ​​。当答案尚未成功添加到数据库时 - 我想在 #errors div 中显示适当的错误。我怎样才能做到这一点？

Answer 1

这是我的建议:

Controller :

[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>