Knockout Not Rendering - простой пример

Question

Я изучаю MVC - MVVM с использованием ядра .net в VS2019.Я следую многоплановому курсу и использую свои существующие таблицы, чтобы попытаться освоить его ....

Когда я представляю отображение нокаута и нокаута в моем виде из модели представления, он показывает только метки Что на самом деле делает ... , но не детали записи.Я уверен, что это что-то простое, из-за моего отсутствия опыта.Я выложу фрагменты кода ниже.

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

Это инициализация view и 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>
}

Вам также необходимо убедиться, что 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>

Результат в браузере