2017-08-10 53 views
0

我們正在構建MVC多步表單,其中包含4個步驟: - 聯繫人詳細信息,車輛詳細信息,車輛圖像,車況。在每一步中,我們問一些與汽車相關的詳細信息,從用戶是這樣的:C#MVC:多步表單實現

Multi Step Form 我們必須拯救每一個步驟的信息到數據庫中,我們取得了獨立的MVC控制器,每個步驟,例如:

[HttpGet] 
[Route("contact-details/")] 
public ActionResult ContactDetails() 
{ 
    return View("~/Views/ContactDetails.cshtml"); 
} 

[HttpPost] 
[Route("contact-details/")] 
public ActionResult ContactDetails(ListingDetails listingDetails) 
{ 
    if (ModelState.IsValid) 
     //extract ContactDetails from ListingDetails and save in db 
     return View("~/Views/CarDetails.cshtml"); 
    return View("~/Views/ContactDetails.cshtml"); 
} 

[HttpPost] 
[Route("car-details/")] 
public ActionResult CorDetails(ListingDetails listingDetails) 
{ 
    if (ModelState.IsValid) 
     //extract CorDetails from ListingDetails and save in db 
     return View("~/Views/CarImages.cshtml"); 
    return View("~/Views/CarDetails.cshtml"); 
} 

[HttpPost] 
[Route("car-images/")] 
public ActionResult CarImages(ListingDetails listingDetails) 
{ 
    if (ModelState.IsValid) 
     //extract CarImages from ListingDetails and save in db 
     return View("~/Views/CarConditions.cshtml"); 
    return View("~/Views/CarImages.cshtml"); 
} 

[HttpPost] 
[Route("car-condition/")] 
public ActionResult CarCondition(ListingDetails listingDetails) 
{ 
    if (ModelState.IsValid) 
     //extract CarCondition from ListingDetails and save in db 
     return View("~/Views/ThankYou.cshtml"); 
    return View("~/Views/CarConditions.cshtml"); 
} 

的ListingDetails有以下結構:

class ListingDetails 
{ 
    public ContactDetails contactDetails; 
    public CarDetails carDetails; 
    public CarImages carImages; 
    public CarConditions carConditions; 
} 

在的接觸細節接下來單擊窗體,我們將只發送數據的第一步。 點擊Car-details表單,我們將發送step1 + step2數據。 在下一次點擊汽車圖像表單時,我們將發送step1 + step2 + step3數據。 在下一次點擊車況表單時,我們會發送step1 + step2 + step3 + step4數據。

我們發送所有先前的步驟數據以及每次下一次點擊都是因爲頂部導航。例如,用戶可以填寫step1,點擊next =>填寫step2,點擊next,從step3返回到step1並編輯一些內容。現在,用戶再次通過頂部導航進入第3步。因此,對於這種情況,我們將不得不每個請求發送完整的數據到現在爲止。

我們可以以某種方式避免每個步驟都發送所有先前的步驟數據嗎?

這是在MVC中實現多步驟表單的正確方法嗎?

+0

您是否只使用一張表來保存詳細信息或每個步驟都有單獨的表格? 如果找不到你的回答,請告訴我更多解釋。[http://www.binaryintellect.net/articles/9a5fe277-6e7e-43e5-8408-a28ff5be7801.aspx]你的項目的不同之處在於你想用數據庫保存數據,而不是使用會話 –

+0

每一步的數據都必須保存在新表 – maverick

+0

@AliZeinali:這沒有幫助,因爲我不想爲此使用會話存儲因爲表單的長度太長 – maverick

回答

-1

在最後一步發送數據到服務器會更好。在此之前,該視圖只需點擊按鈕或點擊標籤即可。

1

解決方案1 ​​

我看到這一點,你可以簡單地保存在數據庫中的每一個步驟,避免發送第一步和第二步在步驟3

實例的方式:

第一步:填寫細節,保存到數據庫並返回一個GUID。 使用此guid作爲整個查詢的參考。

第2步完成保存到數據庫與給定的GUID,但也與一個枚舉指示你在哪裏查詢(汽車例如)。

如果你退後一步,你知道你正在處理什麼查詢,因爲你有你獨特的指導,你只需發送枚舉作爲第二個參數,你會回到那個步驟的desiered數據。如果你沒有登錄,那麼如果用戶退出瀏覽器並且在完成數據庫清理的計劃任務之前不回來,那麼有一些數據庫清理是一個好習慣。即使使用登錄,這也是很好的選擇,但登錄後用戶可以回到以前的狀態。

解決方案2

如果由於某種原因,你不想按照上述 您可以保存在瀏覽器中的數據,如果您使用的Ajax請求,而不是重新加載頁面,你可以把它保存在對象並在每次下一個/返回點擊並通過腳本呈現數據後檢查它們是否有數據。我不推薦這種方法,因爲如果頁面重新加載並且腳本很重,則可能會丟失數據。

解決方案3

也cuuld使用MVC的TempData,有關here 作品更多信息對於給定的請求,並在你的情況,你會不斷地需要,直到正在添加請求之間分配 數據到finalysing步。

我推薦解決方案1,但如果您想嘗試其他方法,我希望我已經給您一些幫助。