2010-04-30 46 views
4

我有一個非常簡單的數據輸入表單來實現。它看起來像這樣:在ASP.NET MVC 2中實現以下輸入表單的想法

alt text http://i40.tinypic.com/2a9pojq.gif

很顯然,我已經嘲笑了實際需求,但本質上是相似的。

  • 輸入一個名稱,然後單擊歷史應該彈出一個彈出指向URL「/學生/ viewhistory/{名}」
  • 姓名和年齡是必填字段
  • 子表(在(包含數字1 - > 10的下拉菜單)和主題(包含A - > D,例如)構成一個獨特的需要評分的值對。因此,選擇課程和科目,輸入分數並單擊添加應該爲該學生添加該記錄。然後,用戶應該能夠點擊保存(將該條目保存到數據庫)或者能夠添加更多(類,主題,分數)對到條目。

任何想法如何巧妙地實現這一點? (我來自DWH領域......所以以無狀態的方式思考對我來說略顯陌生。)任何幫助都是值得讚賞的。

我會想象一個智能使用jQuery會給出一個簡單的解決方案。

問候, 卡蘭

+0

只是爲了給出一點背景......我已經設置了域模型,存儲庫,並設置了IoC(使用Ninject 2.0) 只需要讓我的頭部繞過此表單即可。在我繼續前進並自己實施之前,我想確保我正朝着正確的方向前進。 Karan – kidoman 2010-04-30 10:19:28

+2

+1爲您的示例圖像中使用的字體;) – meo 2010-04-30 10:25:35

+0

heh :)剛剛打開mspaint快速模擬:P:P – kidoman 2010-04-30 10:27:04

回答

1

確定,在這種情況下我會告訴你我是如何做到這幾個機會: 首先我把jQuery的內部一個div空字段是這樣的:

$("#add").click(function() { 
    $("#classes").append($(
    "<div>" 
    +" <select name='Student.Classes[0].Class'>" 
    +"  <option value='1'>Class 1</option>" 
      .... 
    +" </select>" 
    +" <select name='Student.Classes[0].Subject'>" 
    +"  <option value='1'>Subject 1</option>" 
      .... 
    +" </select>" 
    +" <input name='Student.Classes[0].Score' value='0'/>" 
    +"</div>" 
    ) 
);}); 

當單擊id #add的內容時,該div將被添加到類的列表中。

接下來,我在提交前捕獲表單併爲每個實體(本例中的Student.Classes)提供從0開始的索引。就像這樣:

$("form").submit(function() { 
     $("div", "#classes").each(function (i) { 
      $(":input, :hidden", this).each(function() { 
       $(this).attr("name", $(this).attr("name").replace(/\[0\]/, "[" + i + "]")); 
      }); 
     }); 
    }); 

如果您使用的是支持子實體這應該結束了,學生中的類的列表服務器上的ModelBinder的。當然,您可以使用螢火蟲來準確查看發佈到服務器的內容。

希望這給了一些方向。

+0

通過連接JS字符串構建HTML ...不是我會推薦的。當然,jQuery可以拉入現有的輸入並根據需要連線它們? – 2010-05-11 22:54:02

+0

@bmoeskau 我同意,但這不是這裏的主要問題。以模型聯編程序可以轉換爲子實體的方式依次獲取所有輸入設置是棘手的部分。 – 2010-05-12 06:58:00

+0

我已將此標記爲答案,因爲這將我推向了正確的方向。我使用了部分請求來從服務器中提取預先構建的HTML(基於索引變量)。 – kidoman 2010-05-31 10:08:57

0

這可能是一個有點矯枉過正,但你最有可能從學習應用基礎和腳手架受益。我會從這裏開始http://sharparchitecture.net/。 一旦你的基本應用程序設置您可以使用jQuery與插件一起類似

  • jQuery的形式

  • jQuery驗證

處理表單到提交。 有很多插件可以幫助彈出窗口。

如何提交任意數量的子實體(如您的示例中的學生類)實際上是您的特定服務器端實現的問題。這可以通過s#arp架構來完成,但需要在提交之前對錶單進行一些調整。

歡迎來到無形狀態的網絡世界!和好運氣, 大衛

+0

嗨,感謝您的答覆。 到目前爲止,我有域模型,存儲庫等設置。然而,在這個特定頁面上有一點困難。 任何特定的解決方案想法都會受到歡迎。 – kidoman 2010-04-30 10:10:48