1
編集： なぜ2回実行されないのか分かります。私は、 "Ajax.BeginForm（）"という名前のdiv内の呼び出しを消しています。私はそれをパーシャルビューに移動しました。今はInternet Explorerではうまく動作しますが、FirefoxやChromeではうまく動作しません。パートはdbに保存されますが、返されるビューはパーシャルビューではありません。Ajaxパーシャルビュー - ページ全体を更新
「車両」の「編集」ページで作業しています。ビークルに追加できるパーツのリストがあります。部品は部分的な図で示されています。部分的なビューは基本的にいくつかのjavascriptを持つDropDownListです。
ユーザーが「車両に部品を追加」ボタンをクリックすると、パーツビューが更新されます。起こっているのは、更新によってページ全体が部分的なビューで満たされるということです。ここで
私の最新のファイルは、以下のとおりです。
コントローラー：
[HttpGet]
public ActionResult _AddPartToVehicle(IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel> vehicleEditAddPartToVehicleViewModel)
{
return View(vehicleEditAddPartToVehicleViewModel);
}
[HttpPost]
public ActionResult _AddPartToVehicle(Guid partID, Guid vehicleID)
{
Vehicle vehicle = db.Vehicles.Find(vehicleID);
Part part = db.Parts.Find(partID);
//protect against concurrency (what if someone has deleted this part or this vehicle since the form was loaded?)
try
{
if ((vehicle != null) && (part != null))
{
vehicle.Parts.Add(part);
db.SaveChanges();
ViewBag.VehicleID = vehicleID;
return PartialView(GetPartsForThisVehicle(vehicle));
}
}
catch (DataException)
{
//Log the error (add a variable name after Exception)
ModelState.AddModelError(string.Empty, "Unable to add part to vehicle. Try again, and if the problem persists contact your system administrator.");
}
部分図：
@model IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>
@section scripts{
}
@using (Ajax.BeginForm("_AddPartToVehicle", new AjaxOptions() { UpdateTargetId = "divAddPartToVehicle", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
{
<fieldset>
<legend>Parts For This Vehicle</legend>
@if (Model != null)
{
if (Model.ToList().Count > 0)
{
<div class="editor-field">
<table>
<tr>
<th>Part</th>
<th></th>
</tr>
@foreach (var part in Model)
{
if (part.OnVehicle)
{
<tr>
<td>
@part.Name
</td>
<td>
@Html.ActionLink("Details", "Edit", "Part", new { id = part.PartID }, null) |
@Html.ActionLink("Remove", "RemoveVehiclePart", new { partID = part.PartID, vehicleID = ViewBag.VehicleID })
</td>
</tr>
}
}
</table>
</div>
}
}
<table class="layouttable">
<tr>
<td>
<div title="" id="tooltip">
@{
IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel> partsNotOnVehicle = new List<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>();
foreach (var part in Model)
{
if (!part.OnVehicle)
{
ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel partNotOnVehicle = new ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel();
partNotOnVehicle.Cost = part.Cost;
partNotOnVehicle.Name = part.Name;
partNotOnVehicle.Notes = part.Notes;
partNotOnVehicle.OnVehicle = part.OnVehicle;
partNotOnVehicle.PartID = part.PartID;
partsNotOnVehicle.Add(partNotOnVehicle);
}
}
@Html.DropDownList("partID", partsNotOnVehicle.Select(m => new SelectListItem() { Text = m.Name, Value = m.PartID.ToString() }), new { @class = "dropdown", onchange = "GetDivTitle(this.value)", onmouseover = "GetDivTitle(this.value)" })
}
</div>
</td>
</tr>
<tr>
<td>
<div id="divAddPartToVehicle">
<input type="hidden" name="vehicleID" value="@ViewBag.VehicleID") />
<input type="submit" value="Add Part To Vehicle"/>
</div>
</td>
</tr>
</table>
</fieldset>
}
<script type="text/javascript">
function GetDivTitle(value) {
document.getElementById("tooltip").title = GetDropDownNotes(value);
}
function GetDropDownNotes(value) {
switch (value) {
@foreach (ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel item in Model)
{
<text>
case '@item.PartID.ToString()':
return '@item.Notes.Replace("\'", "").Replace("\"", "").Replace("\n", "").Replace("\r", "")';
break;
</text>
}
}
}
</script>
ビュー：
@section scripts {
@Content.Script("jquery.validate.min.js", Url)
@Content.Script("jquery.validate.unobtrusive.min.js", Url)
@Content.Script("jquery.unobtrusive-ajax.min.js", Url)
}
...
<div id="divAddPartToVehicle">
@Html.Partial("_AddPartToVehicle", (IList<ShopLog.ViewModels.VehicleEditAddPartToVehicleViewModel>)ViewBag.Parts)
</div>
...