视图和控制器 mvc5 之间的双向数据绑定答案

【问题标题】：two way data binding between view and controller mvc5视图和控制器 mvc5 之间的双向数据绑定
【发布时间】：2018-10-06 00:20:12
【问题描述】：

我正在编写允许您优化 SQL 查询的 Web 应用程序。

我有这样的看法：

<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 后将其传递回视图

它根本不起作用，因为脚本比我的控制器方法运行得早。我怎样才能做到这一点？谢谢！

【问题讨论】：

标签： javascript .net asp.net-mvc asp.net-mvc-5

【解决方案1】：

我认为你应该在你的控制器动作中返回一个字符串，比如：

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

    return optimizedQuery;
}

然后，在您的 AJAX 成功方法中，执行以下操作：

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

【讨论】：