Posting form data from Partial view to controller using ajax

Question

I have a jquery grid that has a list of Employee Records.To edit the records there is a link on each row.On click of that A jquery model popup opens and loads the partial view to show and edit the data.But on click of the button(custom button not the jquery model button) on the popup(that loads a partial view),the client side validation using dataAnnotation does not work. If I make a submit form like:-

$("#btnUpdate).submit(function (e) {

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

});

Then after submit it redirects to:- { ../Employee/Edit/EmployeeId } where it shows a blank screen as I dont have any view for this.

I want that after the form post it should just refresh the jquery grid.

Irakli Lekishvili · Accepted Answer · 2013-06-18 12:21:12Z

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

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

Form post jquery method

$('#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;
    });
});

Checking model method is valid and if invalid adding errors to form

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 method:

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

And last c# generic method which checks returns model state errors

 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()
                });
        }

Hope answer is useful...

Collectives™ on Stack Overflow

Posting form data from Partial view to controller using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related