如何添加更新面板在MVC 3 [英] How to Add update panel in MVC 3

问题描述

我更新的产品数量由更新按钮，点击更新按钮页面后重装，而不是重新加载该页面我只希望通过Ajax来更新cartUpdatePanel表区

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

我的看法是

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

我将如何实现阿贾克斯点击更新按钮后，更新cartUpdatePanel表区

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

感谢名单提前

推荐答案

请考虑使用Ajax.BeginForm助手来创建表单。您可以使用AjaxOptions指定回调code捕获服务器输出，做任何你想要的（包括其注入到一个div，表，字段集。）

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 ..)

使用Ajax.BeginForm是很容易的

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
}

现在使用JavaScript，实现processServerResp作为一个函数，它接受一个参数。这个参数将包含什么都值从服务器传递到客户端。假设服务器返回的HTML，您可以使用下面的code注入到一个容器id_fo_the_div的ID

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 ..
}

您可以点击进入由AjaxOptions提供的其他有趣的功能，做非常有趣的事情。

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

在Ahax.BeginForm的http://www.blackbelt$c$cr.com/Articles/script/using-ajax-beginform-with-asp-net-mvc

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

快乐编码

这篇关于如何添加更新面板在MVC 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！