zoukankan      html  css  js  c++  java
  • ASP.NET MVC使用Ajax刷新Partial View

    Model:

        public class TestModel
        {
            [Required]
            public string Id { get; set; }
        }

    Controller:

        public class TestController : Controller
        {
            // GET: Test
            public ActionResult Index()
            {
                ViewData["Name"] = "NULL";
                return View();
            }
    
            [HttpPost]
            public ActionResult TestRefresh()
            {
                var list = new List<TestModel>() { new TestModel { Id = "1" }, new TestModel { Id = "2" } };
                return PartialView("PartialInput", list);
            }
        }

    View:

    @{
        ViewBag.Title = "Index";
    }
    
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btRefresh").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Test/TestRefresh",// Controller名(TestController)/Method"
                    success: function (data) {
                        $("#TestDiv").html(data);// Partial View中的div
                    },
                    error: function (msg) {
                        alert('error:' + msg);
                    }
                });
            });
        });
    
    </script>
    
    <body>
        @{
            <div>
                @{
                    Html.RenderPartial("PartialInput");
                }
            </div>
            <input type="text" id="textRefresh">
            <input type="submit" id="btRefresh" value="Refresh">
        }
    </body>

    Partial View:

    @model List<partialview.Models.TestModel>
    
    <style>
        .green-background {
            background-color: yellow;
        }
    </style>
    
    <div id="TestDiv" class="green-background">
        @{
            if (Model == null)
            { return; }
        }
        @foreach (var item in Model)
        {
            <ul>
                <li>@item.Id</li>
            </ul>
        }
    </div>

    演示:

     

  • 相关阅读:
    android蓝牙技术
    startActivityForResult 页面跳转回调
    android提示框
    二级列表展示数据库查询
    字符串着色
    ActionBar窗口应用
    android 补间动画帧动画
    ExpandableListView二级列表
    解析json数组——TypeToken
    Scrapy中的Callback如何传递多个参数
  • 原文地址:https://www.cnblogs.com/jizhiqiliao/p/13141505.html
Copyright © 2011-2022 走看看