Предложение о заполнении одного и того же элемента HTML (с разными значениями) на стороне клиента, поскольку сериализация на стороне сервера блокирует его

Question

У меня есть этот шаблон item-html:

<div class="item">
    <div class="data1"></div>
    <div class="data2"></div>
    <div class="data3"></div>
    <div class="data4"></div>
    <div class="data5"></div>
    <div class="data6"></div>
</div>  

, и мои данные сериализуются в объект Javascript (получить по JSON) с сервера.

У меня есть что-то вроде 1000 объектов JS, например, и мне нужно добавить 1000 из этих HTML-элементов, каждый с данными для каждого объекта.

Цикл и добавление их на стороне клиента с помощью JavaScript очень интенсивно!Я хочу создать весь html на стороне сервера (с большой избыточностью, поскольку я отправляю html-тег для каждого элемента) и распечатать их, но это невозможно, потому что эти объекты сериализуются из C #, и я получаю исключение maxJsonLength.

Так что вы предлагаете обойти эту проблему?

Answer 1

Это не будет слишком тяжело просто пройти через JSON и заполнить / добавить каждый div. Одно из предложений, которое я хотел бы сделать, это убедиться, что вы добавляете элемент, находящийся вне DOM, чтобы не вызывать 1000 перерисовок. После заполнения конечного объекта добавьте его в DOM, чтобы произошла только одна перекраска.

Answer 2

Чтобы добавить свои элементы данных вне DOM, вы можете сделать что-то вроде этого:

var item = $('<div/>'); // Creates a new parent div outside the DOM
for(...) {
    item.append(/* your parsed JSON data as HTML */);
}
$('#parentDivInsideDOM').append(item);

То, что вы делаете, - это создание родительского div вне DOM, добавление ваших внутренних div-данных в цикл (все еще вне DOM), а затем добавление всего этого к родительскому div внутри DOM для 1 перерисовки.

Answer 3

Сценарии на стороне клиента - вот путь ... используйте что-то вроде json2html или jTemplates.

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://json2html.com/js/jquery.json2html-2.5-min.js"></script>

<script type="text/javascript">
var transform = {tag:'div',class:'item',children:[
                    {tag:'div',class:'data1',html:'.data1'},
                    {tag:'div',class:'data2',html:'.data2'},
                    {tag:'div',class:'data3',html:'.data3'},
                    {tag:'div',class:'data4',html:'.data4'},
                    {tag:'div',class:'data5',html:'.data5'},
                    {tag:'div',class:'data6',html:'.data6'}
                ]};

$.json2html(json,transform);
</script>

при условии, что ваш объект json выглядит следующим образом

var json =  
   [{data1:'data1',data2:'data2',data3:'data3',data4:'data4',data5:'data5',data6:'data6'},
   {data1:'data1',data2:'data2',data3:'data3',data4:'data4',data5:'data5',data6:'data6'},
   {data1:'data1',data2:'data2',data3:'data3',data4:'data4',data5:'data5',data6:'data6'}];

Answer 4

Вместо добавления каждого div, посмотрите на .html() и вставьте его таким образом.

Это гораздо менее ресурсоемко.