Обновление представления с изменениями модели через Ajax Post - MVC3

Я пытаюсь использовать вызов Ajax (я думаю), чтобы обновить значение моей модели, а затем отобразить это новое значение в представлении. Я просто использую это для тестирования на данный момент.

Вот обзор:

MODEL

public class MyModel
{
    public int Integer { get; set; }
    public string Str { get; set; }
}

CONTROLLER

    public ActionResult Index()
    {
        var m = new MyModel();
        return View("Test1", m);
    }

    [HttpPost]
    public ActionResult ChangeTheValue(MyModel model)
    {
        var m = new MyModel();
        m.Str = model.Str;
        m.Str = m.Str + " Changed! ";
        m.Integer++;

        return View("Test1", m);

    }

VIEW

  @model Test_Telerik_MVC.Models.MyModel
@using Test_Telerik_MVC.Models
@{
    ViewBag.Title = "Test1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Test1</h2>
@if (false)
{
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>
}
<h2>
    ViewPage1
</h2>

<div>
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" />
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/>
    <div></div>
</div>

<script type="text/javascript">

    function changeButtonClicked() {
        var url = '@Url.Action("ChangeTheValue", "Test1")';
        var data = '@Model';
        $.post(url, data, function (view) {
            $("#Str").value = '@Model.Str';
        });
    }

</script>

В основном представление отображает кнопку с текстовым полем. Моя единственная цель - просто отобразить значение моей модели (свойство Str) в текстовом поле.

Я попробовал различные комбинации функции changeButtonClicked() безрезультатно. Test1 - это имя моего контроллера. Я не понимаю, когда я его отлаживаю, действие контроллера срабатывает и правильно устанавливает мои значения. Если я помещаю точку останова в разделе "@Model.Str" входного тега, это показывает мне, что мой @Model.Str равен Изменен! что правильно. Однако, как только моя функция успеха срабатывает в javascript, значение возвращается к исходному значению.

Я могу заставить его работать, изменив тип ввода, чтобы отправить и обернуть его в разделе @Html.BeginForm(), но мне интересно, как и как это сделать? Или представляет собой единственный способ сделать это?

Спасибо

Ответы

Ответ 1

Прежде всего, в jQuery правильным способом установки значения ввода является использование

$("#Str").val(@Model.Str);

Далее мы посмотрим на контроллер, в результате действия "Пост" вы возвращаете весь вид в своем вызове ajax. Это означает, что все ссылки html, script и javascript возвращаются в вашем почтовом запросе jquery. Поскольку все, что вы пытаетесь обновить, это значение ввода с именем str, я бы просто вернул это значение как json и ничего больше.

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    return Json(m.Str);

}

Далее я бы разместил ваши входы html, чтобы вы могли иметь jquery для сериализации вашей модели для вас, а затем вы можете изменить свой почтовый индекс jquery следующим образом:

function changeButtonClicked() {
    var url = '@Url.Action("ChangeTheValue", "Test1")';
    $.post(url, $('form').serialize(), function (view) {
        $("#Str").val(view);
    });
}

Все, что делает сериализация, это кодирование входов в вашей форме в строку, и если все указано правильно, aps.net привяжет это к вашей модели.

Если вам нужно, чтобы ваш маршрут обрабатывал как вызовы ajax, так и полные запросы, вы можете использовать функцию asp.net IsAjaxRequest для проверки запроса и возврата разных результатов в зависимости от того, является ли запрос ajax или нет. Вы бы сделали что-то подобное в своем контроллере:

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    if (Request.IsAjaxRequest) {
        return Json(m.Str);
    }
    else {
        return View("Test1", m);
    }
}

В actionresult выше вы делаете все, что делали раньше, но теперь проверяете тип запроса, и если он ajax, вы возвращаете результат Json вашего строкового значения. Если запрос не был вызван вызовом ajax, то полный просмотр (html, scripts и т.д.) Возвращаются для отображения в браузере.

Надеюсь, это поможет вам и именно то, что вы искали.