Comment utiliser knockout.js avec ASP.NET les Modèles de vue MVC?

je pense que j'ai résumé toutes vos questions, si j'ai manqué quelque chose s'il vous plaît laissez-moi savoir ( si vous pouvez résumer toutes vos questions en un seul endroit serait agréable =)

Note. Compatibilité avec le plug-in ko.editable ajouté

télécharger le code complet

comment utilisez-vous les helpers html avec knockout.js

C'est facile:

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

où:

• value: CourseId indique que vous liez la propriété value du contrôle input avec la propriété CourseId de votre modèle et de votre modèle de script

le résultat est:

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

Pourquoi était-document prêt nécessaire pour le faire fonctionner(voir la première édition pour plus d'informations)

Je ne comprends pas encore pourquoi vous devez utiliser l'événement ready pour sérialiser le modèle, mais il semble qu'il soit tout simplement requis (ne vous inquiétez pas à ce sujet si)

Comment puis-je faire quelque chose comme ça si j'utilise le mapping knockout avec mes modèles view? Comme je n'ai pas de fonction en raison de la cartographie.

si je comprends bien, vous devez ajouter une nouvelle méthode au modèle KO, et bien c'est facile de fusionner modèles

pour plus d'informations, dans la section-cartographie à partir de différentes 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);
});

à propos de l'avertissement que vous receviez

Avertissement 1 la compilation conditionnelle est désactivée - > @Html.Brut

vous devez utiliser des guillemets

compatibilité avec le ko.editable plug-in

j'ai pensé il allait être plus complexe, mais il s'avère que l'intégration est vraiment facile, afin de rendre votre modèle modifiable il suffit d'ajouter la ligne suivante: (rappelez-vous que dans ce cas, j'utilise un modèle mixte, à partir du serveur et l'ajout d'extension dans le client et l'modifiable fonctionne tout simplement... c'est génial):

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

D'ici vous avez juste besoin de jouer avec vos fixations en utilisant les extensions ajoutées par le plug-in, par exemple, j'ai un bouton pour commencez à éditer mes champs comme ceci et dans ce bouton je démarre le processus d'édition:

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

puis j'ai les boutons commit et cancel avec le code suivant:

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

Et enfin, j'ai un champ pour indiquer si les champs sont en mode édition ou pas, c'est juste pour lier la propriété activer.

this.isInEditMode = ko.observable(false);

à propos de votre tableau question

je pourrais avoir quelques les boucles foreach ou quelque chose pour obtenir les données de la collecte des Étudiants Modèles.

alors quand je soumettrais le formulaire, j'utiliserais jquery et serialize array et je l'enverrais à une méthode d'action de controller qui le relierait à nouveau au viewmodel.

vous pouvez faire la même chose avec KO, dans l'exemple suivant, je vais créer la sortie suivante:

fondamentalement ici, vous avez deux listes, créées en utilisant Helpers et liées avec KO, ils ont un événement dblClick lié que lors de la mise à feu, supprimer l'élément sélectionné de la liste actuelle et l'ajouter à l'autre liste, lorsque vous postez à la Controller , le contenu de chaque liste est envoyé en données JSON et ré-attaché au modèle de serveur

Pépites:

• Newtonsoft
• jQuery
• knockoutjs
• knock-out.Cartographie

Externe scripts .

Code du contrôleur

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

Modèle

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 page

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

Scripts

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

Note: je viens d'ajouter ces lignes:

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

parce que quand je soumets le formulaire mes champs sont désactivés, donc les valeurs n'ont pas été transmises au serveur, c'est pourquoi j'ai ajouté quelques champs cachés pour faire l'astuce