如何使用敲除将viewModel发回而不是模型MVC [英] How to post a viewModel back instead of the model MVC using knockout

问题描述

我有以下代码:

Index.cshtml:

Index.cshtml:

@using System.Web.Script.Serialization
@model MvcApplication3.ViewModels.PersonViewModel

<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<form data-bind="submit: save">

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>

    <table>
        <thead>
            <tr>
                      <th>Name</th>
                  </tr>
        </thead>
        <tbody data-bind="foreach: activities">
            <tr>
                <td><input data-bind="value: Name" /></td>
            </tr>    
        </tbody>
    </table>

    <button type="submit">Submit</button>
</form>

<script type="text/javascript">

    var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));

    // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    var viewModel = { 
        firstName : ko.observable(initialData.Person.FirstName),
        lastName : ko.observable(initialData.Person.LastName),
        activities : ko.observableArray(initialData.Person.Activities),

        save: function() {
            $.ajax({
                type: "POST",
                url: "/Home/Index",
                data: ko.toJSON(viewModel),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    $("#resultCount").html(data);
                }
            });
        }
    }

    // Activates knockout.js
    ko.applyBindings(viewModel);

</script>

HomeController:

HomeController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ahb.Insite.HerdRegistration.WebUI;
using MvcApplication3.Models;
using MvcApplication3.ViewModels;

namespace MvcApplication3.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var person = new Person {FirstName = "John", LastName = "Cool"};

            person.Activities = new List<Activity> { new Activity { Name = "Skiing" } };

            var personViewModel = new PersonViewModel (person);

            return View(personViewModel);
        }

        [HttpPost]
        public ActionResult Index(Person person)
        {
            //Save it

            return View();
        }
    }
}

PersonViewModel:

PersonViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcApplication3.Models;

namespace MvcApplication3.ViewModels
{
    public class PersonViewModel
    {
        public Person Person { get; set; }
    }
}

基本上，它为一个人的名字，姓氏以及所涉及的活动中的任何活动的名称提供了一个可编辑的模板.

Basically what this does is it provides an editable template for a person's firstname, lastname and the name of any activities in a list in which they are involved in.

因此，此人是通过personViewModel发送的.

So the person is sent through in a personViewModel.

我想在此处进行的更改是，我不想将其发布回去，而是将其发布到personViewModel内部.

The change I would like to make here is that instead of posting back a person I would like to post the person back inside a personViewModel.

有人知道如何更改代码来简化此操作吗?

Does anyone know how to change the code to facilitate this?

推荐答案

这取决于您的PersonViewModel，但是否类似于:

It depends on your PersonViewModel, but if that is something like:

class PersonViewModel
{
    public Person Person { get; set; }
    // other properties
}

然后，就像更改一样简单

Then it's as simple as changing

data: ko.toJSON(viewModel),

到

data: ko.toJSON( { Person: viewModel, // Other properties } ),

希望这会有所帮助.

这篇关于如何使用敲除将viewModel发回而不是模型MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！