Как я могу перезагрузить div с PartialView в ASP.NET MVC, используя jQuery?

StackOverflow https://stackoverflow.com/questions/1433419

Вопрос

У меня есть div с частичным внутри где-то на странице. У меня есть событие на кнопке. Как я мог написать Javascript, который принимает div и перезагружает его, а также перезагружает частичное представление.

У меня есть это в другом представлении. Но я не могу сделать это сейчас. Но мне нужно, чтобы то же самое происходило только при выполнении jQuery, а не непосредственно на странице. Могу ли я запустить, возможно, симуляционный код AJAX в сценарии JQuery, потому что его Javascript тоже не так ли? 

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>
<div id="feiertage">
    <% Html.RenderPartial("FeiertagTable"); %>
</div>
<%  } %>

Я бы помог мне, если бы мог запустить вышеописанный скрипт, запустив событие click или что-то в этом роде

Это было полезно?

Решение

Давайте начнем с некоторых основных действий контроллера: 

public class FeiertagController
{
    IFeiertagService feiertagService = new FeiertagService();

    public ActionResult EditFeiertag()
    {
        // ... return your main edit view
        return View();
    }

    // Will be called by your jquery ajax call
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

Итак, EditFeiertag () используется для визуализации всей страницы редактирования, и эта страница будет вызывать GetFeiertagTable (), когда она хочет асинхронно визуализировать ваше частичное представление.

Теперь, на ваш взгляд, допустим, у вас есть что-то вроде: 

<div id="Container">
    <div id="LeftPanel">
        // ... Some menu items
    </div>
    <div id="RightPanel">
        <a id="ReloadLink" href="#">Reload Table</a>
        <div id="FeiertagTable>
            <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %>
        </div>
    </div>
</div>

Это работает нормально и загрузит ваш стол один раз. Но вы хотите перезагрузить таблицу Feiertag, если щелкнете по определенному элементу (в нашем случае это #ReloadLink).

Добавьте следующее в вашей страницы: 

<head>
        <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stop the links default behavior
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });
        </script>
</head>

Затем добавится событие для события click для ссылки на перезагрузку, которое вызовет метод jquery load (). Этот метод является упрощенным запросом получения ajax, и он заменит содержимое выбранного div (FeiertagTable) тем, что возвращается.

Действие нашего контроллера GetFeiertagTable () вернет частичное представление, которое затем вставляется в этот div.

Надеюсь, это направит вас в правильном направлении!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top