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