在一個頁面上跨多個表單拆分一個視圖模型

Question

我有一個ASP.NET MVC 5應用程序，它使用了MVVM的更多MVC方法：它爲實體框架模型提供了「視圖模型」（VM）。

我們的情景：

• 我們有一個VM與約7引導選項卡附帶的編輯視圖。
• 每個標籤包含自己的@using (Html.BeginForm(...)) { ... }。
• 當用戶切換選項卡時，我們使用AJAX保存其數據（如果它有效）。

我們面臨的挑戰：

的POST Edit(...)行動預計常見的隱藏形式與每個AJAX調用提交。我們最終不得不重複的隱藏字段，因爲它們可以重複每個窗體：設置一些領域，一些人的價值是獨一無二的每個表單時

@Html.HiddenFor(model => model.ChildVm.Application_No) 
@Html.HiddenFor(model => model.ChildVm.FormSubmitted) 
// other hidden fields... 

我們遇到的問題。因爲我們具有重複的ID打破HTML規則，我們必須使用一些技巧難看設置jQuery中它們的值：

// Razor helper method to fetch ASP.NET ID for control 
var formSubmittedId = '@Html.ClientIdFor(m => m.ChildVm.FormSubmitted)'; 

// Tab change handler 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var form = $(e.relatedTarget).attr('href'); 
    var formId = $(e.relatedTarget).attr('href').replace('#', ''); 
    var previousTab = $(form + '-form'); 
    $(previousTab).find('#' + formSubmittedId).val(formId); 
    //.... 
}); 

上述作品，但它的醜陋。如何在同一個CSHTML上的多個表單中包含來自同一視圖模型的表單字段，而不會有重複的ID？如果我給這些字段使用不同的ID，那麼不會中斷Edit的POST操作，該操作使用客戶端的ID將它們與視圖模型服務器端各自的屬性進行匹配？

謝謝。

Answer 1

表單回傳其成功表單控件的名稱/值對，而不是其id屬性的值。 id屬性的唯一目的是在javascript/jquery和css選擇器中使用。

爲了防止無效的HTML（重複id attrbutes），你一個剛刪除屬性使用（無需醜陋腳本）

@Html.HiddenFor(model => model.ChildVm.Application_No, new { id = "" }) 

然而，在一般情況下，你應該避免在您的視圖隱藏的輸入（除了那些與您的記錄ID相關的記錄，儘管該值可以更好地作爲路由值添加到您的記錄中）。如果您需要POST方法中其他隱藏輸入的值，則應該根據ID再次獲取您的記錄。

如果由於某種原因，你需要在每個阿賈克斯後張貼回所有這些附加價值，更好的解決方案是唯一一個單獨的<form>元素中曾經包括輸入和使用.serialize()方法來組合值，例如

<form id="hiddeninputs"> 
    @Html.HiddenFor(model => model.ChildVm.Application_No) 
    .... // other hidden inputs 
<form> 
@using (Html.BeginForm(....)) 
{ 
    .... // form controls for 1st tab 
} 
@using (Html.BeginForm(....)) 
{ 
    .... // form controls for 2nd tab 
} 

，然後在腳本中發佈形式

$('form').submit(function() { 
    var formdata = $(this).serialize() + '&' + $('#hiddeninputs').serialize; 
    $.ajax({ 
     .... 
     data: formdata, 
     .... 
    }); 
    return false; // cancel the default submit 

你甚至可以完全刪除隱藏的投入，構建對象後回來

var hiddeninputs = { 
    'ChildVm.Application_No': '@Model.ChildVm.Application_No', 
    .... 
} 

並使用

var formdata = $(this).serialize() + '&' + $.param(hiddeninputs, true);