Замена содержимого основного вида с частичным представлением

Question

Я написал несколько jquery, который выполняет получение действия, передавая в dashID и, надеюсь, должен был вернуть некоторый html с соответствующей информацией. Однако мой jquery, похоже, не возвращает данные.

Вот мой Javascript

function loadDashboard(dashID) { 
    $.get('@Url.Action("Dashboard", new {id = ' + dashID + '})', function (data) { 
     $('#dash-content').html(data); 
    }); 
} 

Я тогда проволоки до яваскрипта код для события OnClick на HTML элемент

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
      @foreach (var dashboard in Model.dashboard) 
      { 
       <li class="drop-text" onclick="loadDashboard(@dashboard.DashID)">@dashboard.DashName</li> 
      } 
      <li class="divider"></li> 
      <li class="drop-text" id="add-dashboard">Add dashboard</li> 
     </ul> 

и содержимое должно отображаться здесь

<div id="dash-content"> 
@Html.Partial("Dashboard", Model); 
</div> 

и здесь находится контроллер

public ActionResult Dashboard(int? id) 
    { 
     var dashID = id; 
     if (dashID == null || dashID == 0) 
     { 
      dashID = 1; 
     } 

     var getWidgetsQuery = (from widgets in db.widgets 
           where widgets.DashID == dashID 
           select widgets); 

     dvm.widgets = getWidgetsQuery.ToList(); 


     return PartialView(dvm); 
    } 

я следовал этот пост, однако он не работает для меня MVC4 Update Partial view

Answer 1

Я думаю, что было бы лучше, чтобы отделить бритву и JQuery.

визуализации элементов, как это:

@foreach (var dashboard in Model.dashboard) 
{ 

<li class="drop-text clickMe" data-id="@dashboard.DashID">@dashboard.DashName</li> 

... 
} 

Затем в нижней части вашей страницы добавить JQuery, Создать событие щелчка на .clickMe класса, отправить запрос Ajax.

<script type="text/javascript"> 
    var mUrl = '@Url.Action("Dashboard", "Controller")'; 

// Replace Controller with your Controller Name 

    $(function() { 
     $('.clickMe').click(function(e) { 

      e.stopPropagation(); 

      var btn = $(this); 

      $.ajax({ 
       url: mUrl, 
       data: { 
        id: btn.data('id') 
       }, 
       type: 'GET', 
       success: function(data) { 
        $('#dash-content').html(data); 

       }, 
       error: function(response) { 
        $('#dash-content').html('Failed'); 
       } 

      }) 

     }); 

    }); 
</script> 

EDIT

Если у вас есть JQuery в JS файл сделать это:

И в ваш JQuery файл, вы можете сделать это:

$('body').on('click', ".clickMe", function (e) { 

       e.stopPropagation(); 

       var btn = $(this); 

       $.ajax({ 
        url: btn.data('action-url'), 
        data: { 
         id: btn.data('id') 
        }, 
        type: 'GET', 
        success: function(data) { 
         $('#dash-content').html(data); 

        }, 
        error: function(response) { 
         $('#dash-content').html('Failed'); 
        } 

       }) 

      });