Remote Validation for LIST of MODELs

I used the following tutorial:
http://msdn.microsoft.com/en-us/library/gg508808%28VS.98%29.aspx

And everything seemed fine, but in my case, string Username always comes back null. After tonnes of research, I found everyone discovered BIND Prefixes. That would be great in many circumstances, but not this one. I should note all properties and names line up, however in my for loop, the EditorFor creates a [i].Username field and this doesn’t map to any model property.

QUESTION: I think I want to map [i].Username to Username where i is any number from 0-infinity, so when it GETS, the value is passed to the Action properly. How do I do this? If this is wrong, what do I do validate this for a specific row in a table?

@for (var i = 0; i < Model.Count; i++)
{
  BLAH BLAH BLAH CODE FOR BUILDING TABLE ROWS
  <td>
     @Html.EditorFor(modelItem => Model[i].Username)
  </td>                               
}

Since I could technically have HUNDREDS if not THOUSANDS of records, I would rather not had a binding PREFIX for all 1000. Am I fundamentally missing something here? I am new to ASP.NET MVC and am used to WebForms so I feel like sometimes I am mixing concepts and mashing up something that is entirely wrong.

EDIT:
I fixed it by doing the following, but not sure if this is the best idea. I set the parameter equal to the FieldName without [i] prefix, but still retrieve the element with the [i] prefix. Javascript isn’t my Forte so please let me know if it is horrible.

adapters.add("remote", ["url", "type", "additionalfields"], function (options) {
    var value = {
        url: options.params.url,
        type: options.params.type || "GET",
        data: {}
    },
        prefix = getModelPrefix(options.element.name);

    $.each(splitAndTrim(options.params.additionalfields || options.element.name), function (i, fieldName) {

        var paramName = fieldName.substr(fieldName.lastIndexOf(".") + 1);

        var actualFieldName = appendModelPrefix(fieldName, prefix)
        value.data[paramName] = function () {
            return $(options.form).find(":input").filter("[name='" + escapeAttributeValue(actualFieldName) + "']").val();
        };
    });

    setValidationValues(options, "remote", value);
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You have not posted your code for the model or controller, but assuming you have a RemoteAttribute applied to property Username, for example

public class MyModel
{
  [Remote("IsValidUserName", "Person")]
  public string Username { get; set; }
}

with a method in PersonController

public JsonResult IsValidUserName(string Username)
{
  ....
}

and the view

@model List<Person>
...
@for (var i = 0; i < Model.Count; i++)
{
  @Html.EditorFor(m => m[i].Username)                           
}

This will generate html such as

<input name="[0].UserName" ... />
<input name="[1].UserName" ... />

Unfortunately the remote method in jquery-validate posts back the name and value of the element so that the ajax call looks like

$.ajax({
  url: '/Person/IsValidUserName',
  data: { [0].UserName: '<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f7ebe9e1ebeae1c4f7ebe9e1f3ece1f6e1aae7ebe9">[email protected]</a>' },
  ...

which will not bind.

I have reported this as an issue at Codeplex with a possible solution. In the meantime you can modify the remote method in jquery-validate.js file as follows

remote: function(value, element, param) {
  ....
  var data = {};
  // data[element.name] = value;
  data[element.name.substr(element.name.lastIndexOf(".") + 1)] = value; // add this

This will strip the prefix so that the posted data is

 data: { UserName: '<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cad6d4dcd6d7dcf9cad6d4dcced1dccbdc97dad6d4">[email protected]</a>' },

and will correctly bind to the method.

Method 2

Assuming the code is formatted in the following way:
View:

@for(var i = 0; i<Model.Count; i++) {
    <div class="row">
        @Html.EditorFor(modelItem => Model[i].Username)
    </div>
}

<style>
    .valid{
        background: lime;
    }
</style>
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

Model:

public class MyModel {
    [Remote("IsValidUserName", "Validation", HttpMethod = "POST")]
    public string Username { get; set; }
}

It is possible to use the automatic modelbinding to bind to the remote validation. If you were to use a list or array for this, the binding would fail while a Dictionary can catch this error.
Be aware however that the Key in the dictionary will be consistent with the id in the view (e.g. [5].Username will map to {Key: 5, Value: MyModel{Username:…}}) and won’t be a default 0, hence the use of a Linq query.
Controller:

[HttpPost]
public JsonResult IsValidUserName(Dictionary<int,MyModel> Users) {
    return Json(Users.First().Value.Username.Contains("User"));
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0