Razor与js添加html内容的利弊

最新推荐文章于 2021-06-27 01:22:56 发布

@源

最新推荐文章于 2021-06-27 01:22:56 发布

阅读量1.4k

点赞数 2

分类专栏：疑惑点文章标签： Razor与js添加html内容的利弊

本文链接：https://blog.csdn.net/qq_41657790/article/details/86546748

版权

疑惑点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发工具与关键技术：VS2015、JS、jQuery
作者：曾浩源
撰写时间：2019.1.18
关于Razor本人也是略有了解一下，近日发现一些Razor与js添加html内容的利弊
首先说一个例子：
利用for循环，以文本框的数字为次数添加html内容；上一个粗劣的图
在这里插入图片描述
html代码如下:

 <input type="text" id="play" style="height:20px;" />
 <button type="button" style="height:25px;" id="Razor">Razor语法</button>
 <button type="button" style="height:25px;" id="JS">js添加html</button>
 <div id="for" style="font-size:larger">
     第 1 次
 </div>

首先是Razor添加HTML，代码如下：

$("#button").click(function () {
    var play = $("#play").val();
    if (play == "")
    {
        alert("请填写数字");
    }
    else if (/^\d*(.\d)?$/.test(document.getElementById("play").value)) {
        var url = "/play/hello?play=" + play;
        var data  = { type: 1 };
        $.ajax({
            type: "get",
            async: false,  //同步请求
            url: url,
            data: data,
            timeout: 1000,
            success: function (dates) {
                $("#for").html(dates);//要刷新的div
            },
            error: function () {
                alert("失败，请稍后再试！");
            }
        });
    }
    else{
        alert("只能填写数字");
    }
})

传到控制器，代码如下：

 public ActionResult hello(int play)
 {
      ViewBag.coco = true;
      ViewBag.play = play;
      return View();
  }

将次数传到hello视图，视图代码如下：

<body>
    <div>
        @{
            if (ViewBag.coco == true)
            {
                var play = ViewBag.play;
                for (int i = 0; i < play; i++)
                {
                    int x = i + 1;
                    <button class="more">第 @x 次</button><br />
                }
            }
        }
    </div>
    <script src="~/content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script>
        $(".more:nth-child(1)").click(function () {
            var cc = $(".more:nth-child(1)").html();
            alert(cc);
        })

    </script>
</body>

写上js代码，点击循环出来的第一个按钮，弹出提示框
输入6并点击第一个，效果如下：
在这里插入图片描述
它是成功运行的，接下来看一下js添加html，呈上js代码：

 $("#button1").click(function () {
   	var play = $("#play").val();
    if (play == "") {
        alert("请填写数字");
    }
    else if (/^\d*(.\d)?$/.test(document.getElementById("play").value)) {
        $("#for").html("");
        for (var i = 0; i < play; i++)
        {
            var x = i + 1;
            $("#for").append('<button class="more">第' + x + '次</button><br />');
        }
    }
    else {
        alert("只能填写数字");
    }
})
$(".more:nth-child(1)").click(function () {
    var cc = $(".more:nth-child(1)").html();
    alert(cc);
})

拥有添加HTML的方法和点击第一个弹出提示框的方法
但HTML出来了，提示框无论怎么点击都弹不出来，接下来，我填写数字1执行，并且给它赋予id。

 $("#button1").click(function () {
   var play = $("#play").val();
    if (play == "") {
        alert("请填写数字");
    }
    else if (/^\d*(.\d)?$/.test(document.getElementById("play").value)) {
        $("#for").html("");
        for (var i = 0; i < play; i++)
        {
            var x = i + 1;
            $("#for").append('<button id="more">第' + x + '次</button><br />');
        }
    }
    else {
        alert("只能填写数字");
    }
})
$("#more").click(function () {
    var cc = $("#more").html();
    alert(cc);
})

在这里插入图片描述
仍然是没有反应，所以js的append添加HTML给予的class和id都是无效的？
我有尝试一下利用cddClass添加class
for循环内容

 var x = i + 1;
 $("#for").append('<button id="more">第' + x + '次</button><br />');
 $("#more").addClass("haha")

以及点击事件

 $(".haha").click(function () {
   var cc = $(".haha").html();
    alert(cc);
})

运行后，class类是添加成功了，但依然无法弹出提示框
在这里插入图片描述
所以我的猜测就是js所添加的class和id，之后是无法调用的，只能在里面添加点击事件onclick，这是能执行的
所以这就是我指出js添加HTML的弊端之处，和razor的利处
你们想说，那razor的坏处是啥？
这还用说吗？打的代码看着难看，代码量多，还得添加新视图。
如果我提出的有误，还请及时反驳和提出，有更好的意见和点子也请及时提出来，互相学习。