Question

我正在VS2019中使用.net核心学习MVC-MVVM。我正在学习多元视野的课程，并使用现有的表格尝试掌握它。...

当我从视图模型的视图中引入敲除和knochout映射时，它仅显示标签What actually renders...，但不显示记录的详细信息。由于我缺乏经验，我确信这很简单。我将在下面发布代码段。

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

Answer 1

从控制器创建模型将不会生成以模型命名的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."
        });
    }

这是视图和基因剔除的初始化。为了准确地回答您的问题，我添加了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>
}

在尝试应用绑定之前，您还需要确保已加载基因敲除JS。

最后是带有绑定的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>

在浏览器中的结果

淘汰赛未呈现-简单示例

1 个答案: