Cách thêm các mục vào mô hình MVC trong javascript?

Question

Tôi muốn thêm các mục vào danh sách trong mô hình của mình theo kiểu động với tập lệnh java. Làm thế nào tôi có thể làm cho MVC ràng buộc mục mới vào mô hình?

mô hình của tôi:

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; } 
} 

Quan điểm của tôi, trong đó sử dụng một nhà để xe như mô hình:

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

Và CarView của tôi trong đó sử dụng một xe như mô hình:

<div class="carRow">    

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

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

Khi thêm một chiếc xe mới, tôi sử dụng một cuộc gọi AJAX, và thêm nó vào html. AJAX sử dụng phương pháp này trong điều khiển:

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

My java script ajax gọi:

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

này ám chỉ rằng html độc đáo, nhưng nó không thêm xe vào danh sách các xe ô tô.

Làm cách nào để thực hiện điều này?

Answer 1

Bạn có thể xem qua số following article trong đó Steven Sanderson cung cấp hướng dẫn từng bước về cách triển khai điều này.

Answer 2

theo jQuery plugin này, được thiết kế đặc biệt để thêm phụ tố khách hàng mới trong phần chi tiết của giao dịch

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

Answer 3

tôi nhận ra rằng đây là một câu hỏi cũ, nhưng sau khi thử các gợi ý ở trên tái Steven Sanderson's BeginCollectionItem, và một số giải pháp tiềm năng khác, tôi đã không nhận được rất xa (mục mới sẽ không đăng). BeginCollectionItem có vẻ như là một giải pháp tốt trong lý thuyết, nhưng nó sẽ không đăng các mục mới, và nó có các hiệu ứng bất ngờ về định dạng các mục danh sách.

Giải pháp làm tăng đáng ngạc nhiên đơn giản và không yêu cầu bất kỳ thư viện bên ngoài nào (ngoài JQuery). Điều này làm việc cho tôi trong ASP.NET MVC5.

1. Tạo mẫu trình chỉnh sửa cho mục hàng.

đường dẫn: Views/Shared/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. Sử dụng mẫu ở trên (chạy sau thông qua bộ sưu tập và tạo ra html cho từng hạng mục):

Theo quan điểm của tôi:

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

3. Khi người dùng nhấp vào nút 'thêm hàng' ('addSourceBtn' trong mã của tôi bên dưới), tôi sử dụng ajax để lấy html cho mẫu.

MVC phương pháp điều khiển get:

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

js handler:

$(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; 
    }); 
}); 

Các lynchpin trong tất cả điều này là để đảm bảo rằng các yếu tố mới được chèn có một thuộc tính tên cho mỗi tài sản bao gồm tên của bộ sưu tập và chỉ mục hợp lệ:

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

Nếu không có điều này, các mục mới sẽ bị bỏ qua trong bộ điều khiển MVC.

Giải pháp này chỉ xử lý việc thêm hàng mới. Để xóa, vì việc lập chỉ mục là quan trọng, một giải pháp là kích hoạt yêu cầu xóa tới máy chủ và sau đó tải lại danh sách hoặc chỉ sửa các chỉ mục hiện có trong js.