Javascript'te MVC modeline öğe nasıl eklenir?

Question

Modelimde dinamik olarak java script ile bir listeye öğe eklemek istiyorum. MVC'yi yeni ürünü modele nasıl bağlarım?

Benim modeller: model olarak bir garajını kullanan

public class Garage 
{ 
    public string Name{ get; set; } 
    public string Location { get; set; } 
    public IList<Car> Cars{ get; set; } 
} 

public class Car 
{ 
    public string Color{ get; set; } 
    public string Name { get; set; } 
} 

Bence,:

model olarak a Car kullanır

<% using (Html.BeginForm()) 
{%> 
<div id="cars"> 
     <% 
       foreach (var item in Model.Cars) 
       { 
        Html.RenderPartial("CarView", item); 
       } %> 
</div> 
<% } %> 

Ve Carview: eklerken

<div class="carRow">    

     <%-- Color--%> 
     <%=Html.CustomLabelFor(model => model.Color)%> 
     <%= Html.TextBox(Model.Color) %> 

     <%-- Name--%> 
     <%=Html.CustomLabelFor(model => model.Name)%> 
     <%= Html.TextBox(Model.Name) %> 
</div> 

Yeni bir Araba, bir AJAX aramasını kullanır ve bunu html'ye ekler.

public ViewResult NewCar() 
    { 
     return View("CarView"); 
    } 

Benim java script ajax çağrı: AJAX denetleyicisi bu yöntemi kullanan bu güzel html kılan

  $('.addCarButton').click(function() { 
      $.ajax({ 
       url: "<%= Url.Action("CreateCars") %>", 
       cache: false, 
       success: function (html) { $("#cars").append(html); } 
      }); 
      return false; 
     }); 

ama arabalar listesine araba eklemez.

Bu nasıl yapılabilir?

Answer 1

Steven Sanderson'un, bunun nasıl uygulanacağına ilişkin adım adım eğitici olduğu following article'a bakabilirsiniz.

Answer 2

bu jQuery eklentisi izleyin, özel olarak

https://github.com/suraj-mahajan/Add-New-Row-jQuery-for-MVC

Answer 3

Ben bu eski bir soru olduğunu biliyoruz, ama Steven Sanderson's BeginCollectionItem yeniden yukarıdaki öneriyi denendikten sonra işlemin detaylı kesiminde yeni eleman istemci tarafında eklemek için tasarlanmıştır ve Bir dizi başka potansiyel çözümler, çok uzağa gitmedim (yeni öğeler yayınlanmayacaktı). BeginCollectionItem, teoride güzel bir çözüm gibi görünüyordu, ancak yeni öğeler yayınlamıyordu ve liste öğelerinin biçimlendirilmesinde beklenmedik etkileri vardı. Çözelti, şaşırtıcı derecede basittir ve herhangi bir dış kütüphaneye (JQuery'in ötesine) ihtiyaç duymamıştır. Bu benim için ASP.NET MVC5'te çalışır.

1. Satır öğesi için bir düzenleyici şablonu oluşturun.

yolu: Görüntüleme/Paylaşımlı/EditorTemplate/NuggetSourceDto.cshtml

@model [namespace].NuggetSourceDto 

@{ 
    ViewBag.Title = "NuggetSourceDto"; 
} 

<li id=@Model.Id> 
    @Html.HiddenFor(t => t.Id) 
    @Html.TextBoxFor(s => s.Url, new { @class = "form-control", autofocus = "autofocus" }) 
    <a role="button" class="glyphicon glyphicon-remove"></a> 
</li> 

2. kullanın yukarıdaki şablonu (aşağıdaki koleksiyonu ile çalışır ve her öğe için html üretir):
Bence

:

@Html.EditorFor(m => m.NuggetSources); 

3. Bir kullanıcı 'satır ekle' düğmesini (aşağıdaki kodumda 'addSourceBtn') tıklattığında, şablon için html'yi almak için ajax kullanırım.

MVC kontrol olsun yöntemi:

[HttpGet] 
public PartialViewResult AddBlankSourcesRow() 
{ 
    return PartialView("EditorTemplates/NuggetSourceDto", new NuggetSourceDto()); 
} 

js işleyicisi:

$(document).ready(function() { 
    $('#addSourceBtn').click(function() { 
     var indexOfNewItem = $('#sourceList li').length; 

     $.ajax({ 
      url: '/nugget/AddBlankSourcesRow/', 
      cache: false, 
      success: function (html) { 
       var newItem = $(html); 
       var randId = Math.random() * 10000000; 
       randId = Math.floor(randId); 
       newItem.attr('id', 'newSource__' + randId); 
       newItem.find('input').first().attr({ 
        //name: 'NuggetSources[3].Id' 
        name: 'NuggetSources[' + indexOfNewItem + '].Id', 
        id: 'NuggetSources_' + indexOfNewItem + '__Id', 
        value: randId 
       }); 
       newItem.find('input[id^=Url]').attr({ 
        name: 'NuggetSources[' + indexOfNewItem + '].Url', 
        id: 'NuggetSources_' + indexOfNewItem + '__Url' 
       }); 
       $('#sourceList').append(newItem); 
      } 
     }); 
     return false; 
    }); 
}); 

tüm bu dayanak noktası yeni eklenen eleman, her özellik için bir ad özelliği vardır sağlamaktır

Bu, koleksiyonun adını ve geçerli bir dizini içerir:

 newItem.find('input').first().attr({ 
      //name: 'NuggetSources[3].Id' 
      name: 'NuggetSources[' + indexOfNewItem + '].Id' 
     }); 
     newItem.find('input[id^=Url]').attr({ 
      name: 'NuggetSources[' + indexOfNewItem + '].Url' 
     }); 

Bu olmadan, MVC kontrol ünitesinde yeni öğeler göz ardı edilir.

Bu çözüm yalnızca yeni satırlar ekleyerek kolları. Sınamalar için, indeksleme önemli olduğundan, bir çözüm sunucuya bir silme isteğini kovmak ve sonra listeyi yeniden yüklemek ya da js içindeki mevcut endeksleri düzeltmektir.