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＃方法，因为编写的代码较少。而且你有很多HtmlHelpers，如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
}
});

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

3 个答案: