为什么在我的MVC中没有使用Ajax表单显示验证错误?

时间:2012-05-20 22:36:27

标签: asp.net-mvc jquery-ui jquery-dialog jquery-validate

如果提交的数据为空/空时没有显示验证错误,会出现什么问题?应该显示错误。

在代码块result.success == false中,我应该重新加载视图还是告诉jQuery使我的模型无效?

从我在控制器中的Post操作中,我返回了模型错误,因此我将它们放在客户端。

我现在该怎么办?

我正在使用MVC 3.0和最新的jQuery / UI 1.7.2 / 1.8.20:

<script type="text/javascript">

    $(document).ready(function () {

        // the div holds the html content
        var $dialog = $('<div></div>')
        .dialog({
            autoOpen: false,
            title: 'This is the dialogs title',
            height: 400,
            width: 400,
            modal: true,
            resizable: false,
            hide: "fade",
            show: "fade",
            open: function (event, ui) {
                $(this).load('@Url.Action("Create")');
            },
            buttons: {
                "Save": function () {
                    var form = $('form', this);               

                    $.ajax({
                        url: $(form).attr('action'),
                        type: 'POST',
                        data: form.serialize(),
                        dataType: 'json',
                        success: function (result) {
                           // debugger;
                            if (result.success) {
                                $dialog.dialog("close");
                                // Update UI
                            }
                            else {
                                // Reload the dialog to show model/validation errors 


                            } // else end
                        } // success end
                    }); // Ajax post end

                },
                "Close": function () {
                    $(this).dialog("close");
                }
            } // no comma
        });

        $('#CreateTemplate').click(function () {
            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });

    });
</script>

我的表格是:

@using (Html.BeginForm("JsonCreate", "Template")) 
{  
    <p class="editor-label">@Html.LabelFor(model => model.Name)</p> 
    <p class="editor-field">@Html.EditorFor(model => model.Name)</p> 
    <p class="editor-field">@Html.ValidationMessageFor(model => model.Name)</p>     
}

我的控制器是:

[HttpGet]
public ActionResult Create()
{          
    return PartialView();
}

[HttpPost]
public ActionResult JsonCreate(Template template)
{
    if (ModelState.IsValid)
    {
        _templateDataProvider.AddTemplate(template);
        // success == true should be asked on client side and then ???
        return Json(new { success = true });
    }

        // return the same view with model when errors exist
        return PartialView(template);
}

工作版本是:

我在$.ajax请求中更改了此内容:

// dataType: 'json', do not define the dataType let the jQuery infer the type !
data: form.serialize(),
success: function (result)
{
    debugger;
    if (result.success) {
        $dialog.dialog("close");
        // Update UI with Json data          
    }
    else {
        // Reload the dialog with the form to show model/validation errors 
        $dialog.html(result);
    }
} // success end

Post动作必须如下所示:

[HttpPost]
public ActionResult JsonCreate(Template template)
{
    if (!ModelState.IsValid) {
        return PartialView("Create", template);
        _templateDataProvider.AddTemplate(template);
        return Json(new { success = true });
    }
}

返回部分视图(success == false)或返回success == true的JSON。

有人仍然可以返回一个项目列表来更新客户端的UI:

return Json(new { success = true, items = list});

2 个答案:

答案 0 :(得分:0)

您必须确保返回JSON数据而不是html或任何其他类型的数据。使用浏览器控制台可以找到有关您的ajax请求和响应的更多信息,以确保您获得正确的响应,如您所愿。

答案 1 :(得分:0)

好吧,我看到的错误是 -

你正在控制器中做一个返回,你应该做一个

Response.Write(Json(new { success = true, items = list}));