私のコードが現在動作する方法は、ボタンが押されたときに変数が渡され、Jquery がモーダル ウィンドウを再表示し、コントローラー アクションの [HttpGet] 部分を取得するために AJAX 呼び出しを行うことです。これにより、モーダル ウィンドウにフォームが読み込まれます。モーダルには保存ボタンとキャンセル ボタンがあり、保存ボタンが押されると ajaxSubmit でフォームが送信されます。保存が成功すると、何かがデータベースに保存され、URL が作成されて jquery に返され、ユーザーは window.location.href でリダイレクトされます。
私が望んでいるのは、保存ボタンが押されたときにコントローラーアクションの [HttpPost] 部分がいくつかのロジックの選択を行い、アクション内で特定の条件が満たされた場合、 PartialView(model) が返されることですユーザーが情報を再入力する必要がなく、保存が完了しなかった理由を理解し、すばやく編集して保存を再試行できるように、エラー メッセージまたはポップアップを含むモーダル ウィンドウ。
Jクエリ:
var createNewClaimSetup = function () {
$(selectors.btnCreateNewClaim).live('click', function () {
var serialNumber = $(this).attr(attributes.serialNumber);
var spaRegistrationId = $(this).attr(attributes.spaRegistrationId);
var customerNumber = $(this).attr(attributes.customerNumber);
var customerStatementName = $(this).attr(attributes.customerStatementName);
$(selectors.serialNumberHidden).val(serialNumber);
$(selectors.spaRegistationIdHidden).val(spaRegistrationId);
$(selectors.customerNumberHidden).val(customerNumber);
$(selectors.customerStatementName).val(customerStatementName);
$(selectors.dialog).attr(attributes.title, 'Create New Claim');
$.ajax ({
url: inputs.warrantyClaimCreateUrl,
type: "GET",
data: {
serialNumber: serialNumber,
customerNumber: customerNumber
},
cache: false,
success: function (result) {
$(selectors.dialog).html(result.toString());
$(selectors.dialog).dialog ({
resizable: false,
height: 600,
width: 850,
modal: true,
buttons: {
'Save': function () {
// check to see if a value has been entered for problem description before submitting form
//
if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
$(selectors.createNewClaimForm).ajaxSubmit({
cache: false,
success: function (data) {
if (data.length == 0) {
location.reload();
$(selectors.dialog).dialog('close');
} else {
$(selectors.dialog).dialog('close');
window.location.href = data.redirectToUrl;
}
}
});
else{
return alert('You must select a prefix and enter a description for the problem before saving');
}
},
Cancel: function () {
$(this).dialog('close');
}
}
});
}
});
});
}
コントローラー アクション GET (簡潔にするために編集):
public virtual ActionResult WarrantyClaimCreateNew(string serialNumber, string customerNumber, string customerStatementName)
{
WarrantyClaimModel model = wcs.CreateNewClaimInfo(serialNumber, customerNumber, false);
ViewBag.InvalidPrefix = false;
ViewBag.DupeWaNum = false;
return View(model);
}
コントローラー アクション POST (簡潔にするために編集):
[HttpPost]
public virtual ActionResult WarrantyClaimCreateNew(WarrantyClaimCreateNewModel model)
{
if (ModelState.IsValid)
{
WaNumberDupeModel WAdupe = new WaNumberDupeModel(model.WarrantyClaimNumber);
// Rebuild WarrantyClaimModel object to pass back to view
WarrantyClaimModel model2 = wcs.CreateNewClaimInfo(model.SerialNumber, model.CustomerNumber, false);
// check if prefix is valid
if (WAdupe.DupeType == WaDupeType.InvalidPrefix)
{
ViewBag.InvalidPrefix = true;
return PartialView(model2);
//return Json(new { Url = Url.Action("WarrantyClaimCreateNew", model2) });
}
// check if wa number already exists
if (WAdupe.DupeExists)
{
ViewBag.DupeWaNum = true;
return PartialView(model2);
}
// create/save the new claim
if (wcs.CreateNewWarrantyClaim(model))
{
var redirectString = "WarrantyClaimDetail?warrantyClaimNumber=" + model.WarrantyClaimNumber;
if (Request.IsAjaxRequest())
{
return Json(new { redirectToUrl = redirectString }, JsonRequestBehavior.AllowGet);
}
return RedirectToAction(Actions.WarrantyClaimDetail(newClaimNumber));
}
return RedirectToAction(Actions.WarrantyClaimSaveFail());
}
else
{
return View(model);
}
}
コントローラ アクションの条件が満たされた場合に表示されるアラート:
<%if (ViewBag.InvalidPrefix == true) { %>
alert("Please choose a valid prefix for your warranty claim number.");
<% } %>
<%if (ViewBag.DupeWaNum == true) { %>
alert("Warranty Claim Number already exists, please choose another manual WA number or try again.");
<% } %>
モーダルでリフレッシュされたビューをリロードすることさえできませんでした。
AJAX 呼び出し (タイプ: "GET") の最初の部分は、URL を使用してコントローラー アクション GET に入り、返された View(model) を取得してから HTML に変換し、モーダル ウィンドウ HTML をそれに設定することを知っています。私は ajaxSubmit がコントローラーに戻り、アクションの POST バージョンを取得し、成功のデータ部分: 関数 (データ) が条件が満たされた場合のビューの戻り値であり、リダイレクトする構築された JSON URL であると想定していますそうでない場合に。
モーダル html をデータに設定し、コントローラーの無効なプレフィックス条件が満たされていることを確認しようとしましたが、モーダル ウィンドウのコンテンツが更新されないようです。また、コントローラーがビューまたは JSON を介して URL を返したかどうかを JQUERY で論理的に伝える方法を理解する必要がありますが、それを理解するのは難しくないと思います。
私は十数ほどの mvc jquery ajax modal 同様の質問を読みましたが、役に立ちましたが、そうではありませんでした
ここでやりたいことをどのように達成できるかについて、いくつかの光を当ててくれてありがとう。