ASP.NET MVC 2: Comment maîtriser des scénarios de mise à jour/création courants avec des fenêtres contextuelles à l'aide de jQuery

Question

J'ai une page Index. Dans la div de contentwrap, la superposition est rendue et enregistrée par jQuery. Le gridcontainer doit être mis à jour via ajax.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
     <h2> 
      List of Employees</h2> 
     <br /> 
     <div id="gridcontainer"> 
      <% Html.RenderPartial("Grid", Model); %> 
     </div> 
     <%= Html.StandardOverlayCreateButton() %> 
     <div class="apple_overlay" id="overlay"> 
      <div class="contentWrap"> 
      </div> 
     </div> 
    </asp:Content> 

j'ai la vue partielle Grille:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UserInterface.Models.EmployeeForm>>" %> 
    <div> 
     <table> 
      ... 
     </table> 
    </div> 

Et je la Créer la page/superposition qui est rendue dans le contentWrap div:

<div> 
     <h2> 
      Create</h2> 
     <% using (Ajax.BeginForm("Create", "Employee", new AjaxOptions { HttpMethod = "POST", OnComplete = "$(\"a[rel]\").close()", InsertionMode = InsertionMode.Replace, UpdateTargetId = "gridcontainer" })) 
      { 
     %> 
     <% Html.EnableClientValidation(); %> 
     <%= Html.ValidationSummary(true) %> 
     <fieldset> 
      <legend>Fields</legend> 
      ... 
     </fieldset> 
     <p> 
      <input type="submit" value="Create" /> 
     </p> 
     <% } %> 
</div> 

EmployeeController :

// 
// POST: /Employee/Create 
[HttpPost] 
public ActionResult Create(Employee employee, [Optional, DefaultParameterValue(0)] int teamId) 
{ 

    employee.AddTeam(_teamRepository.GetById(teamId)); 
    _employeeRepository.SaveOrUpdate(employee); 

    var updatedmodel = Mapper<List<Employee>, List<EmployeeForm>>(_employeeRepository.GetAllEmployeesWithEagerLoadedTeams()); 

    // What do I have to return here?! 
    return View(updatedmodel); 
} 

Comment puis-je mettre à jour la vue partielle Grille après avoir créé le nouvel employé sans charger l'ensemble index Page?

Merci d'avance!

Answer 1

Vous pouvez utiliser jQuery pour poster au contrôleur:

$.ajax({ 
    type: 'POST', 
    url: '<%=Url.Action("Create", Customer")%>', 
    data: { 
     CustomerName: $('#CustomerName').val(), 
     CustomerAddress: $('#CustomerAddress').val() 
      }, 
    dataType: 'json', 
    complete: function(XMLHttpRequest, textStatus) { 
     var Response = $.parseJSON(XMLHttpRequest.responseText); 
     // Add element to the grid 

     if (Response.Id > 100) { 
     var Li = $('#myGridRow'); 
     var rowEl = $("<div></div>").text(Response.CustomerCode) 
      .appendTo(Li); 
     } 
    } 
}); 

Le contrôleur lirait les paramètres:

[HttpPost] 
public ActionResult Create(string CustomerName, string CustomerAddress) 
{ 
    // Save 
    var Result = new ReturnObject(); 
    Result.Id = 100;   // DB Id 
    Result.CustomerName = CustomerName; 
    return (Json(Result)); 
} 

returnObject serait un objet que vous voulez renvoyer à l'appel jQuery un format JSON. Je ne peux pas coller le code entier. J'ai essayé de simplifier en essayant de me concentrer sur les aspects principaux.