[英]Knockout with MVC3: Knockout Model won't post collection data?
答案:替換這一行:
self.identifiers.push(new Identifier(self.identifierToAdd(), self.selectedIdentifierTypeValue()));
有了這條線:
self.identifiers.push({ Key: self.identifierToAdd(), Value: self.selectedIdentifierTypeValue()});
郵件請求現在正確地發送收集數據。 然而,這並沒有解決MVC行動沒有收到它的事實,但這個問題已經足夠大了。
在發布到動作時,我似乎無法將我的模型的集合屬性中的數據從敲除中獲取到我的MVC模型中。 如果我從下面警告ko.toJSON
我的identifiers()
屬性它會正確顯示所有數據,但是當我嘗試通過正常回發提交該數據時(該操作只需要下面的EquipmentCreateModel),它看起來像這樣:
標識符是空的,當我查看標識符的ModelState錯誤時,它表示它cannot convert String to Dictionary<Guid, string>
。 我究竟做錯了什么? 我認為MVC3會自動將JSON轉換為對象(如果可以的話),就像它對BuildingCode
和Room
屬性一樣嗎?
另外為什么上面圖片中的字符串數據已經轉義了引號?
編輯:如果我查看帖子數據,標識符顯示為空數組( identifiers: [{}]
)。 我在save方法中嘗試過jsoning標識符,如下所示:
self.identifiers = ko.toJSON(self.identifiers());
這會導致請求數據不為空,如下所示:
identifiers:"[{\"Value\":\"sdfsd\",\"Key\":\"4554f477-5a58-4e81-a6b9-7fc24d081def\"}]"
但是,當我調試操作時會出現同樣的問題。 我也嘗試了jsoning整個模型(如knockoutjs中提到的ko.utils.postJson問題提交 ):
ko.utils.postJson($("form")[0], ko.toJSON(self));
但是這會產生一個.NET錯誤,指出Operation is not valid due to the current state of the object.
從查看請求數據看起來它是JSON-ified兩次,因為每個字母或字符在HttpCollection中都是它自己的值,這是因為.NET默認只允許1000個最大值( 由於當前的操作,操作無效)回發期間對象'錯誤的狀態 )。
使用$ .ajax方法提交數據,一切正常:
$.ajax({
url: location.href,
type: "POST",
data: ko.toJSON(viewModel),
datatype: "json",
contentType: "application/json charset=utf-8",
success: function (data) { alert("success"); },
error: function (data) { alert("error"); }
});
但由於其他原因,我不能使用$ .ajax方法,所以我需要它在正常的帖子中工作。 為什么我toJSON
整個視圖模型在Ajax請求和它的作品,但在正常的回發它拆分它,當我不這樣做,所有的報價都在發送的JSON逃脫。
這是我的ViewModel:
public class EquipmentCreateModel
{
//used to populate form drop downs
public ICollection<Building> Buildings { get; set; }
public ICollection<IdentifierType> IdentifierTypes { get; set; }
[Required]
[Display(Name = "Building")]
public string BuildingCode { get; set; }
[Required]
public string Room { get; set; }
[Required]
[Range(1, 100, ErrorMessage = "You must add at least one identifier.")]
public int IdentifiersCount { get; set; } //used as a hidden field to validate the list
public string IdentifierValue { get; set; } //used only for knockout viewmodel binding
public IDictionary<Guid, string> Identifiers { get; set; }
}
然后我的淘汰腳本/ ViewModel:
<script type="text/javascript">
// Class to represent an identifier
function Identifier(value, identifierType) {
var self = this;
self.Value = ko.observable(value);
self.Key = ko.observable(identifierType);
}
// Overall viewmodel for this screen, along with initial state
function AutoclaveCreateViewModel() {
var self = this;
//MVC properties
self.BuildingCode = ko.observable();
self.room = ko.observable("55");
self.identifiers = ko.observableArray();
self.identiferTypes = @Html.Raw(Json.Encode(Model.IdentifierTypes));
self.identifiersCount = ko.observable();
//ko-only properties
self.selectedIdentifierTypeValue = ko.observable();
self.identifierToAdd = ko.observable("");
//functionality
self.addIdentifier = function() {
if ((self.identifierToAdd() != "") && (self.identifiers.indexOf(self.identifierToAdd()) < 0)) // Prevent blanks and duplicates
{
self.identifiers.push(new Identifier(self.identifierToAdd(), self.selectedIdentifierTypeValue()));
alert(ko.toJSON(self.identifiers()));
}
self.identifierToAdd(""); // Clear the text box
};
self.removeIdentifier = function (identifier) {
self.identifiers.remove(identifier);
alert(JSON.stringify(self.identifiers()));
};
self.save = function(form) {
self.identifiersCount = self.identifiers().length;
ko.utils.postJson($("form")[0], self);
};
}
var viewModel = new EquipmentCreateViewModel();
ko.applyBindings(viewModel);
$.validator.unobtrusive.parse("#equipmentCreation");
$("#equipmentCreation").data("validator").settings.submitHandler = viewModel.save;
視圖:
@using (Html.BeginForm("Create", "Equipment", FormMethod.Post, new { id="equipmentCreation"}))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Location</legend>
<div class="editor-label">
@Html.LabelFor(model => model.BuildingCode)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.BuildingCode, new SelectList(Model.Buildings, "BuildingCode", "BuildingName", "1091"), "-- Select a Building --", new { data_bind = "value:BuildingCode"})
@Html.ValidationMessageFor(model => model.BuildingCode)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Room)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.Room, new { @class = "inline width-7", data_bind="value:room"})
@Html.ValidationMessageFor(model => model.Room)
</div>
</fieldset>
<fieldset>
<legend>Identifiers</legend>
<p>Designate any unique properties for identifying this autoclave.</p>
<div class="editor-field">
Add Identifier
@Html.DropDownList("identifiers-drop-down", new SelectList(Model.IdentifierTypes, "Id", "Name"), new { data_bind = "value:selectedIdentifierTypeValue"})
@Html.TextBox("identifier-value", null, new { @class = "inline width-15", data_bind = "value:identifierToAdd, valueUpdate: 'afterkeydown'" })
<button type="submit" class="add-button" data-bind="enable: identifierToAdd().length > 0, click: addIdentifier">Add</button>
</div>
<div class="editor-field">
<table>
<thead>
<tr>
<th>Identifier Type</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<!-- ko if: identifiers().length > 0 -->
<tbody data-bind="foreach: identifiers">
<tr>
<td>
<select data-bind="options: $root.identiferTypes,
optionsText: 'Name', optionsValue: 'Id', value: Key">
</select>
</td>
<td><input type="text" data-bind="value: Value"/></td>
<td><a href="#" class="ui-icon ui-icon-closethick" data-bind="click: $root.removeIdentifier">Remove</a></td>
</tr>
</tbody>
<!-- /ko -->
<!-- ko if: identifiers().length < 1 -->
<tbody>
<tr>
<td colspan="3"> No identifiers added.</td>
</tr>
</tbody>
<!-- /ko -->
</table>
@Html.HiddenFor(x => x.IdentifiersCount, new { data_bind = "value:identifiers().length" })<span data-bind="text:identifiers"></span>
@Html.ValidationMessageFor(x => x.IdentifiersCount)
</div>
</fieldset>
<p>
<input type="submit" value="Create" />
</p>
}
我想我已經找到了問題或者至少縮小了問題的范圍。 可編輯的網格示例使用簡單的js對象來表示禮物。 您正在使用帶有子可觀察對象的Identifier對象。 似乎如果我們更新網格示例以使用更復雜的類型,它也會以與示例相同的方式中斷。 這可能是設計或錯誤。
我認為唯一的解決方案是編寫自己的映射函數來提交表單。
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.