1
편집 : 두 번 실행되지 않는 이유를 확인합니다. 나는 "Ajax.BeginForm()"호출을 호출하여 div 내에서 지울 수 있습니다. 나는 그것을 부분보기로 옮겼다. 이제 Internet Explorer에서는 훌륭하게 작동하지만 Firefox 또는 Chrome에서는 작동하지 않습니다. 파트는 db에 저장되지만 반환 된 뷰는 부분 뷰가 아닙니다.Ajax 부분보기 - 전체 페이지 업데이트
"차량"의 "편집"페이지에서 작업 중입니다. 차량에 추가 할 수있는 부품 목록이 있습니다. 부품은 부분보기로 표시됩니다. 부분 뷰는 기본적으로 일부 자바 스크립트가 포함 된 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>
...