MVC TextBoxFor(model=>model[i].prop) inside javascript for loop

Question

I would like to make this code work:

$('#ddl').change(function () {

            $('#cont').html('');
            var count = getCount($('#ddl').val())
            for (var i = 0; i < count ; i++) {
                var html = '<div class="display-row">' +
                '<div class="display-label">' +
                'Vrednost:' +
                '</div>' +
                '<div class="display-field">' +
                'Od: @Html.TextBoxFor(model => model[i].Od)  Do:@Html.TextBoxFor(model => model[i].Do)' +
            '@Html.ValidationMessageFor(model => model[i].Do)' +
                    '</div>' +
                '</div>';
                $('#cont').append(html);
            }

        });

I just need do get the value of i for model[i] inside js loop.

How can i achieve that ?

In Razor we can access loop index only when we run it in c#. You can mixup the c# and Razor code but c# never accept the Javascript code. — Anirudha Gupta, Oct 25 '13 at 15:51

score 0 · Answer 1 · answered Oct 25 '13 at 15:18

0

You can't do it this way. The ASP.NET is generated on the server and Javascript runs only in your webbrowser

answered Oct 25 '13 at 15:18

VladL

12,769
10
63
83

If you mean i cant mix js and razor,yes i can.My only problem is the i variable.If i set model[0] i get the corect number of texboxes but they dont have unique id's and name's – gMailMan Oct 25 '13 at 15:25
@gMailMan you can, but not the way you think. You can't loop through model's array in JS on the client side – VladL Oct 25 '13 at 15:32

score 0 · Accepted Answer · edited May 23 '17 at 11:57

"I just need do get the value of i for model[i] inside js loop."

if you want that, you can make an ajax request and retrieve your model as json object. then iterate over your list and do what you want to do.

In your controller create an action method that will return list of your models:

return json(your model list);

and in js do:

$.post(url, {}, function(data){
    for(var i = 0; i < data.lenght; ++i) {
    }

});

Edit: When you use @Html.TextBoxFor(model => model[i].Od) in server side this html will be generated:

<input type="text" name="[i].Od" data-val="true" data-val-required="validationMessage" />

so you can create these tags yourself, and you usually place them in a form. but for validation you can do this:

//Remove current form validation information
$("form")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Parse the form again
$.validator
    .unobtrusive
    .parse("form");

(last code from this post)

These fields will be input fields,so i just need to generate x num of textboxes with proper validation. — gMailMan, Oct 25 '13 at 15:33
Yes,i guess i have to do it this way,but i meant to use the helper which would generate correct validation every time,even if a change it in my model.But i didnt know i must remove and parse the form again,thanks. — gMailMan, Oct 25 '13 at 19:16

score 0 · Answer 3 · answered Oct 25 '13 at 15:23

ASP.net code is run on the server, first, before anything happens in Javascript. By the time the Javascript code is run, the page is just text - you can't call model[i] like that. You have two options:

If your model is fairly small, you could in the server-side code, have razor iterate through and generate a string containing a javascript array out of the model, emit that to the page, and then have your javascript iterate through that array.
If your model (or its data) is large enough that you wouldn't want to write the entire contents of it to the page, you could also create a method on your controller that would return json, and have your javascript code call into it via ajax.

MVC TextBoxFor(model=>model[i].prop) inside javascript for loop

3 Answers3