How Bind Model data to Telerik Controls?

Question

I am using bellow code to insert the data to db. While Clicking the save button the data should be bind to the model and needs to be posted to controller action . But the data is not bind to the model. What is the issue in the bellow code . Any please help me to solve the below issue.

@(Html.Kendo().TextBoxFor(model => model.Code)
    .HtmlAttributes(new { placeholder = "Enter Code", required = "required", 
    validationmessage="Code is Required" })
  )
  <input type="button" title="Save" id="btnsave" value="Save" onclick="submit()"/>
<script>
function submit(data) {
                debugger;
                console.log("Cosoledata "+JSON.stringify(data))
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("action", "controller")',
                    data: { data: @Model },
                    dataType: "json",
                    success: function (response) {
                    }
                });
            }
</script>

Answer 1

data: { data: @Model },

In the JavaScript script, you can directly get the Model data via the @Model.

To send the model data to the controller method, you could create a JavaScript object, then use JQuery to get the related property value (such as Code), then send the object to the controller method.

Please refer the following sample:

View page:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            $("#btnCreate").click(function () { 
                var review = {}; //create a JavaScript Object.
                //user JQuery to get the entered value, and set the property value.
                review.ReviewID = $("#ReviewID").val();
                review.MovieID = $("#MovieID").val();
                review.goreRating = $("#goreRating").val();
                review.shockRating = $("#shockRating").val();
                review.jumpRating = $("#jumpRating").val();
                review.plotRating = $("#plotRating").val();
                review.supernaturalRating = $("#supernaturalRating").val();
                review.starRating = $("#starRating").val();
                //if you want to send multiple objects, you could create an array.
                //var reviewlist = [];
                //reviewlist.push(review);
                $.ajax({
                    url: "/Home/AddReview",
                    method: "Post",
                    data: { "reviewViewModel": review } ,   // { "reviewViewModel": reviewlist },
                    success: function (response) {
                        alert(response);
                    },
                    error: function (response) {
                        console.log("error");
                    }
                })

            });
        })
    </script>
}

Controller method:

[HttpPost]
public IActionResult AddReview(ReviewViewModel reviewViewModel)
{
    if (ModelState.IsValid)
    {
            //do something 
    }
    return View();
}

The result as below: