Частичный просмотр содержимого не перезагружается

Question

У меня есть кнопка с изображением, при нажатии этой кнопки функция ajax вызывает метод контроллера ApplicationAndUse, который должен передать список частичному представлению, включенному в мое представление. Предполагается, что содержимое частичного просмотра будет обновлено, но это не сработает, мое частичное все еще пусто. Мой код:

Общий вид:

@model List<String> 


<div class="row"> 
<div class="col-md-2"> 
    @foreach (var item in Model) 
    { 
     <div id="univers-@item" class="btn btn-info">@item</div><br /> 
    } 
</div> 
<div class="col-md-10"> 
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary()) 
</div> 
</div> 
@section scripts 
{ 
<script type="text/javascript"> 

    $(function() { 

     $('[id^=univers]').click(function() { 

      var selectedButton = $(this).attr('id'); 
      var selectedUniverse = selectedButton.substring(selectedButton.indexOf('-') + 1, selectedButton.lenght); 


      $.ajax({ 
       url: "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse", 
       type: "POST", 
       data: { idUniverse: selectedUniverse }, 
       dataType: "json", 
      }); 
     }); 
    }); 
</script> 
} 

Частичный вид:

@model List<int> 

@if (Model!= null) { 
foreach (var item in Model) 
{ 
    <div id="ApplicationUse-@item" class="btn btn-default">@item</div><br /> 
} 
} 

функции контроллера:

[OutputCache(Duration = 0)] 
    public ActionResult ApplicationAndUse(String idUniverse) 
    { 
     List<int> items = new List<int>(); 
     items.Add(1); 
     items.Add(2); 
     return PartialView("_ApplicationAndUsePartial", (object)items); 
    } 

Что мне не хватает?

Answer 1

Дайте уникальный идентификатор div, где мы хотим показать частичное представление.

<div id="myPartial" class="col-md-10"> 
    @Html.Partial("_ApplicationAndUsePartial", null, new ViewDataDictionary()) 
</div> 

И в success обработчике методы AJAX, обновление innerHTML этого Div с ответом, поступающим из вызова Ajax. Также вам не нужно передавать значение dataType при выполнении вызова ajax.

var myUrl= "http://" + window.location.host + "/UseAndNeed/ApplicationAndUse"; 

$.ajax({ type: "POST", 
      url : myUrl, 
      data: { idUniverse: selectedUniverse }, 
      success:function(result){ 
       $("myPartial").html(result); 
      } 
     }); 

Всегда следует использовать Url.Action или Url.RouteUrl HTML вспомогательные методы для создания URL к методам действий. Он позаботится о правильном построении URL-адреса независимо от текущей страницы/пути.

var myUrl= "@Url.Action("ApplicationAndUse","UseAndNeeed")"; 

Это работает, если ваш код js находится внутри бритвы. Но если ваш код находится в отдельном файле javascript, вы можете создать URL-адрес в своем бритвенном представлении с использованием вышеперечисленных вспомогательных методов и сохранить это в переменной, доступной вашему внешнему файлу js-файла. Всегда избегайте использования пространства имен javascript при этом, чтобы избежать возможных проблем с глобальными переменными javascript.

@section Scripts 
{ 
<script> 
    var myApp = myApp || {}; 
    myApp.Urls = myApp.Urls || {}; 
    myApp.Urls.baseUrl = '@Url.Content("~")';  
</script> 
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script> 

} 

И в файле PageSpecificExternalJsFile.js, вы можете прочитать это нравится.

var myUrl= myApp.Urls.baseUrl+"UseAndNeed/ApplicationAndUse"; 
$("#myPartial").load(myUrl+'?idUniverse=someValue');