best way for update two partial view in mvc razor

Question

how to best way for update two partial view in mvc razor ? I need to update Multiple from an Ajax call.Here is the updated body And the work is done properly. Is this way true? Is there a better way?I've tried searching but did not see anything. I did it as follows: I am using this way :

my view :

    @using (Ajax.BeginForm("Information", "Classes",
                            new AjaxOptions
                            {
                                 HttpMethod = "get",
                            }))
{


    <div id="Search">
        <input type="text" placeholder="Search" id="txtSearch" />
        <a id="StartSearch" href="javascript:void(0);" style="background-color: burlywood">Search</a>
    </div>

        <select id="dropDown">
            <option>10</option>
            <option>20</option>
            <option>30</option>
        </select>

    <div id="Paging">
        @Html.Partial("_PagingNumbers", Model.Page)
    </div>

    <div id="gridItems">
        @{ Html.RenderPartial("ClassesList", Model); }
    </div>

}

<script type="text/javascript">

$(document).ready(function () {

     $("#StartSearch").click(function () {
         changeContent('@Model.Page.CountRecordInPage', $("#txtSearch").val());
     });

     $("#dropDown").change(function () {
         changeContent($("#dropDown").val(), '@Model.Page.TextSearch');
     });

     function changeContent(count, search) {
         var currentUrl = '/' + '@Model.Page.Controller' + '/' + '@Model.Page.ActionName';
         var dataForChangeContent = {
             typeNo: '@Model.Page.ValueIdParametr',
             countryNo: '@Model.Page.CountryNo',
             count: count,
             search: search
         };
         $.ajax({
             url: currentUrl,
             data: dataForChangeContent,
             success: function (data) {
                 $('body').html(data);
             }
         });
     }

 });

partial view _PagingNumbers :

@model DGM.Common.Page


<script>
    function ChangeCurrentPage(obj) {
        var   page = $(obj).text();
    GoToPage(page);
}

function GoToPage(page) {

    var dataForChangeCurrentPage = {
        '@Model.NameIdParametr': '@Model.ValueIdParametr',
            countryNo: '@Model.CountryNo',
            count: '@Model.CountRecordInPage',
            search: '@Model.TextSearch',
            page: page
        };
        var urlChangeCurrentPage = '/' + '@Model.Controller' + '/' + '@Model.ActionName';
    $.ajax({
        url: urlChangeCurrentPage,
        data: dataForChangeCurrentPage,
        success: function (data) {
            $('body').html(data);
            var requestedUrl = this.url.replace(/[&?]X-Requested-With=XMLHttpRequest/i, "");
            history.pushState({ html: '' }, document.title, requestedUrl);
        }
    });
}

</script>
<div style="margin: 0 auto; text-align: center;">

    <div style="display: inline-table">

        @{
            var countPage = Model.CountPage;
            var currentPage = Model.CurrentPage;
        }
        @for (int i = 1; i < countPage + 1; i++)
        {

            <a class="scroll-content-item ui-widget-header" onclick=" ChangeCurrentPage(this) " href="javascript:void(0);">@i</a>
        }

    </div>


</div>

my controller :

 public ActionResult Information(short No, int count = 10,
        int page = 1, string search = "")
    {
        var Page = new Page();

        var  ClassesService = new ClassesService();

        var  viewModeltClasses = new  viewModeltClasses ();


        int totalCountRecord;

        if (string.IsNullOrWhiteSpace(search))
        {

                totalCountRecord =  ClassesService.GetCount(d => d.No == No);
                 viewModeltClasses .AirCraftClasseses =  ClassesService.GetMany(d => d.No == No,
                    page - 1,
                    count);

        }
        else
        {
            Page.IsSearch = true;
            Page.TextSearch = search;
            var predicateSearch = GetSearchPredicateAirCraftClasses(search, TypeSearch.Contains, No, country);
            var predicateOrder = GetOrderPredicateAirCraftClasses();
            totalCountRecord =  ClassesService.GetCountSearch(predicateSearch.Expand());

             viewModeltClasses .AirCraftClasseses =  ClassesService.Search(predicateSearch.Expand(), predicateOrder,
                page - 1, count);
        }


         viewModeltClasses .IsAllCountries = country == -1;
        Page.AllRecord = totalCountRecord;
        Page.CountPage = CommonMethods.GetCountPage(totalCountRecord, count);
        Page.NameIdParametr = "No";
        Page.ValueIdParametr = No;
        Page.CountRecordInPage = count;
        Page.ActionName = "ClassesInformation";
        Page.Controller = "Classes";
        Page.CurrentPage = page;

         viewModeltClasses .Page = Page;

        return View( viewModeltClasses );
    }

edit :

The program works correctly. But I want to know whether this is a systematic way? I have certainly changed my body?

I just need to change the data within the form. But it does change the way the entire body.

If I write the following code:

$('form').html(data);

Data out of the form is repeated.

Answer 1

You should return a PartialView in stead of a View in the controller:

return PartialView(viewModeltClasses);

If you use View , MVC will render the view along with the layout. If you use PartialView , MVC will just render the content of the view itself. See this question for more info.