asp.net mvc + knockout: Showing validation result from server side logic

Question

I want to pass validation result from server to client and show the message.

Without KnockOut.js it is very simple:

Call the validation logic.
Add validation result to ModelState.
Every thing is hooked automatically. (Html.ValidationMessageFor)

What should I do when using KnockOut? What is the best practice here?

Do I need to return my ModelState with my ViewModel? If yes, how should i bind that to my ValidationMessage placeholder? Is there any plugin to use?

update 1:

I know how to use client side validation libraries (Ko validation, jQuery validation) this is not my problem.
I know how to return model state to client using Ajax.
The problem is: What is the standard way of binding my errors list, to UI elements? Do I need to iterate my collection and bind them one by one? Is there any plugin that can bind my model state object to ui?

(just like when you are not using knockout and mvc takes care of it and binds them to your validation message place holders.)

yes we do have ko validation plugin for doing client side validation . you can check here if you are new to this jsfiddle.net/Kohan/JL26Z/17 . cheers — super cool
– super cool, Commented Mar 29, 2015 at 0:43
This seems to apply to ASP.NET MVC + AJAX in general, not to Knockout specifically. You should see if the answers here apply: stackoverflow.com/questions/14005773/… — wrschneider
– wrschneider, Commented Mar 29, 2015 at 1:31
Thanks for the comments. Check my update. @wrschneider99 the link you provided was really helpful. — Afshin Gh
– Afshin Gh, Commented Mar 29, 2015 at 11:49

vgaltes · Accepted Answer · 2015-12-02 12:41:00Z

I was facing the same problem. First I tried to implement this solution (https://datatellblog.wordpress.com/2015/06/26/client-and-server-validation-with-web-api-and-knockout/) but it didn't work.

My final solution is something like this:

Convert the ModelState to a JS array:

var modelState = null;
modelState = @Html.Raw(Json.Encode(ViewData.ModelState.Where(k => k.Value.Errors.Any()).Select(t => new { Key = t.Key, Value = t.Value.Errors.Select(e => e.ErrorMessage) })));

function getModelState() {
    return modelState;
}

After creating your view model, add the errors to it:

 self.addErrors = function (data, modelState) {
    $(data).each(function (dataIndex, dataItem) {
        var itemModelState = $(modelState).filter(function (filterIndex) { return stringStartsWith(modelState[filterIndex].Key, "Addresses[" + dataIndex + "]") });

        $(itemModelState).each(function (index, item) {
            var field = item.Key.split(".")[1];
            if (field === "NumberOfPositions") {
                $(item.Value).each(function (valueIndex, valueItem) {
                    var name = item.Key.replace("[", "\\[").replace("]", "\\]").replace(".", "\\.") + "_Error";
                    $("#" + name).text(valueItem);
                    $("#" + name).removeClass("field-validation-valid").addClass("field-validation-error").show();
                });
            }
        });

    });
};

This works at least in my case. Hope it helps.

Collectives™ on Stack Overflow

asp.net mvc + knockout: Showing validation result from server side logic

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related