Nasıl ASP.NET MVC ile ViewModels knockout.js kullanmak için?

SORU

15 HAZİRAN 2012, Cuma

Nasıl ASP.NET MVC ile ViewModels knockout.js kullanmak için?

Ödül

Bir süre oldu ve ben hala bir çift bekleyen sorular var. Belki bir ödül ekleyerek bu sorulara cevap alırsınız umarım.

Nasıl knockout.js html yardımcıları kullanıyorsunuz
Neden belge hazırdı çalışması için gerekli(ilk daha fazla bilgi için bkz)

Nasıl eğer benim görüşüme modelleri ile nakavt eşleme kullanıyorum eğer böyle bir şey yaparım? Bir fonksiyon eşleme nedeniyle yok.

function AppViewModel() {

    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {

    var currentVal = this.lastName();        // Read the current value

    this.lastName(currentVal.toUpperCase()); // Write back a modified value

};

Eğer bir kullanıcı son değeri geri gitmek mümkün olmak istiyorum bir isteği iptal eder gibi observables geri almak için mümkün olmak istiyorum mesela eklentileri kullanmak istiyorum. Benim araştırma, bu insanların editables gibi eklentiler yaparak elde etmiş gibi görünüyor

Nasıl eğer eşleme kullanıyorum eğer böyle bir şey kullanabilirim? Gerçekten gitmek istemiyor için bir yöntem nerede var kanımca manuel eşleme olduğunu göster her MVC viewMode alan bir KO model alan olarak istediğim gibi küçük satır içi javascript olarak mümkün ve bu gibi çift işi bu yüzden seviyorum bu eşleme.
Endişeliyim o bu işi yapmak için kolay kullanarak eşleme) ben kaybetmek çok KO güç ama öte yandan endişeliyim manuel eşleme sadece bir sürü iş yapar ve görüşlerimi içeren çok fazla bilgi ve kudret haline geleceği zor korumak(söylesem kaldırmak bir özelliği MVC modeli var hareket de KO viewmodel)

< / ^ hr . Orijinal Yazı

Asp.net mvc 3 ve oldukça serin görünüyor gibi nakavt içine bakarak kullanıyorum ama zor bir zaman özellikle görünüm modelleri asp.net mvc ile nasıl çalıştığını anlamakta zorlanıyorum.

Bana şu an için böyle bir şey yapıyorum

 public class CourseVM
    {
        public int CourseId { get; set; }
        [Required(ErrorMessage = "Course name is required")]
        [StringLength(40, ErrorMessage = "Course name cannot be this long.")]
        public string CourseName{ get; set; }


        public List<StudentVm> StudentViewModels { get; set; }

}

CourseName gibi bazı temel özelliklere sahip bir Vm olurdu ve üstüne birkaç basit doğrulama olacak. Vm modeli diğer modelleri görüntülemek, gerekirse de içerebilir.

Sonra html yardımcıları bana kullanıcı için görüntü yardımcı olsaydı ben Görünümü bu Vm geçmek istiyorum.

@Html.TextBoxFor(x => x.CourseName)

Bazı dosyalarda grup döngüler veya Öğrenci Görünüm Modelleri koleksiyonu verileri almak için bir şeyler olabilir.

Sonra formu göndermek ve ben bir WordPress kullanmak ve serialize array kullanım ve viewmodel geri bağlayan denetleyicisi eylem bir yöntem göndermek istiyorum.

Şimdi tüm bu örnekler için ve viewmodels kadar farklı olduğunu knockout.js ile gördüm html yardımcıları kullanmıyorlar.

Nasıl knockout.js MVC ile bu 2 özellikleri kullanıyor musunuz?

Buldum this video ve kısa bir süre(son birkaç dakika video @ 18:48) gider bir şekilde kullanın viewmodels tarafından temelde olan bir satır içi komut dosyası vardır. knockout.js viewmodel ... atanan değerleri ViewModel.

Bu tek yol bu mu? Nasıl viewmodels bir koleksiyon olması ile benim örnekte? Bir foreach döngü veya tüm değerleri ayıklamak ve atamak için bir şeyler yapmak zorunda nakavt içine?

Html sağlayanlar için video, onlar hakkında hiçbir şey söylemez.

Bunlar 2 alanlar karıştırır halt beni değil, pek çok insan gibi konuşmak ve bırakır beni karıştı nasıl ilk değerler ve her şey almak için görünümü ne zaman örnektir sadece bazı kodlanmış değer örnek.

< / ^ hr . Edit

Darin Dimitrov önerdi çalışıyorum ve bu iş için(onun kodu bazı değişiklikler olsa yapmak zorundaydım) gibi görünüyor. Belge hazır ama bir şekilde kullanmak zorunda kaldım neden emin olmadan her şey hazır değildi.

@model MvcApplication1.Models.Test

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
   <script type="text/javascript">

   $(function()
   {
      var model = @Html.Raw(Json.Encode(Model));


// Activates knockout.js
ko.applyBindings(model);
   });

</script>

</head>
<body>
    <div>
        <p>First name: <strong data-bind="text: FirstName"></strong></p>
        <p>Last name: <strong data-bind="text: LastName"></strong></p>
        @Model.FirstName , @Model.LastName
    </div>
</body>
</html>

Bir WordPress kullanmak bir belge çalışması için hazır etrafında sarmak zorunda kaldım.

Ben de bu uyarı olsun. Tüm hakkında ne emin değilim.

Warning 1   Conditional compilation is turned off   -> @Html.Raw

Bir başlangıç noktası var ve bu yüzden ben en azından biraz daha oynamak yaptım ve bu işlerin nasıl yürüdüğünü güncelleme sanırım.

Etkileşimli öğreticiler geçmesi ama bir ViewModel yerine kullanmaya çalışıyorum.

Bu parçalar henüz çözmek için nasıl emin değilim

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };

< / ^ hr . 2 düzenleyin

İlk sorunu çözmem mümkün. İkinci sorun hakkında hiçbir ipucu. Henüz rağmen. Herkes herhangi bir fikir var mı?

 @model MvcApplication1.Models.Test

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <title>Index</title>
        <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
       <script type="text/javascript">

       $(function()
       {
        var model = @Html.Raw(Json.Encode(Model));
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

       });

    </script>

    </head>
    <body>
        <div>
            @*grab values from the view model directly*@
            <p>First name: <strong data-bind="text: FirstName"></strong></p>
            <p>Last name: <strong data-bind="text: LastName"></strong></p>

            @*grab values from my second view model that I made*@
            <p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
            <p>Another <strong data-bind="text: Test2.Another"></strong></p>

            @*allow changes to all the values that should be then sync the above values.*@
            <p>First name: <input data-bind="value: FirstName" /></p>
            <p>Last name: <input data-bind="value: LastName" /></p>
            <p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
            <p>Another <input data-bind="value: Test2.Another" /></p>

           @* seeing if I can do it with p tags and see if they all update.*@
            <p data-bind="foreach: Test3">
                <strong data-bind="text: Test3Value"></strong> 
            </p>

     @*took my 3rd view model that is in a collection and output all values as a textbox*@       
    <table>
        <thead><tr>
            <th>Test3</th>
        </tr></thead>
          <tbody data-bind="foreach: Test3">
            <tr>
                <td>    
                    <strong data-bind="text: Test3Value"></strong> 
<input type="text" data-bind="value: Test3Value"/>
                </td>
            </tr>    
        </tbody>
    </table>

Denetleyicisi

  public ActionResult Index()
    {
              Test2 test2 = new Test2
        {
            Another = "test",
            SomeOtherValue = "test2"
        };

        Test vm = new Test
        {
            FirstName = "Bob",
            LastName = "N/A",
             Test2 = test2,

        };
        for (int i = 0; i < 10; i  )
        {
            Test3 test3 = new Test3
            {
                Test3Value = i.ToString()
            };

             vm.Test3.Add(test3);
        }

        return View(vm);
    }

CEVAP

7 Temmuz 2012, CUMARTESİ

Eğer bir şey pls bana (Eğer tek bir yerde tüm sorularınıza güzel olurdu Yukarı özetler misin diye=)) bakalım unuttuğum tüm sorularınızı summired var sanırım

Not. ko.editable ile uyumluluk eklentisi eklendi

Download tam kodu

Nasıl knockout.js html yardımcıları kullanıyorsunuz

Bu kolaydır:

@Html.TextBoxFor(model => model.CourseId, new { data_bind = "value: CourseId" })

Nereye:

value: CourseId model CourseId özelliği ve komut modelinizle input denetim value bağlayıcı özellik gösterir

Sonuç:

<input data-bind="value: CourseId" data-val="true" data-val-number="The field CourseId must be a number." data-val-required="The CourseId field is required." id="CourseId" name="CourseId" type="text" value="12" />

Neden belge hazırdı çalışması için gerekli(ilk daha fazla bilgi için bkz)

Model seri hale getirmek için ready olay kullanmanız gerekir hala anlamış değilim, ama basit gibi görünüyorgerekli(Bu konuda endişelenmeye gerek)

Nasıl eğer benim görüşüme modelleri ile nakavt eşleme kullanıyorum eğer böyle bir şey yaparım? Bir fonksiyon eşleme nedeniyle yok.

Eğer KO modeli için yeni bir yöntem eklemek için ihtiyacınız olan doğru anladıysam, evet bu kadar kolay modelleri birleştirme

For more info, in the section -Mapping from different sources-

function viewModel() {
    this.addStudent = function () {
        alert("de");
    };
};

$(function () {
    var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
    var mvcModel = ko.mapping.fromJSON(jsonModel);

    var myViewModel = new viewModel();
    var g = ko.mapping.fromJS(myViewModel, mvcModel);

    ko.applyBindings(g);
});

Hakkında uyarı receiveing olduğunu

1 Koşullu derleme uyarı - ^ kapalıdır . @Html.Ham

Tırnak kullanmanız gerekir

Ko ile uyumluluk.düzenlenebilir eklentisi

Düşündüm olacak daha karmaşık, ama bu çıkıyor entegrasyonu çok kolay, bunun için modelinizi düzenlenebilir sadece aşağıdaki satırı ekleyin: (unutmayın ki bu durumda ben kullanarak bir karışık model, sunucu ve ekleme uzantısı istemci ve düzenlenebilir basit işler... büyük):

    ko.editable(g);
    ko.applyBindings(g);

Buradan sadeceoynaörneğin bağların uzantıları eklentisi tarafından eklenen kullanarak, bu gibi alanlara düzenlemeye başlamak için bir düğme ve başlıyorum bu düğmeye düzenleme süreci var:

    this.editMode = function () {
        this.isInEditMode(!this.isInEditMode());
        this.beginEdit();
    };

Daha sonra aşağıdaki kod ile düğmeleri taahhüt iptal ettim:

    this.executeCommit = function () {
        this.commit();
        this.isInEditMode(false);
    };
    this.executeRollback = function () {
        if (this.hasChanges()) {
            if (confirm("Are you sure you want to discard the changes?")) {
                this.rollback();
                this.isInEditMode(false);
            }
        }
        else {
            this.rollback();
            this.isInEditMode(false);
        }
    };

Ve son olarak, alanları düzenleme modunda olup olmadığını gösteren bir alan var ya da yok, bu özelliği etkinleştirin bağlamak için.

this.isInEditMode = ko.observable(false);

Hakkında bir dizi soru

Bazı dosyalarda grup döngüler veya Öğrenci Görünüm Modelleri koleksiyonu verileri almak için bir şeyler olabilir.

Sonra formu göndermek ve ben bir WordPress kullanmak ve bir dizi seri hale getirmek ve viewmodel geri bağlayan denetleyicisi eylem bir yöntem göndermek istiyorum.

KO ile aynı şeyi yapabilirsiniz, aşağıdaki örnekte, aşağıdaki çıktıyı oluşturur:

enter image description here

Temelde burada, iki listeyi kullanarak oluşturulan Helpers lidir ile KO, dblClick olay lidir o zaman ateş, Kaldır Seçili öğeyi geçerli liste ve eklemek için başka bir liste, ne zaman sana yazılan Controller içerik her liste gönderdi JSON veri ve yeniden bağlı sunucu modeli

Nuggets:

Dış scripts.

Kumanda kodu

    [HttpGet]
    public ActionResult Index()
    {
        var m = new CourseVM { CourseId = 12, CourseName = ".Net" };

        m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });

        return View(m);
    }

    [HttpPost]
    public ActionResult Index(CourseVM model)
    {
        if (!string.IsNullOrWhiteSpace(model.StudentsSerialized))
        {
            model.StudentViewModels = JsonConvert.DeserializeObject<List<StudentVm>>(model.StudentsSerialized);
            model.StudentsSerialized = string.Empty;
        }

        if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized))
        {
            model.SelectedStudents = JsonConvert.DeserializeObject<List<StudentVm>>(model.SelectedStudentsSerialized);
            model.SelectedStudentsSerialized = string.Empty;
        }

        return View(model);
    }

Model

public class CourseVM
{
    public CourseVM()
    {
        this.StudentViewModels = new List<StudentVm>();
        this.SelectedStudents = new List<StudentVm>();
    }

    public int CourseId { get; set; }

    [Required(ErrorMessage = "Course name is required")]
    [StringLength(100, ErrorMessage = "Course name cannot be this long.")]
    public string CourseName { get; set; }

    public List<StudentVm> StudentViewModels { get; set; }
    public List<StudentVm> SelectedStudents { get; set; }

    public string StudentsSerialized { get; set; }
    public string SelectedStudentsSerialized { get; set; }
}

public class StudentVm
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Lastname { get; set; }
}

CSHTML sayfası

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CourseVM</legend>

        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.CourseId)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseId, new { data_bind = "enable: isInEditMode, value: CourseId" })
                @Html.ValidationMessageFor(model => model.CourseId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.CourseName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseName, new { data_bind = "enable: isInEditMode, value: CourseName" })
                @Html.ValidationMessageFor(model => model.CourseName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StudentViewModels);
            </div>
            <div class="editor-field">

                @Html.ListBoxFor(
                    model => model.StudentViewModels,
                    new SelectList(this.Model.StudentViewModels, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: StudentViewModels, optionsText: 'Name', value: leftStudentSelected, event: { dblclick: moveFromLeftToRight }"
                    }
                )
                @Html.ListBoxFor(
                    model => model.SelectedStudents,
                    new SelectList(this.Model.SelectedStudents, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: SelectedStudents, optionsText: 'Name', value: rightStudentSelected, event: { dblclick: moveFromRightToLeft }"
                    }
                )
            </div>

            @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
            @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })
            @Html.HiddenFor(model => model.StudentsSerialized, new { data_bind = "value: StudentsSerialized" })
            @Html.HiddenFor(model => model.SelectedStudentsSerialized, new { data_bind = "value: SelectedStudentsSerialized" })
        </div>

        <p>
            <input type="submit" value="Save" data-bind="enable: !isInEditMode()" /> 
            <button data-bind="enable: !isInEditMode(), click: editMode">Edit mode</button><br />
            <div>
                <button data-bind="enable: isInEditMode, click: addStudent">Add Student</button>
                <button data-bind="enable: hasChanges, click: executeCommit">Commit</button>
                <button data-bind="enable: isInEditMode, click: executeRollback">Cancel</button>
            </div>
        </p>
    </fieldset>
}

Komut

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ko.editables.js")" type="text/javascript"></script>

<script type="text/javascript">
    var g = null;
    function ViewModel() {
        this.addStudent = function () {
            this.StudentViewModels.push(new Student(25, "my name"   new Date(), "my last name"));
            this.serializeLists();
        };
        this.serializeLists = function () {
            this.StudentsSerialized(ko.toJSON(this.StudentViewModels));
            this.SelectedStudentsSerialized(ko.toJSON(this.SelectedStudents));
        };
        this.leftStudentSelected = ko.observable();
        this.rightStudentSelected = ko.observable();
        this.moveFromLeftToRight = function () {
            this.SelectedStudents.push(this.leftStudentSelected());
            this.StudentViewModels.remove(this.leftStudentSelected());
            this.serializeLists();
        };
        this.moveFromRightToLeft = function () {
            this.StudentViewModels.push(this.rightStudentSelected());
            this.SelectedStudents.remove(this.rightStudentSelected());
            this.serializeLists();
        };
        this.isInEditMode = ko.observable(false);
        this.executeCommit = function () {
            this.commit();
            this.isInEditMode(false);
        };
        this.executeRollback = function () {
            if (this.hasChanges()) {
                if (confirm("Are you sure you want to discard the changes?")) {
                    this.rollback();
                    this.isInEditMode(false);
                }
            }
            else {
                this.rollback();
                this.isInEditMode(false);
            }
        };
        this.editMode = function () {
            this.isInEditMode(!this.isInEditMode());
            this.beginEdit();
        };
    }

    function Student(id, name, lastName) {
        this.ID = id;
        this.Name = name;
        this.LastName = lastName;
    }

    $(function () {
        var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
        var mvcModel = ko.mapping.fromJSON(jsonModel);

        var myViewModel = new ViewModel();
        g = ko.mapping.fromJS(myViewModel, mvcModel);

        g.StudentsSerialized(ko.toJSON(g.StudentViewModels));
        g.SelectedStudentsSerialized(ko.toJSON(g.SelectedStudents));

        ko.editable(g);
        ko.applyBindings(g);
    });
</script>

Not: ben bu satırları ekledi:

        @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
        @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })

Benim alanları devre dışı bırakılır formu gönderdiğinde, bu yüzden değerleri sunucuya aktarılan değil, çünkü, bu gizli alanları birkaç hile yapmak için ekledim

Bunu Paylaş:

Facebook
Twitter
Google+
E-Posta

Etiketler:

ÖNCEKİ

İİSExpress uzak maki...

SONRAKİ

&Quot birleşim;"...

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

HowcastTechG

22 EYLÜL 2010
jagadambarec

13 AĞUSTOS 2008
Jeremy Gallm

11 NİSAN 2012

İLGİLİ SORU / CEVAPLAR

1

Nasıl HTML Çeviklik paketi kullanmak i...

11 Mayıs 2009
2

bir öğe veri-öznitelik değeri için bir...

16 Kasım 2010
3

Nasıl bir bağımlılık en son sürümünü k...

27 AĞUSTOS 2008
4

Nasıl Çift ya da tek ayraç, parantez, ...

2 ŞUBAT 2010
5

Nasıl Raylar ile ilgili 4 kullanmak iç...

26 Ocak 2013

SORU