How to Add update panel in MVC 3

问题

I am updating product Quantity by Update button, after clicking on update button page is reloading, instead of reloading that page i want to update that "cartUpdatePanel" table area only by Ajax

My View is

using (Html.BeginRouteForm("ShoppingCart", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table id="cartUpdatePanel" class="table_class" cellpadding="0" cellspacing="0">
@foreach (var item in Model.Items)
    {
 <tr style="background: #f3f3f3;">
   <td>
    <input type="submit" name="updatecartproduct@(item.Id)"  value="Update Cart" id="updatecartproduct@(item.Id)" />
   </td>
</tr>
}

}

My Controller action is, by which i am updating Product Quantity

 [ValidateInput(false)]
    [HttpPost, ActionName("Cart")]
    [FormValueRequired(FormValueRequirement.StartsWith, "updatecartproduct")]
    public ActionResult UpdateCartProduct(FormCollection form)
    {          

        if (!_permissionService.Authorize(StandardPermissionProvider.EnableShoppingCart))
            return RedirectToRoute("HomePage");

        //get shopping cart item identifier
        int sciId = 0;
        foreach (var formValue in form.AllKeys)
            if (formValue.StartsWith("updatecartproduct", StringComparison.InvariantCultureIgnoreCase))
            {
                sciId = Convert.ToInt32(formValue.Substring("updatecartproduct".Length));
                break;
            }
        //get shopping cart item
        var cart = _workContext.CurrentCustomer.ShoppingCartItems
            .Where(x => x.ShoppingCartType == ShoppingCartType.ShoppingCart).ToList();
        var sci = cart.Where(x => x.Id == sciId).FirstOrDefault();
        if (sci == null)
        {
            return RedirectToRoute("ShoppingCart");
        }

        //update the cart item
        var warnings = new List<string>();
        foreach (string formKey in form.AllKeys)
            if (formKey.Equals(string.Format("itemquantity{0}", sci.Id), StringComparison.InvariantCultureIgnoreCase))
            {
                int newQuantity = sci.Quantity;
                if (int.TryParse(form[formKey], out newQuantity))
                {
                    warnings.AddRange(_shoppingCartService.UpdateShoppingCartItem(_workContext.CurrentCustomer,
                        sci.Id, newQuantity, true));
                }
                break;
            }


        //updated cart
        cart = _workContext.CurrentCustomer.ShoppingCartItems.Where(x => x.ShoppingCartType == ShoppingCartType.ShoppingCart).ToList();
        var model = PrepareShoppingCartModel(new ShoppingCartModel(), cart, true, false, true);
        //update current warnings
        //find model
        var sciModel = model.Items.Where(x => x.Id == sciId).FirstOrDefault();
        if (sciModel != null)
            foreach (var w in warnings)
                if (!sciModel.Warnings.Contains(w))
                    sciModel.Warnings.Add(w);
        return View(model);
    }

How i will achieve to update "cartUpdatePanel" table area after clicking on update button by ajax

Thanx in Advance

回答1:

Please consider using Ajax.BeginForm helper to create the form. You can use AjaxOptions to specify callback code to capture server output and do whatever you want (including injecting it to a div, table, field set ..)

Using the Ajax.BeginForm is very easy

@using (Ajax.BeginForm(
         "name_of_the_action", 
             new AjaxOptions { 
        OnSuccess = "processServerResp",
        HttpMethod = "POST"},
         new {enctype="multipart/form-data"})
){
    // rest of the form code
}

Now using javascript, implement processServerResp as a function which takes a single parameter. This parameter will contain what ever values passed from the server to the client. Assuming the server is returning html, you can use the following code to inject it into a container with the id of id_fo_the_div

function processServerResp(serverData){
    $(‘#id_fo_the_div’).html(serverData);
    // or inject into a table ..
}

You can tap into other interesting features provided by AjaxOptions and do very interesting things.

A good article on Ahax.BeginForm http://www.blackbeltcoder.com/Articles/script/using-ajax-beginform-with-asp-net-mvc

Happy coding

来源：https://stackoverflow.com/questions/17046564/how-to-add-update-panel-in-mvc-3