2011-06-01 68 views
5

我正在一個網站上,用戶應該能夠填寫一個動態擴展窗體。ASP.NET MVC3 - 動態添加項目到對象上的數組

我想補充一排灰色的領域,當用戶給出聚焦到這些領域之一下面的JavaScript將增加線路

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

但如何將一個做到這一點使用剃刀和asp.net ,因爲物體不會自動生成呢?

回答

3

在ASP.NET MVC,如果你有一個模型類,如:

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

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

而JavaScript添加行,像這樣:

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

在MVC的默認模式粘結劑應解決它就好了,當它張貼

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

謝謝,這真是太棒了! – 2011-06-03 09:58:13

0

你可以這樣做,因爲在上面的代碼示例中,你正在使用jQuery,當然也支持ASP.NET MVC。

也許我不明白你,但我沒有看到上面的代碼示例中的任何PHP代碼。

+0

我可能會一直不好解釋 在php中,我會做類似 $ objWithArray = new objWithArray(); $ i = 0; ($ set [($ _ POST [「id」] [$ i])){ $ obj = new obj($ _ POST [「id」] [$ i]); $ objWithArray-> addObj($ obj); $ i ++; } 但在asp.net可以做 [HttpPost] 公衆的ActionResult方法(ObjWithArray德){} 這要是字段命名爲正確會自動添加它們。 你現在明白嗎? :/ – 2011-06-01 10:43:02

0

你想要做的是不依賴於PHP或Asp.Net的客戶端腳本,因此無論你的代碼是由什麼編寫的。這也應該在Asp.Net mvc中工作。

如果您想要收集新的控制數據以在服務器端使用它,您可以通過JavaScript收集它並將其分配到可以在服務器端訪問的隱藏字段中。您可以通過將值保存在一個字符串中並使用任何分隔符分隔來使用一個隱藏字段。

+0

是的,但然後我將不得不通過手動訪問字段生成對象服務器端,我的想法是要避免 – 2011-06-01 09:48:21

0

你可能只是缺少腳本標籤?像其他人說的那樣,javascript是平臺獨立的。

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