ASP.NETMVC使用Ajax刷新PartialView

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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>