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

Question

我有一个页面,它根据用户交互添加动态部分视图.同样可以添加相同的局部视图.每个部分视图通过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>

Answer 1

不确定它是否对你有用,但在Razor中,当我发现引擎正在创建重复ID时,我使用TemplateInfo为我的部分视图ID添加前缀.

用法:

@Html.Partial("MyPartialView", new MyModel(), new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "PrefixGoesHere" } })

这将生成类似于以下的ID:YourPrefix_MyModelProperty.

避免了大量不必要的辅助方法和javascript.

Answer 2

创建一个帮助程序或 JavaScript 代码，在服务器端或客户端生成随机 ID。

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。