20三月/112

如何動態產生欄位和 ASP.Net MVC 資料繫結

前言

工作上遇到一個需求是動態產生欄位，並且可以正確接收到資料。動態產生欄位部分，有很多種方式，我採用了 jQuery Templates 來完成這需求，至於接收資料部分只需要利用 ASP.Net MVC 的資料繫結方式就可以幫我們轉成我們要的資料型態，可以讓後續處理上更加容易囉。

實作

首先定義我們的 Model：

public class SchoolData
{
    public string SchoolName { set; get; }
    public string Department { set; get; }
}

public class SchoolData

{

public string SchoolName { set; get; }

public string Department { set; get; }

}

接下來是 Controller 中要接收資料的 Action：

[HttpPost]
public ActionResult SchoolList(List<SchoolData> SchoolDatas)
{
    return View(SchoolDatas);
}

[HttpPost]

public ActionResult SchoolList(List<SchoolData> SchoolDatas)

{

return View(SchoolDatas);

}

最後就是 View 的設計，因為我們用到了 jQuery Templates 這一個 Plugin ，這是由微軟為 jQuery 所開發的一個 Plugin 之前曾有傳言會直接放到 jQuery 裡面，但是最新版的似乎並還沒有打算放進去，因此我們得掛上 Plugin 的 js 檔案，而微軟也有提供 CDN 方便我們來引用：

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

微軟提供了兩個，一個是有精簡過的 min 版，看個人喜好自行引用囉！因為之後也會用到 Ajax，所以也順便掛上 Ajax 用的 js 檔案，最後也別忘記掛上 jQuery 的 js 檔案喔！

<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

接下來先設計我們要動態產生的欄位樣版，其中 ${index} 是未來我們要用資料來取代的部份，名稱設定為 index，此外還有一個隱藏欄位名稱為 SchoolDatas.index，SchoolDatas 是我們前面 Action 所接收的參數名稱，而值則是對應到後面 SchoolData[${index}]，如果沒有此隱藏欄位的話，要接收的欄位名稱可以使用連續的數字來處理，[0].SchoolName、[1].SchoolName...依此類推，但是我還設計了一個移除按鈕，可能會導致移除後編號不連續，這樣在接收資料的時候就會接收不完全了，所以還是採用設定索引的方式來處理，而 SchoolName 和 DepartName 就是我們在 Model 所設計的欄位。

<div id="Template" style="display: none;">
    <div id="School_${index}">
        <input type="hidden" name="SchoolDatas.index" value="${index}" />
        學校：<input type="text" name="SchoolDatas[${index}].SchoolName" /><br />
        科系：<input type="text" name="SchoolDatas[${index}].Department" />
        <input type="button" value="刪除" onclick="Remove(&#039;${index}&#039;)" /><br />
    </div>
</div>

學校：<input type="text" name="SchoolDatas[${index}].SchoolName" /><br />

科系：<input type="text" name="SchoolDatas[${index}].Department" />

</div>

再來則是表單的部份：

<div>
    <%using (Ajax.BeginForm("SchoolList", new AjaxOptions() { UpdateTargetId = "Result" }))
        { %>
    <input type="button" value="新增" onclick="Add();" />
    <input type="submit" value="送出" />
    <div id="SchoolList">
    </div>
    <%} %>
</div>

<div>

<%using (Ajax.BeginForm("SchoolList", new AjaxOptions() { UpdateTargetId = "Result" }))

{ %>

</div>

<%} %>

</div>

最後就是 jQuery 的程式：

<script type="text/javascript">
    // 將 DIV 內容先轉成 template
    var schoolTemplate = $("#Template").template();

    function Add() {
        $.tmpl(schoolTemplate, { index: new Date().getTime() }).appendTo("#SchoolList");
    }

    function Remove(id) {
        $("#School_" + id).remove();
    }
</script>

// 將 DIV 內容先轉成 template

var schoolTemplate = $("#Template").template();

function Add() {

$.tmpl(schoolTemplate, { index: new Date().getTime() }).appendTo("#SchoolList");

}

function Remove(id) {

$("#School_" + id).remove();

}

</script>

如此一來就大功告成囉！

▲程式執行

▲動態新增欄位

▲表單送出結果

後記

ASP.Net MVC 在資料繫結上處理的很好，也為我們考慮到很多的情形，當我們表單有多選的欄位時候都可以幫我們轉換成 ICollection 型別，配合自定的 Model 類別，或是 Linq to SQL 更是可以讓我們可以快速的開發出我們要的系統，

範例下載：下載

參考資料

jQuery Templates

Model Binding To A List

標籤： ASP.Net MVC, jQuery, jQuery Templates 回覆此文章

回覆 (2) 引用 (0) ( 訂閱此篇文章的回覆 )

rex
三月 20th, 2011 - 22:14

讚喔

黯雲回應：
感恩 ^^

( 回覆 )
- 謝謝
  十一月 21st, 2011 - 22:36
  
  謝謝
  
  黯雲回應：
  不客氣 ^^
  
  ( 回覆 )

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery

如何動態產生欄位和 ASP.Net MVC 資料繫結

前言

實作

後記

參考資料

Leave a comment 取消回覆

文章彙整

文章分類

標籤

鏈結

近期文章

近期迴響

網站資訊

授權聲明