从ASP.NET MVC复杂模型创建KnockoutJS模型

时间：2014-01-12 13:11:07

标签： c# asp.net-mvc knockout.js asp.net-mvc-5 knockout-mapping-plugin

我想使用ko.mapping.fromJS（）方法从asp.net MVC模型创建knockout viewModel，但我的表单没有填充值。

在视图中我创建的脚本如下：

   <script type="text/javascript">
            var tmp = @Html.Raw(Model.ToJson());
            var viewModel = ko.mapping.fromJS(tmp);
            ko.applyBindings(viewModel);
    </script>

@ Html.Raw（Model.ToJson（）返回值

 {"id":1,
"surveyCode":null,
"title":"Życie",
"description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ",
"dateStart":"2013-12-12T00:00:00",
"dateEnd":"2014-12-30T00:00:00",
"createDate":"2014-01-07T03:23:16.053",
"lastModification":"2014-01-07T03:23:16.053",
"isActive":false,
"questions":[{"id":1,
            "surveyID":1,
            "content":"Co jesz na śniadanie?",
            "tips":"wybierz jedną odpowiedź",
            "questionType":1,
            "isRequired":true,
            "answers":  [{"id":1,
                                "questionID":1,
                                "answerContent":"Jajecznicę",
                                "isOpenAnswer":false},
                         {"id":2,
                                "questionID":1,
                                "answerContent":"Kiełbaski",
                                "isOpenAnswer":false},
                         {"id":3,
                                "questionID":1,
                                "answerContent":"Płatki na mleku",
                                "isOpenAnswer":false},
                         {"id":4,
                                "questionID":1,
                                "answerContent":"Inne",
                                "isOpenAnswer":true}]},
             {"id":2,
             "surveyID":1,
             "content":"Czym się zajmujesz w życiu?",
             "tips":"napisz krótką historię",
             "questionType":3,
             "isRequired":true,
             "answers":[]}]}

但是当我想将'title'属性绑定到<span> <span data-bind="text:title"></span>时，它无效。当我在firefox中运行我的应用程序并打开firebug脚本控制台并将breakpiont设置为行var tmp = @Html.Raw(Model.ToJson());返回正确的值时，按F10转到下一行var viewModel = ko.mapping.fromJS(tmp);然后按F10并且没有任何反应，脚本不会执行下一行第ko.applyBindings(viewModel);行。

这是我的问题。有可能使用knockout mapping plugin自动映射我的mvc模型吗？或者我应该做一些manualy staf来将mvc模型映射到knockout viewModel。

我在这个网站上寻找答案： link1 和 stackowerflow 但也许我不明白这篇文章。

修改

我的观点如下：

@using Inżynierka.Extensions
@model Inżynierka.Models.Survey

@{
    ViewBag.Title = "Create";
}


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>SurveyAnswer</h4>
        <hr />
        @Html.ValidationSummary(true)

        Title: <span data-bind="text:title"></span>


    </div>
}


@section Scripts {
        <script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout.validation.js"></script>
        <script src="../../Scripts/knockout.knockout.mapping-latest.js"></script>
        <script type="text/javascript">
            var tmp = @Html.Raw(Model.ToJson());
            var viewModel = ko.mapping.fromJS(tmp);
            ko.applyBindings(viewModel);
        </script>
    @Scripts.Render("~/bundles/jqueryval")
}

修改2

这是我页面的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js'></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>


</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Ankietyy</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Surveys">Moje Ankiety</a></li>
                    <li><a href="/">Strona Gł&#243;wna</a></li>
                    <li><a href="/Home/About">O Projekcie</a></li>
                    <li><a href="/Home/Contact">Kontakt</a></li>
                </ul>
                <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="fWDZFmyGqJyU3ATUf2IbHDdkbo22bzObUMwUfxfqwXIiqGvRYzMhApWS3I5GkkHnZD7ieDxLfh84s2-prLDtSGeE6_D7p7cT-fmQBszeM06p-fZ7RzhOPn0P8EDftLRwT8YQA8t2U56dlLX_lx3G4Q2" />    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="/Account/Manage" title="Manage">Witaj Bartek!</a>
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Wyloguj się</a></li>
    </ul>
</form>
            </div>
        </div>
    </div>
    <div class="container body-content">




<form action="/SurveyAnswer/CompleteSurvey/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="KOALGZbw0WhFlBV4LHx530Oen59aBWF62b6s58GIUikx3A62uhcAi3-74auJpLtI4fYj9kmcPjlgNu1TeuNrYukpFlll1cGCOIcjjewtFou4M9C3_bHDFk7UoZk_tKpw7SxcXa3UbgwIj4ZhCRM6_g2" />    <div class="form-horizontal">
        <h4>SurveyAnswer</h4>
        <hr />


        Title: <span data-bind="text:title"></span>


    </div>
</form><script type="text/javascript">
            var tmp = {"id":1,"surveyCode":null,"title":"Życie","description":"Ankieta, w której zadawane będą pytania na temat codziennego życia ","dateStart":"2013-12-12T00:00:00","dateEnd":"2014-12-30T00:00:00","createDate":"2014-01-07T03:23:16.053","lastModification":"2014-01-07T03:23:16.053","isActive":false,"questions":[{"id":1,"surveyID":1,"content":"Co jesz na śniadanie?","tips":"wybierz jedną odpowiedź","questionType":1,"isRequired":true,"answers":[{"id":1,"questionID":1,"answerContent":"Jajecznicę","isOpenAnswer":false},{"id":2,"questionID":1,"answerContent":"Kiełbaski","isOpenAnswer":false},{"id":3,"questionID":1,"answerContent":"Płatki na mleku","isOpenAnswer":false},{"id":4,"questionID":1,"answerContent":"Inne","isOpenAnswer":true}]},{"id":2,"surveyID":1,"content":"Czym się zajmujesz w życiu?","tips":"napisz krótką historię","questionType":3,"isRequired":true,"answers":[]},{"id":14,"surveyID":1,"content":"Pytanie końcowe","tips":"napisz","questionType":1,"isRequired":true,"answers":[{"id":9,"questionID":14,"answerContent":"test","isOpenAnswer":false},{"id":10,"questionID":14,"answerContent":"test2","isOpenAnswer":false},{"id":11,"questionID":14,"answerContent":"test3","isOpenAnswer":false}]}],"surveyAnswers":[],"codeForUsers":[]};
            var viewModel = ko.mapping.fromJS(tmp);
            ko.applyBindings(viewModel);
</script>



        <hr />
        <footer>
            <p>&copy; 2014 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-2.0.3.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>


    <script src="../../Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.validation.js"></script>
    <script src="../../Scripts/knockout.mapping-latest.js"></script>

    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"9f8e517696004299808eb3caccb0e136"}
</script>
<script type="text/javascript" src="http://localhost:11897/dc47e85290da49019e6425ddd16f962a/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

回答我的问题

视图应该是这样的：

@using Inżynierka.Extensions
@model Inżynierka.Models.Survey

@{
    ViewBag.Title = "Create";
}


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>SurveyAnswer</h4>
        <hr />
        @Html.ValidationSummary(true)

        Title: <span data-bind="text:title"></span>


    </div>
}



@section Scripts {
    <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js"></script>
    <script type="text/javascript">
            var tmp = @Html.Raw(Model.ToJson());
            var viewModel = ko.mapping.fromJS(tmp);
            ko.applyBindings(viewModel);
    </script>

    @Scripts.Render("~/bundles/jqueryval")
}

感谢大家的回复，特别是@VolodymyrBilyachat，他们的建议最相关。

3 个答案:

答案 0 :(得分：0)

那么在你发布源代码之后，其他想法可能是某些脚本是冲突的，尝试删除脚本并只留下淘汰的那些

答案 1 :(得分：0)

将您的淘汰视图模型包装在document.ready函数

中 
<script type="text/javascript">
    $document.ready(function() {
            var tmp = @Html.Raw(Model.ToJson());
            var viewModel = ko.mapping.fromJS(tmp);
            ko.applyBindings(viewModel);});
    </script>

另请注意，您的viewModel在此时不是真正的视图模型，因此请考虑使用包含ko.observable属性“myData”的视图模型或用于保存数据然后应用绑定的内容

答案 2 :(得分：-1)

对于复杂模型，我不相信映射，简单地说，我正在自己解析json并通过循环，ifs等填充模型。我认为，这不是最糟糕的解决方案，因为调试和修复数据变得更加简单。

相关问题
最新问题