在运行时用来自 indexeddb 的数据填充 cshtml
Fill cshtml at runtime with data from indexeddb
我在浏览器的 indexedDB 中保存了一个视图模型,我缓存了 html 页面。下面的示例(仅部分视图),保存在 indexeddb 中的模型是 InspectionUpsertViewModel:
@using Common.OM
@using ACA.OM.Tag_M
@model ACA.WebERP.Models.Inspection_M.InspectionUpsertViewModel
<div class="content">
<div class="block block-rounded block-bordered">
<ul class="nav nav-tabs nav-tabs-alt">
<li class="nav-item">
<a id="step1" class="nav-link active" data-toggle="tab" href="#tab-step-1">@ACA.Translations.Measurement.Step1</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#tab-step-2">@ACA.Translations.Measurement.Step2</a>
</li>
<li class="nav-item">
<a id="step3" class="nav-link disabled" data-toggle="tab" href="#tab-step-3">@ACA.Translations.Measurement.Step3</a>
</li>
</ul>
<div class="content">
<div class="alert alert-danger" role="alert" id="subTypeChangeAlert" style="display:none;">
@ACA.Translations.Measurement.AlertSubTypeChange
</div>
<h4>@ACA.Translations.Inspection.InspectionNr @Model.Inspection.Nr</h4>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "step1-form" }))
{
@Html.HiddenFor(model => model.Inspection.Id)
@Html.AntiForgeryToken()
<div class="tab-pane active" id="tab-step-1" role="tabpanel">
<div class="block-content">
<div class="form-group row">
@Html.LabelFor(model => model.Inspection.Article, new { @class = "col-form-label col-md-2" })
@Html.HiddenFor(model => model.Inspection.ArticleId)
@Html.HiddenFor(model => model.Inspection.Article.AddressId)
@Html.HiddenFor(model => model.Inspection.Article.ArticlePropertiesVersion.Id)
@Html.HiddenFor(model => model.IsCreatedOnline)
@Html.HiddenFor(model => model.QuestionaireId);
<div class="col-md-10">
<div class="form-group row" id="article" style="@(Model.Inspection.Article != null ? "" : "display: none")">
<div class="col-md-10">
<div>
<span class="help-block" id="internNr">@(Model.Inspection.Article != null && !Model.Inspection.Article.InternNr.IsNullOrWhiteSpace() ? $"{ACA.Translations.Article.InternNr}: {Model.Inspection.Article.InternNr}" : "")</span>
</div>
<div>
<span class="help-block" id="serialNr">@(Model.Inspection.Article != null && !Model.Inspection.Article.SerialNr.IsNullOrWhiteSpace() ? $"{ACA.Translations.Article.SerialNr}: {Model.Inspection.Article.SerialNr}" : "")</span>
</div>
<div>
<span class="help-block" id="type">@(Model.Inspection.Article != null ? $"{ACA.Translations.Article.Type}: {Model.Inspection.Article.Type?.Name} - {Model.Inspection.Article.SubType?.Name}" : "")</span>
</div>
</div>
</div>
<div>
<button type="button" class="btn btn-warning editArticleButton" data-toggle="modal" data-target="#editArticleModal"><i class="fa fa-pencil-alt"></i></button>
</div>
</div>
</div>
现在我需要在运行时填充数据,所以从 indexedDB 中获取我的对象并在视图中填充对象值。有人知道如何执行此操作吗?
提前致谢。
Razor 语法与实际模型值的唯一方法是在加载视图之前将它们加载到控制器操作中。因此,为了正确加载值,您只需执行以下操作:
return View(Model)
其中 Model 是包含您的数据的对象。
为了在视图已经加载时填充这些字段,方法是 Javascript 向控制器中的其他一些操作发出 ajax 请求,该操作将以以下方式结束:
return JSON(Model)
并将 return 您的模型及其数据,然后使用 jQuery 或任何您想要的方式将它们加载到您的表单中。
* 编辑 *
要比 jquery 更快地完成此任务,您需要使用实现数据绑定的 js 库。这样的例子是 knockout.js 和 rivets.js 取决于什么最适合你的需要
我在浏览器的 indexedDB 中保存了一个视图模型,我缓存了 html 页面。下面的示例(仅部分视图),保存在 indexeddb 中的模型是 InspectionUpsertViewModel:
@using Common.OM
@using ACA.OM.Tag_M
@model ACA.WebERP.Models.Inspection_M.InspectionUpsertViewModel
<div class="content">
<div class="block block-rounded block-bordered">
<ul class="nav nav-tabs nav-tabs-alt">
<li class="nav-item">
<a id="step1" class="nav-link active" data-toggle="tab" href="#tab-step-1">@ACA.Translations.Measurement.Step1</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#tab-step-2">@ACA.Translations.Measurement.Step2</a>
</li>
<li class="nav-item">
<a id="step3" class="nav-link disabled" data-toggle="tab" href="#tab-step-3">@ACA.Translations.Measurement.Step3</a>
</li>
</ul>
<div class="content">
<div class="alert alert-danger" role="alert" id="subTypeChangeAlert" style="display:none;">
@ACA.Translations.Measurement.AlertSubTypeChange
</div>
<h4>@ACA.Translations.Inspection.InspectionNr @Model.Inspection.Nr</h4>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "step1-form" }))
{
@Html.HiddenFor(model => model.Inspection.Id)
@Html.AntiForgeryToken()
<div class="tab-pane active" id="tab-step-1" role="tabpanel">
<div class="block-content">
<div class="form-group row">
@Html.LabelFor(model => model.Inspection.Article, new { @class = "col-form-label col-md-2" })
@Html.HiddenFor(model => model.Inspection.ArticleId)
@Html.HiddenFor(model => model.Inspection.Article.AddressId)
@Html.HiddenFor(model => model.Inspection.Article.ArticlePropertiesVersion.Id)
@Html.HiddenFor(model => model.IsCreatedOnline)
@Html.HiddenFor(model => model.QuestionaireId);
<div class="col-md-10">
<div class="form-group row" id="article" style="@(Model.Inspection.Article != null ? "" : "display: none")">
<div class="col-md-10">
<div>
<span class="help-block" id="internNr">@(Model.Inspection.Article != null && !Model.Inspection.Article.InternNr.IsNullOrWhiteSpace() ? $"{ACA.Translations.Article.InternNr}: {Model.Inspection.Article.InternNr}" : "")</span>
</div>
<div>
<span class="help-block" id="serialNr">@(Model.Inspection.Article != null && !Model.Inspection.Article.SerialNr.IsNullOrWhiteSpace() ? $"{ACA.Translations.Article.SerialNr}: {Model.Inspection.Article.SerialNr}" : "")</span>
</div>
<div>
<span class="help-block" id="type">@(Model.Inspection.Article != null ? $"{ACA.Translations.Article.Type}: {Model.Inspection.Article.Type?.Name} - {Model.Inspection.Article.SubType?.Name}" : "")</span>
</div>
</div>
</div>
<div>
<button type="button" class="btn btn-warning editArticleButton" data-toggle="modal" data-target="#editArticleModal"><i class="fa fa-pencil-alt"></i></button>
</div>
</div>
</div>
现在我需要在运行时填充数据,所以从 indexedDB 中获取我的对象并在视图中填充对象值。有人知道如何执行此操作吗?
提前致谢。
Razor 语法与实际模型值的唯一方法是在加载视图之前将它们加载到控制器操作中。因此,为了正确加载值,您只需执行以下操作:
return View(Model)
其中 Model 是包含您的数据的对象。
为了在视图已经加载时填充这些字段,方法是 Javascript 向控制器中的其他一些操作发出 ajax 请求,该操作将以以下方式结束:
return JSON(Model)
并将 return 您的模型及其数据,然后使用 jQuery 或任何您想要的方式将它们加载到您的表单中。
* 编辑 *
要比 jquery 更快地完成此任务,您需要使用实现数据绑定的 js 库。这样的例子是 knockout.js 和 rivets.js 取决于什么最适合你的需要