我需要從數據庫中構建一個動態表單。我有以下實體來快速定義表單字段:動態表單構建與knockoutjs
public class FormField {
public int ID { get; set; }
public string Name { get; set; }
public string Type { get; set; } // Possible values are: 'Radio','Combo','Text'. A dropdown will be created for a Combo type of element, a radio set for Radio type of element and a text input for Text type of element.
public string Options { get; set; } // Only relevant in case of Radio/Combo type
public string Default { get; set; } // Default value in case of Type 'Text' and selected value in case of Type 'Radio/Combo'
public string Blankout { get; set; }// An expression to define when this field should be hidden
}
/* A sample JSON array (from the DB) to build the form would be:
[
{ Name:"Gender", Type:"radio", Options:["Male","Female","Unknown"], Default:"Male", Blankout:"Never" },
{ Name:"Age", Type:"text", Options:"None", Default:15, Blankout:"Never" },
{ Name:"Neighbourhood", Type:"Combo", Options:["Eastern","Western","Northern","Southern","Central"], Default:"Central", Blankout:"if (Age < 40 or Voted='Obama')" },
{ Name:"Voted", Type:"Combo", Options:["Obama","Romney","Harry Potter"], Default:"Harry Potter", Blankout:"if ((Gender='Female' and Age < 15) or Neighbourhood='Eastern'" }
]
*/
我可以建立從「FormField」在數據庫記錄的動態表單,但問題是我需要跟蹤的任何表單字段的值的變化,當價值發生變化時,我需要將所有表單數據發送到服務器(異步),以便評估服務器上的「Blankout」公式。如果我在沒有KnockoutJS的情況下執行這個更改跟蹤事件,那麼它沒有響應並且變得非常複雜。 我已經通過KnockoutJS的幾個教程,但無法弄清楚如何組織我的ViewModel這個特定的問題。
任何幫助,將不勝感激。
更新1
我曾嘗試使用下面的代碼來發布此表單數據控制器:
$.ajax({
type: "POST",
url: "/MyController/GetBlankoutElements",
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(ko.toJSON(self)),
success: function(result) {
alert(result);
//self.HiddenElements(result.split(','));
}
});
在我的控制器中我曾嘗試下面的代碼:
[HttpPost]
public ActionResult GetBlankoutElements(List<MyFieldViewModel> Fields)
{
return Json(Fields); // List, Fields is null here
}
她是MyFieldViewModel類的外觀:
public class MyFieldViewModel
{
public string Title { get; set; }
public string Name { get; set; }
public string Type { get; set; }
public string Default { get; set; }
public string[] Options { get; set; }
}
我試圖在提示Post an Array of Objects via JSON to ASP.Net MVC3
描述以下是打印出當我執行警報(ko.toJSON(個體經營))
{"Fields":
[{"Title":"CCType","Name":"CCType","Type":"Radio","Default":"Enterprise","Options":["Enterprise","Express","CVP","PCCE"]},{"Title":"Industry","Name":"Industry","Type":"Combo","Default":"Banks","Options":["Banks","ServiceProvider","Outsourcer","Airlines","Utilities","Government","Retail"]},{"Title":"Customer Lab","Name":"CustomerLab","Type":"Combo","Default":"0","Options":["0","1"]},{"Title":"No of Agents","Name":"Agents","Type":"Text","Default":"if(c.CCType==\"CVP\") then 10 else 25","Options":[]},{"Title":"ExpLicType","Name":"ExpLicType","Type":"Radio","Default":"if(c.CCType==\"Express\") then \"Enhanced\" else \"None\"","Options":["None","Premium","Standard","Enhanced"]},{"Title":"Multimedia","Name":"Multimedia","Type":"Combo","Default":"WIM","Options":["None","EIM","WIM","EIM&WIM","BSMediaRouting","MCAL"]}],
"HiddenElements":[]
}
我需要的僅僅是JSON數據該字段的名稱和它的用戶選定的值,我很困惑,即使我得到這個JSON數據映射到我的MyFieldViewModel類,仍然會如何得到選定的值?
更新2(JSON數據映射工作)
當我改變
data: JSON.stringify(ko.toJSON(self))
與 數據:ko.toJSON(個體)
映射我的控制器上完美地工作,如下圖所示:
現在,問題仍然存在,發佈表單的要點是用表單上的用戶輸入更新服務器,即針對每個表單字段元素的值。 我如何發佈表單字段的當前選定/類型值? 例如,在上面的屏幕截圖中,我可以看到Default但不是當前選定的值。
非常感謝你對@Artem的這種快速回應。這回答了動態表單部分的構建。我還需要在運行時隱藏一些字段,這樣做時,我不會在AJAX請求的數據屬性中靜態鍵入元素名稱,因此我會將「所有表單數據」發佈到服務器。其次,讓服務器返回一個JSON列表,其中包含那些需要隱藏的元素的名稱。我會消失在窗體上的所有這些元素(同時取消隱藏之前隱藏的任何其他元素)。我希望你能理解我的問題。真的很感謝你的努力。 –
@Akeel - 聽起來你很接近。你可以使'Blankout'成爲一個可觀察對象,然後對每個對象使用'visible'或'if'綁定,或者創建一個代表非隱藏字段(返回一個數組)然後通過它的'foreach'的計算。當髒標誌觸發並且您的響應返回時,您可以在AJAX請求中更新每個字段上的'Blankout'可觀察值。我是否正確理解你的方案? –
@Akeel查看更新後的帖子。 –