具有部分的页面:首选实践重新呈现部分?

时间:2018-01-24 10:53:54

标签: jquery ajax asp.net-mvc

我有一个页面使用的模型部分如此:

@Html.Partial(string PartialViewName)

部分使用与父模型相同的模型。父页面上有输入按钮。该按钮有一个onclick脚本:

    //onClick search button
    $("#searchSubmitButton").on("click", function () {

    var sYear = $("#startPnr").val();

    var eYear = $("#endPnr").val();

    //Validation?

    debugger;
        $.ajax({
        url: '@Url.Action("FilterPerson", "Kostnadsstalle")',
        data: { startYear: sYear, endYear: eYear },
        error: function () { console.log("Error, Ajax Error.") },
        type: "POST",
        //success: function (data) {
        //    $('#')
        //}
        });
    });

我想我想要的是让控制器操作发回一个填充的模型,然后在Ajax中success: function (data)将使用新的模型数据更新部分。

如何实现这一目标?有没有人有更好的主意?我对此非常陌生,我将根据要求提供进一步的信息。感谢

1 个答案:

答案 0 :(得分:1)

//First take one empty Div in your parent view.
//Give id to that div. We will append partial view's HTML in this div.
    <div id="divList"></div>



//Call controller's method from your Ajax.
 //This method will return entire updated HTML in Ajax Success.
            [HttpPost]
            public ActionResult getMovieList(Model foRequest)
            {           
                //add code here that fetch data according to your ajax request..
                ModelClass loResponse = new ModelClass();
                loResponse = DbContextObj.FetchDataFromDB(foRequest);

                //bind partial view with new data and return partial view HTML..
                return PartialView("~/Views/Movie/_MovieList.cshtml", loResponse);
            }

//Your Ajax call will be like this..
$.ajax({
        method: "POST",
        url: GetMovieListURL, //Add proper URL here.. {localhost}/{controller name}/{Action name}
        dataType: "html",
        cache: false,
        data: { foRequest: RequestParam },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: function (data) {
        //here data will contain updated HTML of partial view..
            $('#divList').html('');//clear old html content first..
            $('#divList').append(data);//Then append latest HTML in parent view's div.                        
        }
    });