Обновление MVC 3 PartialView с помощью JavaScript

Question

У меня ASP.NET MVC 3, содержащее несколько PartialView.Один из них получает изображение из Интернета, которое зависит от параметров его ViewModel.Я хотел бы изменить параметры ViewModel и перезагрузить этот PartialView (только), чтобы загружалось изображение с измененным параметром.

Вот мой пока PartialView:

@model MyViewModel

<script type="text/javascript">
function changeParameter(newValue) {
    @Model.Parameter = newValue;
    alert(@Model.Parameter);
    ... What now? How do I refresh the PartialView? ...
}
</script>

<h4>@Model.Header</h4>
<table style="background-color: #f8f7f8; width:100%;">
<tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" onclick="changeParameter('value1');">Value1</th>
    <th style="cursor:pointer" onclick="changeParameter('value2');">Value2</th>
    <th style="cursor:pointer" onclick="changeParameter('value3');">Value3</th>
    <th style="cursor:pointer" onclick="changeParameter('value4');">Value4</th>
    <th style="cursor:pointer" onclick="changeParameter('value5');">Value5</th>
    <th style="cursor:pointer" onclick="changeParameter('value6');">Value6</th>
    <th style="cursor:pointer" onclick="changeParameter('value7');">Value7</th>
</tr>
</table>
<img src="@Model.ImageUrl" alt="Chart" />

Итак, дело в том, что я хочу щелкнуть одно из значений (Value1-7), и переменная Parameter моей ViewModel изменилась.Пока это работает, так как окно предупреждения показывает значение, которое я только что установил.Теперь я хочу перезагрузить PartialView, чтобы @Model.Header, а также @Model.ImageUrl обновлялись, поскольку они зависят от параметра, который я изменил.Как я могу это сделать?О, кстати, я совершенно новичок в JavaScript ...

Приветствия,
Симон

РЕДАКТИРОВАТЬ:
Хорошо, два ответа вышеЭто немного помогло, но, поскольку я настоящий нуб из JavaScript, это довольно сложно ...
Теперь у меня есть:

@model MyViewModel
<div id="my-header">
    <h4>@Model.Header</h4>
</div>

<table id="my-table" style="background-color: #f8f7f8; width:100%;">
    <tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" id="value1">Value1</th>
    <th style="cursor:pointer" id="value2">Value2</th>
    <th style="cursor:pointer" id="value3">Value3</th>
    <th style="cursor:pointer" id="value4">Value4</th>
    <th style="cursor:pointer" id="value5">Value5</th>
    <th style="cursor:pointer" id="value6">Value6</th>
    <th style="cursor:pointer" id="value7">Value7</th>
    </tr>
</table>

<div id="my-image">
    <img src="@Model.ImageUrl" alt="Chart" />
</div>

<script type="text/javascript">
    $('#my-table th').click(function() {
        alert(this.id);
        @Model.Parameter = this.id;
        $('#my-header').html("<h4>@Model.Header</h4>");
    });
</script>

Пока это хорошо, но я не могуманипулировать свойством Parameter из моего класса Model.Так что вызов @Model.Parameter = anyValue; не работает.
Как я могу сделать это в JavaScript?

РЕДАКТИРОВАТЬ 2: Хорошо, я наконец решил это так, как предложил ChaZm.Способ JSON.
Но прежде всего я изменил свою ViewModel, чтобы все возможные URL и заголовки были сохранены в Dictionary<string, string>.Тогда мой PartialView:

@model MyViewModel
<div id="my-header">
    <h4>@Model.Header</h4>
</div>

<table id="my-table" style="background-color: #f8f7f8; width:100%;">
    <tr style="line-height:18px; background-color: #d6d6d6;">
    <th style="cursor:pointer" id="value1">Value1</th>
    <th style="cursor:pointer" id="value2">Value2</th>
    <th style="cursor:pointer" id="value3">Value3</th>
    <th style="cursor:pointer" id="value4">Value4</th>
    <th style="cursor:pointer" id="value5">Value5</th>
    <th style="cursor:pointer" id="value6">Value6</th>
    <th style="cursor:pointer" id="value7">Value7</th>
    </tr>
</table>

<div id="my-image">
    <img src="@Model.ImageUrl" alt="Chart" />
</div>

<script type="text/javascript">
    $('#my-table th').click(function() {
        var urls = @Html.Raw(Json.Encode(@Model.Urls));
        var url = urls[this.id];
        $('#my-image').html("<img src='" + url + "' alt='Chart' />");
        var headers = @Html.Raw(Json.Encode(@Model.Headers));       
        var header = headers[this.id];
        $('#my-header').html(header);
    });
</script>

Теперь все работает так, как и должно быть ...
Спасибо за ваши усилия.

Answer 1

Используя частичное, вы фактически сливаете его на страницу.Веб-браузер не знает, что этот раздел страницы был частичным (поскольку MVC заботится обо всем на стороне сервера).То, что я делал в прошлом, когда мне нужно обновить определенный раздел страницы, - это создать отдельное действие, которое возвращает только значение в частичном.Частичное не должно включать какие-либо теги <head> или <body>, только содержание.Затем на стороне клиента AJAX, в котором эти данные.

Например, создайте контроллер с именем MyAJAXPartials и действие для этого раздела с именем MyPartial (я бы изменил эти имена на вашем месте).Затем сделайте это действие визуализировать обычное представление (не частичное), но используйте тот же код, который вы опубликовали выше.Использование onclick="..." не является предпочтительным способом связывания действий, если вы используете jQuery (и вы даете таблице идентификатор), вы можете сделать:

$('#TABLE-ID th').each(function() {
    $(this).click(function() {
        changeParameter($(this).text()));
    });
});

Опять же, вместо использования частичного,на главной странице создайте фрейм из содержимого с тегом <div>, присвойте ему идентификатор, например contentArea, и используйте следующий JavaScript (опять же, я полагаю, у вас есть jQuery):

$.get('/MyAJAXPartials/MyPartial', function(data) {
    $('#contentArea').html(data);
    // PUT THE CHANGE PARAMETER CODE I SUGGESTED ABOVE HERE
});

Затем,каждый раз, когда вам нужно изменить данные, просто перезагрузите содержимое в этом фрейме, запросив новый URL.Например, вместо запроса /MyAJAXPartials/MyPartial это может быть /MyAJAXPartials/MyPartial/Value1.Весь JavaScript должен быть за пределами этого фрейма.

Answer 2

Хорошо.Есть 2 способа обновить страницу MVC.

1) Полное обновление страницы (вы просто вызываете действие контроллера, оно формирует новое представление с обновленными параметрами)

2) Обновление AJAX.Javascript ничего не знает о том, какой сервер вы используете.MVC \ ASP> NET, ничего.Итак, вам нужен контроллер вызовов, который вернет вам новые значения частичного представленияЗдесь вы можете вернуть частичное значение с сервера как

    public PartialViewResult Result()
    {
        return PartialView("Viewname",params);
    }

, а затем назначить возвращенный html для некоторого контейнера с помощью jquery, например

    $('div').load("/Result",....)

ИЛИ

Вы можете вернуть обновленные данныечерез JSONResult, например

    public JsonResult Result()
    {
        return Json(GetSomeValidJson());
    }

, а затем отформатируйте понравившуюся страницу в JS.Вы получаете Json, анализируете его и вручную устанавливаете все данные страницы, которые вам нравятся

Я не работал с MVC 3 слишком долго (только 1 и 2), поэтому в этой области могут быть некоторые обновления.Но основные, я думаю, те же самые.Удачи!