ASP.NET MVC 2: Как освоить общее обновление / создать сценарии с всплывающими окнами, используя jQuery

Question

У меня есть страница Index . В div contentwrap оверлей отображается и выскакивает с помощью jQuery. gridcontainer должен обновляться через 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>

У меня есть частичное представление Сетка :

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

И у меня есть Создать страница / оверлей, который отображается в div contentWrap:

<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);
}

Как обновить частичное представление Сетка после создания нового сотрудника без загрузки всей страницы Index ?

Заранее спасибо!

Answer 1

Вы можете использовать jQuery для отправки на контроллер:

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

Контроллер считывает параметры:

[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 будет объектом, который вы хотите отправить обратно к вызову jQuery в формате JSON. Я не могу вставить весь код. Я попытался упростить, пытаясь сосредоточиться на основных аспектах.