asp.net mvc中Ajax模型无刷新更新

本文介绍了如何在ASP.NET MVC框架下利用Ajax技术实现页面部分视图的无刷新更新,通过控制器传递Model数据,实现了动态交互的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关键点是在对 部分视图 进行更新。Model数据可以很好的表现。代码如下:

 

 

控制器部分:

    public class OrderController : Controller
    {
        aiyuepaiEntities entity = new aiyuepaiEntities();//实例化实体模型
        service method = new service();//实例化引用的方法类
        // GET: Order
        public ActionResult DeliveryAddress()
        {
            HttpCookieCollection CookieCollect = System.Web.HttpContext.Current.Request.Cookies;
            if (CookieCollect["userUid"] == null)
            {
                return RedirectToAction("Login", "Login");
            }
            else
            {
                Guid uid = Guid.Parse(CookieCollect["userUid"].Value);
                User userinfo = method.userinfoAll(uid);
                return View(userinfo);

            }
        }

        [HttpPost]
        public PartialViewResult DeliveryAddressPartialView(User user)
        {
            HttpCookieCollection cookieCollection = System.Web.HttpContext.Current.Request.Cookies;
            if (cookieCollection["userUid"] != null)
            {
                Guid uid = Guid.Parse(cookieCollection["userUid"].Value);
                User_t userinfo = entity.User_t.Where(p => p.User_Uid == uid).FirstOrDefault();
                if (userinfo != null)
                {
                    userinfo.User_City = user.User_City;
                    userinfo.User_DeliveryAddress1 = user.User_DeliveryAddress;
                    userinfo.User_RealName = user.User_RealName;
                    userinfo.User_DeliveryAddress2 = user.User_PostalCode;
                    userinfo.User_Phone = user.User_Phone;
                    if (entity.SaveChanges() > 0)
                    {
                        User usernew = method.userinfoAll(uid);
                        return PartialView(usernew);
                    }
                    else
                        return null;
                }
                else
                    return null;

            }
            else
                return null;

           
        }
    }

 视图部分:

@model aiyuepai.Models.User
@{
    ViewBag.Title = "收货地址";
    Layout = "~/Views/Shared/_Layout_Personinfo_Page.cshtml";
}

<h2>收货地址</h2>
<hr />
@using(Ajax.BeginForm("DeliveryAddressPartialView", "Order",new AjaxOptions { UpdateTargetId= "deliveryaddresstable" }))
{
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">地址信息:</label>
        <div class="col-sm-10">
            <input class="form-control" placeholder="城市" name="User_City" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">详细地址:</label>
        <div class="col-sm-10">
            <input class="form-control" placeholder="请输入详细地址信息,如道路、门牌号等" name="User_DeliveryAddress" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">邮政编码:</label>
        <div class="col-sm-10">
            <input class="form-control" placeholder="邮政编码" name="User_PostalCode" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">收货人姓名:</label>
        <div class="col-sm-10">
            <input class="form-control" placeholder="用户自己的真实名" name="User_RealName" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">手机号码:</label>
        <div class="col-sm-10">
            <input class="form-control" placeholder="用户自己的手机号码" name="User_Phone" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox" checked />设置为默认收货地址
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">修改</button>
        </div>
    </div>
</div>
}



@Html.Partial("DeliveryAddressPartialView",Model)
@model  aiyuepai.Models.User
<table id="deliveryaddresstable" class="table table-bordered">
    <thead>
        <tr>
            <th>收货人</th>
            <th>所在地区</th>
            <th>详细地址</th>
            <th>邮编</th>
            <th>电话/手机</th>
            <th>操作</th>
            <th></th>
        </tr>
    </thead>
    <tbody >
        <tr>
            <td>@Model.User_RealName</td>
            <td>@Model.User_Province @Model.User_City</td>
            <td>@Model.User_DeliveryAddress</td>
            <td>@Model.User_PostalCode</td>
            <td>@Model.User_Phone</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值