时间戳

首页 > 解决方案 > 淘汰赛不渲染 - 简单示例

mvvm - 淘汰赛不渲染 - 简单示例

问题描述

我正在学习 MVC - 在 VS2019 中使用 .NET Core 的 MVVM。我正在学习复数课程并使用我现有的表格来尝试掌握它....

当我从视图模型中在视图中引入剔除和剔除映射时，它只显示标签

实际呈现什么...,

但不是记录的细节。由于我缺乏经验，我相信这很简单。我将在下面发布代码片段。

详细信息.cshtml

@model DRMS.EDX.Web.ViewModels.DataFileViewModel
@using Newtonsoft.Json

@{
ViewBag.Title = "DataFile Details";
}
@section scripts{
<script src="~/Scripts/knockout-3.5.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/datafileviewmodel.js"></script>
<script type="text/javascript">
    var dataFileViewModel = new DataFileViewModel(@Html.Raw(Model));
    ko.applyBindings(dataFileViewModel);
</script>
}

<h2>@ViewBag.Title</h2>

<p data-bind="text: MessageToClient"></p>

<div>
  <div>
    <label>DataFileLayoutID :</label>
    <span data-bind="text: DataFileLayoutID"></span>
</div>
<div>
    <label>CreatedByID :</label>
    <span data-bind="text: CreatedByID"></span>
</div>
<div>
    <label>CreatedDate :</label>
    <span data-bind="text: CreatedDate"></span>
</div>
<div>
    <label>ModifiedByID :</label>
    <span data-bind="text: ModifiedByID"></span>
</div>
<div>
    <label>ModifiedDate :</label>
    <span data-bind="text: ModifiedDate"></span>
</div>
<div>
    <label>HasScheduleA :</label>




datafileviewmodel.js

DataFileViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
};




Controller

   public async Task<IActionResult> Details(Guid? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var dataFile = await _context.DataFiles
            .FirstOrDefaultAsync(m => m.Id == id);
        if (dataFile == null)
        {
            return NotFound();
        }

        DataFileViewModel dataFileViewModel = new DataFileViewModel();

        dataFileViewModel.Id = dataFile.Id;
        dataFileViewModel.DataFileLayoutID = dataFile.DataFileLayoutID;
        dataFileViewModel.CompanyID = dataFile.CompanyID;
        dataFileViewModel.FileTypeId = dataFile.FileTypeId;
        dataFileViewModel. FileNameID = dataFile.FileNameID;
        dataFileViewModel.MessageToClient =  "I originated from the 
            viewmodel, rather than the model.";

        return View(dataFileViewModel);
    }

标签： mvvmknockout.jsasp.net-core-mvc

解决方案

从控制器创建模型，不会生成以模型命名的 JS 文件。这就是您收到 404 错误的原因。

如果你想从控制器传入模型，那么你不需要一个单独的 JS 文件来达到同样的目的。

这是我制作和测试的一个快速示例的代码片段。

这是控制器动作：

    public IActionResult KnockoutJS()
    {
        return View(new DataFileViewModel() {
            Id="1",
            DataFileLayoutId="file layout",
            CompanyId = "{E20B0561-3458-412C-B5FA-DB1354D40D21}",
            FileTypeId ="TEXTFILE",
            FileNameId="TEXT",
            MessageToClient = "I originated from the view model rather than the model."
        });
    }

这是视图和knockoutJS 的初始化。为了准确回答你的问题，我添加了 ko.mapping 代码，但你不应该使用这个插件，因为它的开发已经被放弃了，除非你打算维护它:) 这个例子也使用了 jQuery。如果你不需要它，你不必这样做。

@model DataFileViewModel
@section scripts{
<script type="text/javascript">
        $.ready.then(() => {
            var mapping = ko.mapping.fromJS(@Html.Raw(Json.Serialize(Model)));
            var dataFileViewModel = {
                Id: '@Model.Id',
                DataFileLayoutId:'@Model.DataFileLayoutId',
                CompanyId: '@Model.CompanyId',
                FileTypeId: '@Model.FileTypeId',
                FileNameId: '@Model.FileNameId',
                MessageToClient:'@Model.MessageToClient'
                    };
             ko.applyBindings(dataFileViewModel, document.getElementById("bindingRoot"));
        });

</script>
}

您还需要确保在尝试 applyBindings 之前已加载了 knockoutJS。

最后是带有绑定的 HTML。

<div id="bindingRoot">
<p data-bind="text: MessageToClient"></p>

<div>
    <div>
        <label>Id :</label>
        <span data-bind="text: Id"></span>
    </div>
    <div>
        <label>DataFileLayoutId :</label>
        <span data-bind="text: DataFileLayoutId"></span>
    </div>
    <div>
        <label>CompanyId :</label>
        <span data-bind="text: CompanyId"></span>
    </div>
    <div>
        <label>FileTypeId :</label>
        <span data-bind="text: FileTypeId"></span>
    </div>
    <div>
        <label>FileNameId :</label>
        <span data-bind="text: FileNameId"></span>
    </div>
</div>

结果在浏览器中 结果在浏览器中

推荐阅读