iT邦幫忙

0

轉到ASP.NET MVC後,菜單應該怎麼寫?

--- 2014-01-27 16:48:488600 瀏覽

先說明一下系統畫面&功能
上半段有1個TextBox、2個DropdownList、1個Button(加入點菜)
下半段有1個GridView、1個Button(送出菜單)
Textbox輸入桌號
2個DropdownList選擇飲料名稱及數量
Button加入點菜,按下後GridView即時動態變更
GridView本身第一欄就是刪除
Button送出菜單則是會把Textbox的桌號+GridView內容寫到DB裡

這在ASP.NET很簡單
直接開一個ViewState把GridView內容記下來再Bind上去顯示
每次加入菜單或刪除菜單內容PostBack後就去修改ViewState就好
送出表單後要抓取也很簡單
Textbox.Text 抓桌號 (ViewState["菜單"] As List<菜單>) 抓菜單

可是現在我轉到ASP.NET MVC,全部改用ViewModel

public class FoodForm
{
public string DeskNumber {get;set;}
public List&lt;Food> FoodList {get;set;}
}

public class Food
{
public string FoodName {get;set;}
public int FoodNumber {get;set;}
}

但是卻想不到Action要如何接收 List<Food> 才對
或是說,在頁面上應該用甚麼元件去 post List資料?
希望知道答案的人教學一下,謝謝。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

4
eric3917
iT邦新手 5 級 ‧ 2014-02-01 11:53:39

在asp.net MVC 中,你必須在點菜的時候,每案一次點菜就post回資料庫,在render出來你的 List<Food>,因為這是Server Side,你每個頁面的變動都是由Server 端去產生的!

當然,如果想在Client Side 完成所有點餐動作,再POST List回去也可以,不過這就要借助一些js、jQuery等Front End 技術去完成了,可以再搭配 Asp.Net Api 或者用MVC 的 Action 去接資料都可以的。

anyway,學習asp.net mvc,要先分清楚前後端,把ASP.NET Web Form 所特有的 View State、Post Back 的觀念拋棄,加強一些HTML網頁概念,才會學得快唷。

我也是初學者一枚,若有錯誤見解,就抱歉嚕唷^^

2
yuanshang
iT邦新手 4 級 ‧ 2014-02-10 14:32:27
&lt;pre class="c" name="code">
// 我也沒試過用 MVC post a list from a view to an action for it to get that list
// 不過你可以試試用 array 傳 Food, 配合單一 DeskNumber 
// 在 contoller 依次建立 object of FoodTable entry. I guess your table schema is:
// DeskNumber, FoodNumber, FoodName and else?
// 這只是我單純思考下的東西,並未實作與測試,您可參考使用

// The Controller
[HttpPost]
public ActionResult Create(Food[] item, string deskNumber)
{
   if (ModelState.IsValid)
   {
      foreach (var i in item)
      {
         var foodform = new FoodForm();
         {
            DeskNumber = deskNumber,
            Food.FoodName = i.FoodName,
            Food.FoodNumber = i.FoodNumber
         };

         db.FoodForm.Add(foodform);
                    
       }
       
       db.SaveChanges();
       return YourSuccView();
    }
    return TheErrorView();
}

// The View
@model List&lt;YourModelNameSpace.Food>

// @using (Html.BeginForm())...
&lt;input type="text" name="DeskNumber">
@{
   var item = Model.ToArray();
   var index = NumberOfYourFood; // if dynamic, use jQuery to add rows...   
}
// Strongly Typed way
// 未格式化 data
@for (int i = 0; i &lt; index; i++)
{   
   @Html.DisplayFor(m => item[i].FoodName)
   @Html.TextBoxFor(m => item[i].FoodName)
            
   @Html.DisplayFor(m => item[i].FoodNumber)
   @Html.TextBoxFor(m => item[i].FoodNumber)
}
// Your Send button and others...

hope it helps a bit...

--- iT邦新手 5 級 ‧ 2014-02-11 11:11:29 檢舉

先謝謝你的回應
但是我使用這個方法做的話
只能夠更新 FoodForm 的值(包含 FoodForm.FoodList 的值)
沒辦法動態增加 FoodList 的數量
那就不符合菜單的功能
單一 Model 時用 MVC 對應簡單
可是遇上這種不特定筆數的 List 就不知道該怎麼做了
轉用 MVC 感覺真的不容易@@

eric3917 iT邦新手 5 級 ‧ 2014-02-12 09:51:41 檢舉

其實要連 foodList 一起 update 是可以的! 不過還是一樣 建議使用JS去做前台更新,在送出時才回Server 端 做整個的更新。

回到你的問題上,這時候請用 "ViewModel" 去做多model 對應的問題!
所謂的 ViewModel 就是專門為了View 的呈現而自訂的model。
類似這樣

&lt;pre class="c" name="code">//ViewModel
public class FoodViewModel
{
      public List&lt;FoodList> foodList {get;set;}
      public List&lt;FoodForm> foodForm {get;set;}
}

//View
@model FoodViewModel

大致就這樣拉@@~(範例很爛...我知道..)
可以網路上搜尋ViewModel,應該就會有很多這種一次綁定多個Model,來呈現頁面的資訊了,或者使用VIewBag 來做也可以,但是就比較不建議了!!容易讓畫面變很雜~~~

外獅佬 iT邦大師 1 級 ‧ 2014-09-24 01:06:18 檢舉

MVC...怎麼不考慮用ajax去實現

我要發表回答

立即登入回答