長い一日、私はまだこれの上に机に頭を打ちつけています。スタックオーバーフローに関するすべてのjQueryuiオートコンプリートの投稿と、ほとんどのjQueryuiドキュメントを読んだと思います。
問題:
asp.netmvc4アプリケーションにフォームがあります。フォームはタイムシート/ワークチケットを提出するためのものです。ユーザーがプロジェクトを選択し、そのプロジェクトに基づいて、作業指示番号のオートコンプリートフィールドが有効になります。ユーザーがプロジェクトの既存の作業指示番号を選択した場合、2つの追加入力に作業指示に関する情報を入力します。ユーザーがオートコンプリートの提案された作業指示書を選択せずに完全に新しい作業指示書を入力できるようにし、フォームを検証する必要があります。問題は、オートコンプリートから提案を選択しないと検証が失敗することです。
jQuery-uiのドキュメントには、メソッドclose、disable、destroyが使用可能であることが示されていますが、それらの使用方法の良い例が見つからず、実際に私の状況で使用するのが最適です。また、私がjQuery-ui1.9を使用していることも注目に値するかもしれません。
私が得るエラー:
System.Data.Entity.Validation.DbEntityValidationException:1つ以上のエンティティの検証に失敗しました。詳細については、「EntityValidationErrors」プロパティを参照してください。
エラーは、_db.SaveChanges();を呼び出すコントローラーのコード行を示しています。
if ( ModelState.IsValid )
{
_db.WorkTickets.Add(workticket);
_db.SaveChanges();
}
モデルの状態は有効であり、保存しようとしているnullはありません。私のモデルでは、いくつかのフィールドでnullを許可していますが、この場合、すべてのフィールドが完全です。
オートコンプリートウィジェットから既存の作業指示を選択するか、空白のままにすると、フォームはうまく機能します。新しい作業指示書を入力した場合にのみ失敗します。ブレークポイントを設定し、変更の保存を呼び出す前に、モデルにworkticket.WONumberに入力した値があることを確認しました。
これが私のjQueryです。
$(document).ready(function () {
$("#ProjectID").change(function () {
var id = $(this).val();
var results = "result";
var source1 = "Project/QuickCCSearch?project=" + id;
$("#ChargeCode").autocomplete({ source: source1 });
$("#ChargeCode").attr("disabled", false)
var source2 = "Project/QuickPOSearch?project=" + id;
$("#PONumber").autocomplete({ source: source2 });
$("#PONumber").attr("disabled", false)
var source3 = "Project/QuickWOSearch?project=" + id;
$("#WONumber").attr("disabled", false)
$("#WONumber").autocomplete({
source: function (request, response) {
$.ajax({
url: source3,
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
$("#WONumber").attr("check", false);
}
}
});
},
change: function () {
if ($("#WONumber").attr("check") != false) {
$.getJSON("Project/JobLocation", { wo: $("#WONumber").val() },
function (data) {
$("#JobLocation").val(data);
});
$.getJSON("Project/JobDescription", { wo: $("#WONumber").val() },
function (data) {
$("#JobDescription").val(data);
});
}
}
});
$.getJSON("WorkTicket/GetClient/", { id: id },
function (data) {
$("#Client").html(data);
});
$.getJSON("WorkTicket/GetClientRep/", { id: id },
function (data) {
$("#ClientRep").html(data);
});
$.getJSON("WorkTicket/GetManager/", { id: id },
function (data) {
$("#Manager").html(data);
});
});
})
編集:これが私のHTMLです
@model WorkTicket
@{
ViewBag.Title = "Create";
}
<article>
<div class="linearBg1">
Create Daily Work Ticket
</div>
<br />
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<div class="linearBg1">
General Information
</div>
<div class="section-span-body">
<table>
<tr class="empTableRowBody2">
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.DateWorked)
</th>
<th class="empTableRowBody2" colspan="2">
@Html.LabelFor(Model => Model.ProjectName)
</th>
</tr>
<tr>
<td>
@Html.EditorFor(Model => Model.DateWorked)
</td>
<td colspan="2">
@Html.DropDownList("ProjectID")
</td>
</tr>
<tr class="empTableRowBody2">
<th class="empTableRowBody2">
Client
</th>
<th class="empTableRowBody2">
Client Rep
</th>
<th class="empTableRowBody2">
Manager
</th>
</tr>
<tr>
<td>
<div id="Client"></div>
</td>
<td>
<div id="ClientRep"></div>
</td>
<td>
<div id="Manager"></div>
</td>
</tr>
<tr class="empTableRowBody2">
<th class="empTableRowBody2">
Charge Code
</th>
<th class="empTableRowBody2">
PO Number
</th>
<th class="empTableRowBody2">
Work Order
</th>
</tr>
<tr>
<td>
@Html.TextBoxFor(Model => Model.ChargeCode, new { disabled = true })
</td>
<td>
@Html.TextBoxFor(Model => Model.PONumber, new { disabled = true })
</td>
<td>
@Html.TextBoxFor(Model => Model.WONumber, new { disabled = true, check = true })
</td>
</tr>
<tr class="empTableRowBody2">
<th class="empTableRowBody2" colspan="3">
Job Location
</th>
</tr>
<tr>
<td colspan="3">
@Html.TextBoxFor(Model => Model.JobLocation, new { @class = "inputWidth500" })
</td>
</tr>
<tr class="empTableRowBody2">
<th class="empTableRowBody2" colspan="3">
Job Description
</th>
</tr>
<tr>
<td colspan="3">
@Html.TextBoxFor(Model => Model.JobDescription, new { @class = "inputWidth500" })
</td>
</tr>
</table>
</div>
<div class="section-span-footer"></div>
<br />
<div>
<input type="submit" value="Next" />
</div>
}
</article>
@section Menu{
@Html.Partial("_MainMenu")
@Html.Partial("_MenuFooter")
}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/WorkTicket.js")
}
私はjQueryを初めて使用し、まだ学習しているので、多くのことを間違っていると確信しています。ユーザーがオートコンプリートウィジェットからオプションを選択しない場合、またはウィジェットの結果がnullの場合、オートコンプリートを無効にする方法はありますか?前もって感謝します!
T。