Question

我有一个jquery网格，其中有一个Employee Records列表。要编辑记录，每行都有一个链接。单击该按钮打开一个Jquery模型弹出窗口并加载局部视图以显示和编辑数据。但是单击弹出窗口上的按钮（自定义按钮而不是jquery模型按钮）（加载部分视图），使用dataAnnotation进行客户端验证不起作用。如果我提交的表格如下： -

$（“＃btnUpdate）.submit（function（e）{

    e.preventDefault();
    var $form = $(this);
    if ($form.valid()) {
       //Add ajax call
     }

}）;

然后在提交后重定向到： - {../Employee/Edit/EmployeeId}，它显示一个空白屏幕，因为我没有任何视图。

我希望在表单发布之后它应该只刷新jquery网格。

Answer 1

    public PartialViewResult _CreateSupplier()
    {
        return PartialView(new Supplier());
    }

[HttpPost]
public JsonResult _CreateSupplier(Supplier model)
{
//Validation
return Json(new
                {
                    status = transactionStatus,
                    modelState = ModelState.GetModelErorrs()
                }, JsonRequestBehavior.AllowGet);
}

表单帖子jquery方法

$('#create-supplier').submit(function (e) {
    e.preventDefault();
    var $form = $(this);
    if (!ModelIsValid($form))
        return;
    AjaxPost($form.serialize(), '@Url.Action("_CreateSupplier")', function (result) {
        if (result.status == 0) {
            $form[0].reset();
            //Success
            var grid = $("#gridSupplier").data("kendoGrid");
            grid.dataSource.read();
        } else if (result.status == 1)
            AddFormErrors($form, result);
        else if (result.status == 2)
           //error;
    });
});

检查模型方法是否有效，如果无效则添加错误以形成

function ModelIsValid(form) {
    var validator = $(form).validate(); // obtain validator
    var anyError = false;
    form.find("input").each(function () {
        if (!validator.element(this)) { // validate every input element inside this step
            anyError = true;
        }
    });

    if (anyError)
        return false; // exit if any error found    
    return true;
}

function AddFormErrors(form, errors) {
    for (var i = 0; i < errors.modelState.length; i++) {
        for (var j = 0; j < errors.modelState[i].errors.length; j++) {
            var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']");
            if (val.html().length > 0) {
                $(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]);
            } else {
                val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>');
            }
        }
    }
}

Ajax post方法：

function AjaxPost(postData, url, callback) {
    $.ajax({
        url: url,
        type: 'POST',
        data: postData,
        dataType: 'json',
        success: function (result) {
            if (callback) callback(result);
        }
    });
}

最后一个检查返回模型状态错误的c＃泛型方法

 public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState)
        {
            return modelState.Keys.Where(x => modelState[x].Errors.Count > 0)
                .Select(x => new {
                 key = x,
                 errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray()
                });
        }

希望答案很有用......

使用ajax将表单数据从部分视图发布到控制器

1 个答案: