アイテムを表すフォームがあります。フォームには送信ボタンが含まれています。送信ボタンがクリックされた場合、これらのフィールドの控えめな検証が行われる必要があります。
検証が失敗した場合、他に何も起こらないはずです。
検証に合格した場合、項目を Knockout.js のobservedArray コレクションに追加する必要があります。
どちらの場合も、サーバーに送信することなく、プロセス全体をクライアント側に残す必要があります。送信とサーバー側の検証は、プロセスの後の段階で行われます。
どうすれば目的の効果を達成できますか?
データ注釈付きの ASP.Net MVC を使用しています。クライアント側で検証ロジックを手動で複製することは好まない。
また、同じページに複数のフォームがあることにも言及する必要があります。
これが私がこれまでに行ったことです...
これが私の ASP.Net MVC レイアウト ファイルです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - JC Guns Online</title>
@*---------- Stylesheets ----------*@
@Styles.Render("~/Content/Bootstrap/bootstrap-theme.css")
@Styles.Render("~/Content/MightyIT/bootstrap_customizations.css")
@Styles.Render("~/Content/site.css")
@Styles.Render("~/Content/MightyIT/custom_styles.css")
@Styles.Render("~/Content/MightyIT/callout.css")
@Styles.Render("~/Content/font-awesome-4.0.3/css/font-awesome.min.css")
@RenderSection("css", required: false)
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
@*<li>
@using (Html.BeginForm())
{
<input id="txtQuickSearch" type="text" class="form-control col-lg-8" placeholder="Search">
<img src="~/Content/img/search_32.png" />
}
</li>*@
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
<div class="container body-content">
<br />
@RenderBody()
<br /><br />
<nav class="navbar navbar-default navbar-fixed-bottom">
<div style="text-align:center">
<img src="~/Content/img/logo_small.png" class="img-responsive" />
<sub style="position:absolute; right:10px; bottom:10px;">© @DateTime.Now.Year </sub>
</div>
</nav>
</div>
@*---------- Javascripts ----------*@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/KnockOut/knockout-3.0.0.js")
@Scripts.Render("~/Scripts/JQuery/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/Scripts/JQuery/jquery.validate.js")
@Scripts.Render("~/Scripts/JQuery/jquery.validate.unobtrusive.js")
@Scripts.Render("~/Scripts/JQuery/jquery.callout.unobtrusive.js")
@Scripts.Render("~/Scripts/MVCFoolProof/mvcfoolproof.unobtrusive.js")
@RenderSection("scripts",false)
</body>
</html>
これは、私が現在取り組んでいる関連するパーシャルのコードです (同じページに配置される同様のパーシャルがいくつかあります)。
<form id="AddCrimeForm">
<div class="panel panel-success">
<div class="panel-heading">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-11">Add a crime incident to the list</div>
<div class="col-lg-1">
<button type="submit" class="btn btn-success btn-xs" onclick="addCrime();"><i class="fa fa-plus"></i> Add</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="">
<div class="form-group">
<label class="control-label col-md-4" for="CaseNumber">Case Number</label>
<div class="col-md-8">
<input class="form-control text-box single-line" data-val="true" data-val-required="The Case Number field is required." id="CaseNumber" name="CaseNumber" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="CaseNumber" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="DateOfIncident">Date Of Incident</label>
<div class="col-md-8">
<input class="form-control text-box single-line valid" data-val="true" data-val-required="The Date of Incident field is required." id="DateOfIncident" name="DateOfIncident" type="date" value="">
<span class="field-validation-valid" data-valmsg-for="DateOfIncident" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label col-md-4" for="Description">Description</label>
<div class="col-md-8">
<textarea class="form-control text-box multi-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description"></textarea>
<span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<table class="table table-striped table-hover " id="CrimeList">
<thead>
<tr>
<th>Case Number</th>
<th>Date of Incident</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: $data.CaseNumber">Column content</td>
<td data-bind="text: $data.DateOfIncident">Column content</td>
<td data-bind="text: $data.Description" style="text-wrap: normal">Column content</td>
@*<td></td>
<td></td>
<td></td>*@
<td>...</td>
</tr>
</tbody>
</table>
そして、ここに client_crime_kjs.js のコードと、すべての KnouckoutJS ビューモデル コードを示します。
$(document).ready(
function ()
{
var Crime = function(CaseNumber, DateOfIncident, Description)
{
this.CaseNumber = CaseNumber;
this.DateOfIncident = DateOfIncident;
this.Description = Description;
}
var initialData = new Array();
var crimes = function (items)
{
var self = this;
//Data
self.items = ko.observableArray(items)
//operations
self.addCrime = function()
{
if ($("#AddCrimeForm").valid()) {
self.crime = new Crime($("#CaseNumber").val(), $("#DateOfIncident").val(), $("#Description").val());
//var JSONObj = { CaseNumber: $("#CaseNumber").val(), DateOfIncident: $("#DateOfIncident").val(), Description: $("#Description").val() };
self.items.push(this.crime);
}
//$("#CaseNumber").val() = "";
//$("#DateOfIncident").val() = "";
//$("#Description").val() = "";
}
}
ko.applyBindings(crimes(initialData), $("#CrimeList")[0])
}
);
基本的に、この段階で何が起こるかというと、フィールドが無効な場合、フォームは送信されませんが (当然のことです)、検証されると送信され (私の要件に反して)、私の KO observablearray はその後リセットされます。