Как я могу кодировать обновление HTML.RenderPartial, используя Ajax в MVC3?

Question

У меня есть следующее представление:

    @model ViewModels.Shared.BaseViewModel
    <div class="rep_tb0">
        <div class="rep_tr0">
            <div class="rep_td0">@Html.LabelFor(model => Model.Link.Position)</div>
            <div class="rep_td0">@Html.LabelFor(model => Model.Link.Title)</div> 
        </div>
        @for (var i = 0; i < Model.AdminDetails.Count; i++)
        {
            var qs = "&ac=" + Model.Meta.AccountID +
                     "&me=" + Model.AdminDetails[i].RowKey;  
        <div class="rep_tr0">
            <div class="rep_td0">
                @Html.TextBox(("Position_" + @i), Model.AdminDetails[i].Position, new { size = 2 })
            </div>
            <div class="rep_td0">@Model.AdminDetails[i].Title</div>             
        </div>  
        }
    </div>    

Заполнено этим действием контроллера:

    public ActionResult Detail(string ac, string me)
    {
            vm.AdminDetails = _link.Detail(ac + me).ToList();
        return View(vm);
    }

Я хотел бы использовать Ajax, jQuery и HTML.Renderpartial, так как иногдаМне нужно запросить обновление данных, например, когда я изменяю значение позиции.

Я совершенно новичок в идее сделать это.Я нашел ссылки, которые мне помогают, но в основном речь шла об Ajax с более ранними версиями MVC, а не о MVC3.Может кто-нибудь дать мне несколько советов.Я не ищу код.Несколько примеров того, как я могу выполнить кодирование в моем методе действия, как я должен вызывать Ajax и т. Д.

Answer 1

Вам нужно дочернее действие, а не частичное представление.

Затем вы можете написать

<div id="#thingy">@Html.Action("Detail", new { ac, me })</div>

$('#thingy').load("@Server.JavaScriptStringEncode(Url.Action("Detail", new { ac, me }))");

Answer 2

Основная идея будет заключаться в том, что вы будете использовать JQuery для запуска AJAX-запроса, когда вы хотите обновить частичное представление.

Запрос AJAX вызовет одно из ваших действий контроллера, которое затем вернет PartialViewResult.

Часть «success» результата JJuery AJAX получит ответ HTML и заменит данныйконтейнер в вашем представлении с новым HTML.

например,

ваше представление может выглядеть следующим образом:

@model ViewModels.Shared.BaseViewModel
<script type="text/javascript">
    $(function () {
        $('#RefreshButton').click(function () {
            $.ajax({
                url: *href*,
                dataType: 'html',
                cache: false,
                success: function (responseText) {
                    $('#PanelToUpdate').html(responseText);
                }
            });
        });
    });
</script>
<div id="PanelToUpdate" class="rep_tb0">
    <div class="rep_tr0">
        <div class="rep_td0">@Html.LabelFor(model => Model.Link.Position)</div>
        <div class="rep_td0">@Html.LabelFor(model => Model.Link.Title)</div> 
    </div>
    @for (var i = 0; i < Model.AdminDetails.Count; i++)
    {
        var qs = "&ac=" + Model.Meta.AccountID +
                    "&me=" + Model.AdminDetails[i].RowKey;  
    <div class="rep_tr0">
        <div class="rep_td0">
            @Html.TextBox(("Position_" + @i), Model.AdminDetails[i].Position, new { size = 2 })
        </div>
        <div class="rep_td0">@Model.AdminDetails[i].Title</div>             
    </div>  
    }
</div>    
<button id="RefreshButton"></button>

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

Затем внесите небольшую поправку в действие вашего контроллера, чтобы он мог обрабатывать вызовы через AJAX или обычно:

public ActionResult Detail(string ac, string me)
{
    vm.AdminDetails = _link.Detail(ac + me).ToList();

    if (Request.IsAjaxRequest())
        return PartialView(vm);
    return View(vm);
}

Без return PartialView(vm); HTML-ответ на запрос AJAX будет включать заголовок вашей страницы