Ajax Teilansicht - Updates gesamte Seite

Question

EDIT: Ich sehe, warum es nicht zweimal ausgeführt wird. Ich habe den "Ajax.BeginForm()" Aufruf innerhalb der Div, die ausgelöscht wird. Ich habe das in die Teilansicht verschoben. Jetzt funktioniert es großartig im Internet Explorer, aber nicht in Firefox oder Chrome. Das Teil wird in der Datenbank gespeichert, aber die zurückgegebene Ansicht ist keine Teilansicht.

Ich arbeite an einer "Bearbeiten" -Seite für ein "Fahrzeug." Ich habe eine Liste von Teilen, die dem Fahrzeug hinzugefügt werden können. Die Teile sind in einer Teilansicht dargestellt. Die Teilansicht ist im Grunde eine DropDownList mit etwas Javascript.

Ich möchte, dass die Teilansicht aktualisiert wird, wenn der Benutzer auf die Schaltfläche "Teil zu Fahrzeug hinzufügen" klickt. Was passiert, ist, dass das Update bewirkt, dass die gesamte Seite mit der Teilansicht gefüllt wird.

Hier sind meine neuesten Dateien:

Controller:

[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."); 
     } 

Teilansicht:

@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> 

Ausblick:

@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! Ich gewinne! Ich hatte alle Arten von Formular-Problemen. Ich habe @ Html.BeginForm in @ Html.BeginForm und das gleiche für Ajax.BeginForm gesetzt.

Sobald ich diese Probleme behoben hatte, funktionierte es wie ein Charme!