如何将模型数据绑定到 Telerik 控件？

Question

我正在使用波纹管代码将数据插入数据库。单击保存按钮时，数据应绑定到模型并需要发布到控制器操作。但是数据没有绑定到模型。波纹管代码中的问题是什么。请帮助我解决以下问题。

@(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 },

在JavaScript脚本中，可以直接通过@Model获取模型数据。

要将模型数据发送到控制器方法，可以创建一个JavaScript对象，然后使用JQuery获取相关的属性值（例如Code），然后将对象发送到控制器方法。

请参考以下示例：

查看页面：

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

控制器方法：

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

结果如下：

如何将模型数据绑定到 Telerik 控件？

How Bind Model data to Telerik Controls?

model-view-controller

asp.net-mvc

telerik-mvc

asp.net-core-mvc

asp.net-core