使用 ASP.NET MVC5 动态创建 HTML 控件的最佳/标准方法是什么

Question

我有一个新项目，我必须根据存储在数据库中的设置在视图中动态创建 HTML 控件。我想，可能有两种不同的方法

(1) 使用jQuery：

function bindControls(){
    $.ajax({
        type: "GET",
        url: "ViewDef/GetControls",
        contentType: "application/json; charset=utf-8",
        data: {},
        dataType: "json",
        success: function (response) {
            var res = response.d;
            if (res.trim() != "") {
                var data = $.parseJSON(res);
                $("#dvQuota").html("");
                var dvQuota = $("#dvQuota");
                $("#dvControls").addClass("ui-main");
                var cType = "";
                var cID = "";
                if (data.length > 0) {
                    $.each(data, function (i) {
                        cType = data[i].cType;
                        cID = data[i].cID;
                        switch (cType) {
                            case "TextBox":
                                $(dvQuota).append("<input type='text' id='" + cID + "' class='c1'/>");
                                break;
                            case "DROPDOWN":
                                $(dvQuota).append("<select type='text' id='" + cID + "' class='c1'></select>");
                                //logic for binding drop down list
                                break;
                        }

                    });
                }
            }
            }
        });
    }

2) 使用 C#

@using (Html.BeginForm())
{
    for (int i = 0; i < ds.Table[0].Length; i++)
    {
            <div>
                //logic for generating Controls
            </div>
    }
    <input type="submit" value="OK" />
}

由于我是 MVC 新手，所以我无法决定。请大家提出最佳方法？

提前致谢

Answer 1

如果它有利于页面加载，即在响应已经发送到客户端后您不需要添加额外的动态控件，那么使用 C#。虽然比较少见，但并不是每个人都启用了 JavaScript，并且某些屏幕阅读器至今仍无法解析 JavaScript。

Answer 2

如果您打算以您在问题中提供的方式使用 JQuery 方法，则所有控件都是在初始页面加载后添加的 - 所以使用的有可能会看到没有控件的页面。使用 C# 方法将呈现服务器上的所有控件并将完整的页面发送给用户。

我个人更喜欢 C# 方法，因为要编写的代码更少。而且你有很多 HtmlHelper，比如 Html.TextBox、Html.DropDown 等等，可以让你的生活更轻松

Answer 3

我更喜欢 jQuery，因为这样您只需要在服务器之间来回传递数据，而不是 HTML。

我建议在您的代码中提高性能的一件事是不要在循环中“追加”。见下文，而不是在 $.each 循环中追加，将该 html 添加到字符串或其他内容，并且一旦循环结束 $(dvQuota).append 或 $(dvQuota).innerHTML。

在性能方面，使用 jQuery 的 $.each 循环与使用常规 javascript for 循环之间也存在一些小的差异。

 $.each(data, function (i) {
                        cType = data[i].cType;
                        cID = data[i].cID;
                        switch (cType) {
                            case "TextBox":
                                $(dvQuota).append("<input type='text' id='" + cID + "' class='c1'/>");
                                break;
                            case "DROPDOWN":
                                $(dvQuota).append("<select type='text' id='" + cID + "' class='c1'></select>");
                                //logic for binding drop down list
                                break;
                        }

                    });

// append here

// create events here
$('select .c1').change(function(){
  if (this.id === 'something')
{
    // do something
}
});