two way data binding between view and controller mvc5

Question

I am writing the web application which allows you to optimize SQL query.

I have such a view:

<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>
}

Here is my controller which handles button clicking

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

        ViewBag.readyQuery= optimizedQuery;

        return View();
    }

All I need Is to pass query to controller by clicking the button and pass it back to the view after modifying into the codeeditor1

It simply doesn't work because scripts are being run earlier than my controller method. How can I do that? Thanks!

Dan Dumitru · Accepted Answer · 2018-04-25 14:11:07Z

2

I think you should just return a string in your controller action, like:

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

    return optimizedQuery;
}

Then, in your AJAX success method, do something like:

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

answered Apr 25, 2018 at 14:11

Dan Dumitru

5,3251 gold badge36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

two way data binding between view and controller mvc5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related