jquery – 在部分视图MVC 3剃须刀中消除重复ID

我有一个页面,它根据用户交互添加动态部分视图.同样可以添加相同的局部视图.每个部分视图通过 JQuery和AJAX执行提交.什么是避免页面上的ID重复的最佳方法.这非常重要,因为JQuery函数使用ID选择器.请给我一个解决方案.

部分View1

<script type="text/javascript"> 
    $(function () {
        $("#MyButton1")
            .button()
            .click(function () {
                alert("MyButton1 clicked From MyForm1 ");
            });
    });
</script>
<div><p>MyForm1</p></div>
<form id="MyForm1" >
    <input id="MyButton1" type="button" value="buttonFromPartial1" />
 </form>

部分View2

<script type="text/javascript"> 
    $(function () {
        $("#MyButton1")
            .button()
            .click(function () {
                alert("MyButton1 clicked From MyForm2 ");
            });
    });
</script>
<div><p>MyForm2</p></div>

<form id="MyForm2" >
    <input id="MyButton1" type="button" value="buttonFromPartial2" />
</form>

解决方法

在服务器端或客户端创建生成随机ID的帮助程序或javascript代码.

在视图示例中的服务器端的C#函数：

@function string GenerateId(string prefix)
{
return string.Format("{0}_{1}",prefix,Guid.NewGuid().ToString("N"));
}

视图示例中客户端的Javascript函数：

function generateId(string prefix) {
  return prefix + Math.floor((1 + Math.random()) * 0x10000)
             .toString(16)
             .substring(1);
};

在局部视图内部创建一个包含生成值的变量并使用它.

@var buttonId = GenerateId("button")
// buttonId = "button_85021948560128"
...

这样,每个局部视图都将生成自己的唯一ID.

原文地址：https://www.jb51.cc/jquery/176856.html