zoukankan      html  css  js  c++  java
  • mvc4中使用部分视图局部刷新实例

    如上效果图,网页中有主视图(上)和部分视图(下),点击提交会把文本框中的值发送到服务器,再返回所有添加的信息,在下方局部更新(只更新部分视图),实现如下:

    1、网页主视图代码:

    @model MvcApplication1.Models.User
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    <input id="txt" /><button id="btn">提交(局部实现刷新)</button>
    <div id="data">
       @{Html.RenderAction("GetData");}
    </div>
    <hr />
    
    <script>
        $("#btn").click(function () {
            $("#data").load("/home/getdata", { "message": $("#txt").val() }, function () {
                alert("提交成功");
            });
        });
    </script>

    2、部分视图:

    @model IEnumerable<MvcApplication1.Models.msg>
    <p>以下是部分视图内容</p>
    @foreach (var item in Model)
                {
        <p>@item.message</p>
        <hr />
                } 

    3、controller

           PrintingEntities db = new PrintingEntities();//EF
           
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult GetData(msg msg)
            {
                db.msgs.Add(msg);
                db.SaveChanges();
               var list = db.msgs.OrderByDescending(x=>x.id).ToList();
               return PartialView(list);
            }            
  • 相关阅读:
    androidlayout_weight的使用
    软件开发中的真理.
    apk,task,android:process与android:sharedUserId的区别
    WIFI连接
    go simple web server
    echo命令
    shell if
    linux grep命令(包括正则)
    make命令和Makefile文件
    linux中grep命令的用法
  • 原文地址:https://www.cnblogs.com/lunawzh/p/6111246.html
Copyright © 2011-2022 走看看