Jak używać nokaut.js z ASP.NET MVC ViewModels?

Myślę, że podsumowałem wszystkie pytania, jeśli coś przeoczyłem proszę dać mi znać ( Jeśli mógłbyś podsumować wszystkie pytania w jednym miejscu byłoby miło =))

Uwaga. Kompatybilność z dodatkiem Wtyczki ko.editable

Pobierz Pełny kod

Jak używać helperów html z knockout.js

To proste:

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

Gdzie:

• value: CourseId oznacza, że wiążesz właściwość value z kontrolki input z właściwością CourseId z twojego modelu i Twojego modelu skryptu

Wynik jest następujący:

<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" />

Dlaczego dokument był gotowy, aby działał (zobacz pierwszą edycję, aby uzyskać więcej informacji)

Jak zrobić coś takiego, Jeśli używam mapowania knockout z moim widokiem modelki? Ponieważ nie mam funkcji ze względu na mapowanie.

Jeśli dobrze rozumiem, musisz dodać nową metodę do modelu KO, cóż, to łatwe łączenie modeli

Aby uzyskać więcej informacji, w sekcji-mapowanie z różnych źródeł -

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);
});

O ostrzeżeniu, które otrzymałeś

Ostrzeżenie 1 kompilacja warunkowa jest wyłączona - > @ Html.Raw

Musisz użyć cudzysłowów

Zgodność z ko.edytowalna wtyczka

Myślałem, że to będzie bardziej skomplikowane, ale okazuje się, że integracja jest naprawdę łatwa, aby twój model był edytowalny wystarczy dodać następującą linię: (pamiętaj, że w tym przypadku używam modelu mieszanego, z serwera i dodawania rozszerzenia w kliencie i edytowalny po prostu działa... jest super):

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

Stąd wystarczy grać {[23] } ze swoimi wiązaniami używając rozszerzeń dodanych przez wtyczkę, na przykład mam przycisk do zacznij edytować moje pola w ten sposób i w tym przycisku rozpoczynam proces edycji:

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

Następnie mam przyciski commit i cancel o następującym kodzie:

    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);
        }
    };

I wreszcie, mam jedno pole, aby wskazać, czy pola są w trybie edycji, czy nie, jest to po prostu powiązanie właściwości enable.

this.isInEditMode = ko.observable(false);

O twoim pytaniu o tablicę

Mogę mieć jakieś pętle foreach lub coś, aby uzyskać dane z kolekcji modeli widoku uczniów.

Następnie, kiedy składałem formularz, używałem jQuery i serialize array i wysyłałem go do metody akcji kontrolera, która wiązałaby go z powrotem do viewmodel.

Możesz zrobić to samo z KO, w poniższym przykładzie stworzę następujące wyjście:

Zasadniczo tutaj masz dwie listy, utworzone za pomocą Helpers i binded za pomocą KO, mają one Zdarzenie dblClick binded, które po wywołaniu Usuń wybrany element z bieżącej listy i dodaj go do w przeciwieństwie do innych list, zawartość każdej listy jest wysyłana jako dane JSON i ponownie dołączana do modelu serwera

Nuggets:

• Newtonsoft
• jQuery
• knockoutjs
• nokaut.Mapowanie

Zewnętrzne Skrypty .

Kod kontrolera

    [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; }
}

Strona CSHTML

@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>
}

Skrypty

<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>

Uwaga: Właśnie dodałem te wiersze:

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

Ponieważ kiedy wysyłam formularz moje pola są wyłączone, więc wartości nie były przesyłane do serwera, dlatego dodałem kilka ukrytych pól, aby zrobić sztuczkę