.net mvc 利用分部視圖局部刷新.

頁面利用$.Ajax:

        $(function(){
            $("#btnpartview").click(function () {
                var model = [];
                model.push($("#txtAge").val(), $("#txtName").val());
                $.ajax({
                    url: '/Home/Refresh',//控制器活動,返回一個分部視圖,並且給分部視圖傳遞數據.
                    data: JSON.stringify(model),//傳給服務器的數據(即后台AddUsers()方法的參數,參數類型要一致才可以)
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8',//數據類型必須有
                    async: true,//異步
                    success: function (data) //成功后的回調方法
                    {
                        $("#myDiv").html(data);//data--就是對應的分部視圖頁面內容.
                        //alert(data)//彈出框
                    },
                    error: function (data) {
                        alert("失敗:"+data[0])//彈出框
                    }
              
                });
            })
        })

控制器中:

  public ActionResult Refresh(string[] person) { string str = person[0]; LinkedList<DemoData> datastest1 = new LinkedList<DemoData>(); //List<DemoData> datastest = new List<DemoData>();
            DemoData dd = new DemoData(); dd.txtno = "1"; dd.txtname = "李四"; dd.txtage = "22"; datastest1.AddLast(dd); DemoData dd1 = new DemoData(); dd1.txtno = "2"; dd1.txtname = "小王"; dd1.txtage = "23"; datastest1.AddLast(dd1); DemoData dd2 = new DemoData(); dd2.txtno = "3"; dd2.txtname = "張三"; dd2.txtage = "22"; datastest1.AddLast(dd2); //return PartialView("/Views/Home/_PartialPage2.cshtml", datastest1);//要絕對路徑
            return PartialView("/Views/Shared/PartView1.cshtml", datastest1);//要絕對路徑.datastest1--要傳到分部視圖中的數據.
        }

頁面:

    <div id="myDiv">Ajax 內容顯示
        @*@Html.Partial("PartView1.cshtml", Model);*@
    </div>

分部視圖:

@model IEnumerable<MvcApp.Models.DemoData>
<div>
    <div>
        <select id="opselect">
            <option value="opone">第一個值</option>
            <option value="optwo">第二個值</option>
            <option value="opthree">第三個值</option>
            <option value="optfour">第四個值</option>
        </select>
    </div>

    <table>
        @foreach (var item in Model)
            {
                var i = 0;
            <tr style="background-color:#CCC;">
                <td>
                    @item.txtno
                </td>
                <td style="width:30%">
                    @item.txtname
                </td>
                <td>
                    @item.txtage
                </td>
            </tr>
            i++;
        }
    </table>
</div>

 刷新之前的頁面:

刷新后的頁面: