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

Question

Я пытаюсь использовать вызов 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 равен Changed! что правильно. Однако, как только моя функция успеха сработает в javascript, значение вернется к своему первоначальному значению.

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

Спасибо

Answer 1

Во-первых, в jQuery правильный способ установить значение для ввода - использовать

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

Далее мы рассмотрим контроллер, в результате действия Post вы вернете весь View в вашем вызове ajax. Это означает, что все html, ссылки на скрипты и 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-вызовы, так и полные запросы, вы можете использовать функцию IsAjaxRequest asp.net для проверки запроса и возврата разных результатов в зависимости от того, является ли запрос 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);
    }
}

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

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