двусторонняя привязка данных между представлением и контроллером mvc5

Question

Я пишу веб-приложение, которое позволяет оптимизировать SQL-запрос.

У меня есть такой взгляд:

<div id="codeeditor" style="margin-right:20px; float:left"  >
    <script>
        var editor = CodeMirror(document.getElementById("codeeditor"), {
        mode: "sql",
        theme: "dracula",
        tabSize: 5,
        lineNumbers: true,
        });
        editor.setSize(500, 500);
    </script>
    <input type="submit" value="start" id="btnClick" />
</div>

<div id="codeeditor1">
    <script>
        var editor1 = CodeMirror(document.getElementById("codeeditor1"), {
            mode: "sql",
            theme: "dracula",
            tabSize: 5,
            lineNumbers: true,

        });
        editor1.setSize("45%", 500);
   </script>

</div>


@section scripts{
<script type="text/javascript">
    $(document).ready(function () {
       $("#btnClick").click(function () {
            var f = {};
            f.url = '@Url.Action("Demo", "Home")';
            f.type = "POST";
            f.dataType = "json";
            f.data = JSON.stringify({ sourceSqlCode: editor.getValue() });
            f.contentType = "application/json";
            editor1.setValue(@ViewBag.readyQuery);
            f.success = function (response) {
                alert("success");
            };
            f.error = function (response) {
                alert("err");
            };
            $.ajax(f);
        });
    });
</script>
}

Вот мой контроллер, который обрабатывает нажатия кнопок

[HttpPost]
    public ActionResult Demo(string sourceSqlCodee)
    {
        //here I use my libraries and optimize query

        ViewBag.readyQuery= optimizedQuery;

        return View();
    }

Все, что мне нужно, это передать запрос контроллеру, нажав кнопку, и вернуть его в представление после изменения в codeeditor1

Это просто не работает, потому что скрипты запускаются раньше, чем мой метод контроллера. Как я могу это сделать? Спасибо!

Answer 1

I думаю вы должны просто вернуть строку в вашем действии контроллера, например:

[HttpPost]
public string Demo(string sourceSqlCode)
{
    //here I use my libraries and optimize query

    return optimizedQuery;
}

Затем, в вашем методе успеха AJAX, сделать что-то вроде:

f.success = function (response) {
    editor1.setValue(response);
};