ASP.NET MVC3 - Tự động thêm một mục vào mảng trên đối tượng

Question

Tôi đang làm việc trên trang web nơi người dùng có thể điền vào biểu mẫu mở rộng động.

tôi sẽ thêm một hàng với các lĩnh vực màu xám và khi người dùng đưa ra tập trung vào một trong những lĩnh vực này javascript sau đây sẽ thêm dòng

<tr class="unSelected"> 
    <input name="id[]"> 
    <input name="blabla[]"> 
</tr> 

$('.unSelected').focusin(function() { 
    if ($(this).hasClass('unSelected')) { 
    var row = $(this).clone(true); 
    $(this).after(row); 
    $(this).removeClass('unSelected'); 
    } 
}); 

nhưng làm thế nào người ta sẽ làm điều này sử dụng dao cạo và asp.net , vì các đồ vật sẽ không được tự động phát hiện?

Answer 1

Trong ASP.NET MVC, nếu bạn có một lớp mô hình như:

public class PageModel 
{ 
    public Collection<RowItem> RowItems { get; set; } 
} 

public class RowItem 
{ 
    public int Id {get;set;} 
    public string MoreFields { get; set; } 
} 

Và javascript của bạn thêm dòng như vậy:

<script type="text/javascript"> 
    var currentRowIndex = 0; 

    $(document).ready(function() { 
     SetFocusEventForInputs('unSelected0'); 
    }); 

    function SetFocusEventForInputs(className) { 
     var inputSelector = '.' + className; 

     $(inputSelector).focusin(function() { 
      AddNewRowTo(this); 
      $(inputSelector).unbind('focusin').removeClass(className); 
     }); 
    } 

    function AddNewRowTo(sendingInputField) { 
     currentRowIndex++; 
     var className = 'unSelected' + currentRowIndex; 
     var collectionNamePrefix = 'RowItems[' + currentRowIndex + '].'; 

     var idField = $('<input/>').attr('name', collectionNamePrefix + 'Id').attr('type', 'text').attr('class', className); 
     var moreFields = $('<input/>').attr('name', collectionNamePrefix + 'MoreFields').attr('type', 'text').attr('class', className); 

     var cell = $('<td></td>').append(idField).append(moreFields); 
     var row = $('<tr></tr>').append(cell); 

     $(sendingInputField).parents("tr").after(row); 

     SetFocusEventForInputs(className); 
    } 
</script> 
<table> 
    <tr> 
     <td> 
      <input name="RowItems[0].Id" type="text" class="unSelected0" /> 
      <input name="RowItems[0].MoreFields" type="text" class="unSelected0" /> 
     </td> 
    </tr> 
</table> 

Mô hình mặc định chất kết dính trong MVC nên giải quyết nó tốt khi nó được đăng

[HttpPost] 
public ActionResult YourPostActionHere(PageModel model) 
{ 
    var count = model.RowItems.Count(); 
    etc... 
} 

Answer 2

Bạn có thể làm điều đó theo cùng một cách, bởi vì trong ví dụ mã trên, bạn đang sử dụng jQuery cũng được hỗ trợ (tất nhiên) với ASP.NET MVC.

Có lẽ tôi không hiểu bạn, nhưng tôi không thấy bất kỳ mã PHP nào trong ví dụ mã ở trên.

Answer 3

những gì bạn muốn làm là một kịch bản phía khách hàng không phụ thuộc vào PHP hoặc Asp.Net do đó, nó không quan trọng những gì mã của bạn được viết bởi. điều này sẽ làm việc trong Asp.Net mvc quá.

nếu bạn muốn thu thập dữ liệu điều khiển mới để sử dụng nó ở phía máy chủ, bạn có thể thu thập nó bằng JavaScript và gán nó vào trường ẩn có thể được truy cập ở phía máy chủ. bạn có thể sử dụng một trường ẩn bằng cách lưu các giá trị trong một chuỗi và phân tách bằng dấu phân tách bất kỳ.

Answer 4

Bạn có thể chỉ thiếu thẻ tập lệnh không? Giống như những người khác nói, javascript là nền tảng độc lập.

<tr class="unSelected"> 
    <input name="id[]"> 
    <input name="blabla[]"> 
</tr> 

<script src="/Scripts/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $().ready(function() { 
     $('.unSelected').focusin(function() { 
      if ($(this).hasClass('unSelected')) { 
       var row = $(this).clone(true); 
       $(this).after(row); 
       $(this).removeClass('unSelected'); 
      } 
     }); 
    }); 
</script>