6

次の ASP.NET MVC 4 の入れ子になったビュー モデルのノックアウトを実装する方法について頭を悩ませることができません。

public class MyProfile
{
  public string Name { get; set; }

  public IList<VM1>   List1    { get; set; }
  public IList<VM2>   List2    { get; set; }
  ....
  public IList<VM10>  List10    { get; set; }
}
// example of VM view model
public class VM1
{
   IList<Label> Labels { get; set; }
   IList<Contact1> Contact1 { get; set; }
}

ビューでは、次のようなモデルを受け入れます。

@model MyProfile

@using (Html.BeginForm("Index", "Profile", FormMethod.Post, new { id = "profileEditorForm" }))
{

  @Html.ValidationSummary(false)
    <fieldset>
  <legend>User's data</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" class="required" data-bind="value: Name"/>
    </fieldset>

 @Html.EditorFor(m => @Model.List1, "List1") @* Editpr model for List1*@
 @Html.EditorFor(m => @Model.List2, "List2")
 .....
 @Html.EditorFor(m => @Model.List10, "List10")

 <p>
   <input type="submit" value="Save" data-bind="enable: (List1().length > 0) && (List2().length > 0) && ...(List10().length > 0)" />
<a href="/">Cancel</a>
 </p>
}

の EditorTemplate は次のList1ようになり、複数の質問が次のようになります。

@model IList<FiveW.ViewModels.List1>

<fieldset>

  <table>
    <tbody data-bind="foreach: Contact1">
      <tr>
        <td>
          <label>Email:</label></td>
        <td>
          @* How do you put combobox here with labels here?
          How do you tie selected label to selected property on your Contact1 object *@
          @*<select data-bind="options: Labels, optionsText: 'LabelName', value: selectedLabel, optionsCaption: 'Choose...'"></select></td>
        <td>
          <input type="text" data-bind="value: Name, uniqueName: true" class="required" /></td>
        <td>
          <a href="#" data-bind="click: function() { viewModel.removeContact1(this); }">Delete</a></td>
      </tr>
    </tbody>
  </table>


  <button data-bind="click: addContact1">Add Contact1</button>

</fieldset>

編集

VM1 から VM10 までは、検証ロジックを除いて同じであるため、それらを異なるクラスにする必要があります (残念ながら、モデルとビューで大量の繰り返しがあるため)。

クライアント側 - これが私が求めていることです: ネストされたリストを含む ASP MVC モデルから渡し、それらをノックアウトでクライアントに提示する必要があります (動的リストに関しては、それが最も効果的であることがわかりました)。これは、Gmail の連絡先に似たものです。自宅/職場/携帯電話/FAX の電話があるため、1 つのリストは電話のラベル (どの電話か) であり、コンボボックスとして表示する必要があります。もう 1 つは、増加できる電話の動的リストです。ユーザーのクリックごとに。

編集を終了

  1. このネストされたモデルからノックアウト viewModel を作成する方法がわかりません。明らかに名前はその一部である必要がありますが、残りはリストであり、リストも含まれています。

  2. どのようにマッピングするのですか？

  3. それをどのように処理するか (1 つは、長さが可変である他のリストのラベルとなるドロップダウン リストに入ります - ここでノックアウトを使用する唯一の理由です)。

  4. 記入したら、すべてをまとめてコントローラーアクションに戻す方法は?

  5. ラベルが名前のラベルのドロップダウンリスト (またはコンボボックス) である場合のエディター モデルの書き方 (例: [ラベル]自宅/職場 [名前]電子メール、[ラベル]携帯/自宅/車 [名前]電話)

IList中身のある単純なクラスなら、こんな感じ。問題は、リスト内にリストがあることです.Knockoutは、すべてが観察可能であることを要求します.Javaスクリプトでこのネストモデルを表現する方法がわからない.

助けてください。前もって感謝します！

4

2 に答える 2

0

マッピングは使いません。ViewModel クライアント側を次のように宣言するだけです。

//I'm asuming the properties for Label and Contact, this is just for example purposes
function LabelViewModel(){
    var self = this;
    self.LabelName = ko.observable();
}
function Contact(){
    var self = this;
    self.Name = ko.observable();
    self.LastName = ko.observable();
}

//This is the definition for the List. I believe it shouldn't matter that the class names are different as long as the structure is the same
function ListViewModel(){
    var self = this;
    self.Labels = ko.observableArray();
    self.Contacts = ko.observableArray();
}

function MainViewModel(){
    var self = this;
    self.Name = ko.observable();
    self.List1 = ko.observableArray();
    //....
    self.List10 = ko.observableArray();
}


$(document).ready(function(){
    var viewModel = new MainViewModel(@Html.Raw(JsonConvert.SerializeObject(Model)));
    ko.applyBindings(viewModel);
});

次に、送信時に、http 投稿を直接行うのではなく、jquery から送信しようとします。

var viewModelJs = ko.toJS(ko.utils.unwrapObservable(viewModel));
var parameters = JSON.stringify({vm: viewModelJs});

$.ajax('http://yourControllerUrlHere', {
    data: parameters,
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    success: function (result) {
        console.log('Submitted ok');
    },
    error: function (error) {
        console.log(error);
    }
});
于 2013-03-05T18:30:19.287 に答える
0

ここのような一般的な質問をするのではなく、私が抱えていた問題を特定するために質問を言い換える必要がありました.

残念ながら、質問を適切に定式化しないと、それぞれ一般的な（非特定の）回答が得られることがわかりました。だから私の悪い。

私が提起した質問に多くの人が興味を持っていたため (最初の 3 時間で 5 票の賛成票がありました)、ここで私が抱えていた特定の問題に重点を置いて同じ質問をし、正しい答えを得て、再びノックアウトにノックアウトしました。 .

コンボボックスを使用したノックアウト可変長リストを使用したASP.NET - バインド方法は?

これが私を助けてくれたので、これが誰かに役立つことを願っています。

于 2013-03-08T15:10:18.017 に答える