Page with Partial: Prefered practice to re render a partial?

Question

I have a page using a model with a partial like so:

@Html.Partial(string PartialViewName)

The partial is using the same model as parent. There is inputs on parent page with button. That button has a onclick script:

    //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) {
        //    $('#')
        //}
        });
    });

Want I think i want is to have the controller action send back a populated model and then in the Ajax the success: function (data) will update the partial with that new model data.

How can this be achieved? Does anyone have a better idea? I am very new to this and i will give further information as requested. Thanks

score 1 · Accepted Answer · answered Jan 24 '18 at 12:00

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

Page with Partial: Prefered practice to re render a partial?

1 Answers1