Ajax Partial View - обновление всей страницы

Question

EDIT: Я понимаю, почему он не работает дважды. У меня есть вызов Ajax.BeginForm() внутри div, который уничтожается. Я переместил это в частичный вид. Теперь он отлично работает в Internet Explorer, но не в Firefox или Chrome. Часть сохраняется в db, но возвращаемый вид не является частичным представлением.

Я работаю над «редакцией» страницы для «Автомобиля». У меня есть список частей, которые можно добавить в автомобиль. Части показаны на частичном изображении. Частичный вид - это в основном DropDownList с некоторым javascript.

Я хочу, чтобы частичный вид обновлялся, когда пользователь нажимает кнопку «Добавить часть на автомобиль». Что происходит, так это то, что обновление заставляет всю страницу заполняться частичным представлением.

Вот мои последние файлы:

Контроллер:

[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> 
... 

Answer 1

Yay! Я выигрываю! У меня были все виды вопросов в форме. Я помещал @ Html.BeginForm внутри @ Html.BeginForm и тот же для Ajax.BeginForm.

Как только я исправил эти проблемы, он работал как шарм!