2013-10-31 65 views
2

如何在mvc剃鬚刀中更新兩個局部視圖的最佳方式? 我需要從Ajax調用中更新多個。這裏是更新的主體並且工作正確完成。這是真的嗎?有沒有更好的方法?我嘗試過搜索,但沒有看到任何東西。我做到了,如下所示: 我使用這種方式:在mvc剃鬚刀中更新兩個局部視圖的最佳方式

我的觀點:

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

}); 

局部視圖_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> 

我的控制器:

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

編輯:

該程序正常工作。但我想知道這是否是一種系統的方式?我肯定改變了我的身體?

我只需要更改表單中的數據。但它確實改變了整個身體的方式。

如果我寫以下代碼:

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

數據的表格的被重複。

+0

你的問題到底是什麼?有什麼不工作? –

+0

該程序正常工作。但我想知道這是否是一種系統的方式?我肯定改變了我的身體? – john

+0

我只需要更改表單中的數據。但它確實改變了我在控制器中更改了整個主體 – john

回答

0

你應該在控制器中View代替返回PartialView

return PartialView(viewModeltClasses); 

如果使用View,MVC將渲染視圖與佈局一起。如果您使用PartialView,則MVC將只呈現視圖本身的內容。有關更多信息,請參閱this question

+0

的方式:if(Request.IsAjaxRequest()) { }返回PartialView(listShipClasses); } return View(listShipClasses);正確完成。這是一個好方法嗎? – john

+0

@john我的意思是在您提供的代碼中的信息(短的否,int count = 10, int page = 1,string search =「」)''。在底部使用'return View(viewModeltClasses);',但它應該是'PartialView'。 –

+0

如果我只對控制器使用PartialView,Html和body標籤不在source.But首先我需要使用一個視圖然後我需要一個PartialView。 – john