ASP.NET MVC 2：如何使用jQuery掌握使用弹出窗口的常见更新/创建场景

我有一个索引页。在contentwrap div中，覆盖由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>

我有局部视图网格：

我有一个创建页面/覆盖，它被呈现到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>

雇员控制员：

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

在创建新员工后，如何在不加载整个索引页面的情况下更新局部视图网格

---

提前谢谢

您可以使用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);
        }
    }
});

ReturnObject将是您希望以JSON格式发送回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));
}