Динамическое добавление нового элемента чрезвычайно медленно

Question

Я использую ASP.NET MVC и Razor. Пользователь должен заполнить некоторую форму, которая состоит из списка объектов. Поэтому я передаю список пустых объектов из контроллера для просмотра. Это часть моего основного вида:

foreach (var product in Model.Products) 
{ 
    Html.RenderPartial("ProductPartial", product); 
} 

В ProductPartial пользователь вводит некоторые поля для каждого продукта. Пользователь может динамически добавлять или удалять продукты из списка. Удаление я решил с помощью функции jquery live, и все в порядке. Но у меня проблемы с добавлением новых продуктов.

я решил его таким образом: На плюсик нажмите функцию Javascript вызывает действие контроллера:

public ActionResult NewProduct() 
{ 
    Product product = new Product(); 
    product.UniqueId = Guid.NewGuid(); 
    return PartialView("ProductPartial", product); 
} 

Мне нужен уникальный идентификатор для каждого продукта, потому что я хочу, чтобы иметь возможность получить доступ к продуктам из JQuery по идентификаторам. Добавление работает правильно, но это очень медленно, так как я иду на сервер для каждого нового продукта. Есть ли хороший способ сделать это быстрее?

Answer 1

Ну, вместо того, чтобы запрашивать у сервера более одного и того же HTML-кода, вы можете использовать jQuery.clone();

В примере я копирую первый продукт в списке и давая ему новый идентификатор, а затем добавляя копию в конец списка.

var newProductHtml = $('.MyProducts')[0].clone(); 
newProductHtml.attr('id', MyNewId); 
newProductHtml.appendTo('.MyProductsContainer');