Как вставить полученный HTML с частичного представления в код javascript?

Question

Я использую grid-stack для функции перетаскивания в моем веб-приложении asp.net mvc.

У меня есть кнопка «Добавить виджет» ....

<button class="btn btn-white btn-primary" id="addwidget" type="submit">Add Widget</button> 

У меня также есть куча MVC5 частичных страниц (Razor), один файл для каждого «виджетов». Когда я нажимаю кнопку «Добавить виджет», я хочу вставить виджет на страницу. Сейчас здесь код JS для события нажатия кнопки ...

 $('#addwidget') 
     .click(function() { 
      var grid = $('.grid-stack').data('gridstack'); 
      var partialView = @Html.Partial("~/Views/Widgets/_MyImportLatest.cshtml").ToHtmlString(); 
      grid.addWidget($('<div class="ibox-content" style="height:160px;">' + partialView + '</div>'), 0, 0, 3, 2, true); 
     }); 

Да, Бритва код вперемешку с JS. И, к сожалению, он совсем не похож на partialView, как вы, возможно, догадались.

Я пытаюсь в основном получить полученный частичный вид в строку, чтобы я мог использовать эту строку html в функции addWidget. Если я hardcode partialView это работает, и виджет будет добавлен.

Любые идеи? Благодаря!

Answer 1

Вы можете рассмотреть возможность получения частичного представления контента методом действия асинхронно по мере необходимости. Когда вы нажимаете кнопку «Добавить», сделайте ajax-вызов метода действия, который вернет html-разметку, и вы можете добавить это к DOM по мере необходимости.

public ActionResult GetWidget() 
{ 
    return PartialView("~/Views/Widgets/_MyImportLatest.cshtml") 
} 

Теперь в вашем клик-событии позвоните этому методу действий и введите ответ, возвращающийся в DOM. Я не знаю, что делает ваш метод addWidget. Поэтому я прокомментировал эту строку и использовал общий вызов метода jQuery append для вашей справки.

$('#addwidget').click(function() { 

     var grid = $('.grid-stack').data('gridstack'); 
     $.get("/YourControllerName/GetWidget",function(htmlResponse){ 

      $("#YourContainerDiv").append(htmlResponse); 
      // grid.addWidget($('<div>' + htmlResponse + '</div>'), 0, 0, 3, 2, true); 

     }); 


});