ビュー内にJSダイアログボックスがあります。ビューが返されると、ダイアログボックスが最大化/開かれます。ビューにはリンクもあり、ユーザーがリンクをクリックすると、このダイアログボックスが開きます。
ダイアログ内に[送信]というボタンがあります。私がやろうとしているのは、モーダルボックスが開いているときに、残りのページ要素をぼかしたり、非表示にしたりすることです。ダイアログボックス内の送信ボタンをクリックすると、モデルプロパティを使用してコントローラーアクションメソッドに投稿する必要があります。私はJS構文があまり得意ではありませんが、送信クリック内で送信値が「確認」の「作成」というコントローラーアクションにポストバックするにはどうすればよいですか？
@model RunLog.Domain.Entities.RunLogEntry
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
@Html.ValidationSummary(true)
<div class="exception">@(ViewBag.ErrorMessage)</div>
//xyz elements here
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select Run Dates</span>
<br />
<span id="RunDatesDisplayy"></span></span>
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
}
DialogBox（runDates.js）のJSファイル：
var RunDialog;
$(document).ready(function () {
RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
buttons: { "Submit": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#RunDatesChildDialogLink').click(function () {
RunDialog.dialog('open');
$("#runDatestreeview").parent().appendTo("form");
});
$("#runDatestreeview").parent().appendTo("form");
});
コントローラのアクション：
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates)
{
**EDIT:**
var RunDialog;
$(document).ready(function () {
RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400,
buttons: { "Continue": function () {
var str = $("#form").serialize();
$.ajax({
url: "/RunLogEntry/Create",
data: str,
cache: false,
type: 'POST',
dataType: 'json',
contentType: "application/json;charset=utf-8",
success: function (data, status) {
},
error: function (xhr, ajaxOptions, thrownError) { alert('error') }
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#RunDatesChildDialogLink').click(function () {
RunDialog.dialog('open');
$("#runDatestreeview").parent().appendTo("form");
});
$("#runDatestreeview").parent().appendTo("form");
});