1
編輯： 我明白了爲什麼它不會運行兩次。我在正在被刪除的div內部調用「Ajax.BeginForm（）」。我將其移至部分視圖。現在，它在Internet Explorer中運行良好，但不適用於Firefox或Chrome。零件保存到數據庫，但返回的視圖不是局部視圖。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>
...