消除部分视图 MVC 3 razor 中的重复 ID

Question

我有一个基于用户交互添加动态局部视图的页面。同样的局部视图可以添加多次。每个局部视图都通过 JQuery 和 AJAX 执行提交。避免 Id 重复的最佳方法是什么页面。非常重要，因为 JQuery 函数使用 ID 选择器。请提供解决方案。

局部视图1

<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>

局部视图2

<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

在服务器端或客户端创建一个生成随机 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。

Answer 3

在这种情况下，如果您在页面上有 N 个相同的东西，我认为最好停止回复 id，而是使用相对逻辑。

在您的情况下，这意味着处理提交按钮的点击事件并将您的发布逻辑应用于它所在的表单。

您可以使用不依赖于 ID 的 jQuery 选择器进行绑定。请参阅下面使用类选择器的代码。

示例 HTML

<form name="myForm">
    <input class="buttonFromPartial" name="myButton" type="button"  />
</form>
<form name="myForm">
    <input class="buttonFromPartial" name="myButton" type="button"  />
</form>

点击处理程序

$("input.buttonFromPartial").click(function () {
    var $form = $(this).closest("form");
    //do your post logic here
}

Answer 4

这只是一个示例，它根据用户需要在按钮单击时添加 TestBox 并需要所有具有不同 id 的文本框。你应该在你的PartialView 代码中做这样的事情

脚本

<script type="text/javascript">
    $(document).ready(function () {
        var count = 0;
        $("#AddControls").click(function () {
            count++;
            var elements = "<input type='text' id='txt" + count + "'class='required'/><br/></br>";
            $("#dynamicControldiv").append(elements);
            // $(".required").rules("add" + count, "required");
        });

        $("#btnDynamicSubmit").on("click", function () {
            var textlength = $("input[type='text']").attr("class", "required");
            for (var i = 1; i <= textlength.length; i++) {
                var id = $("#txt" + i).attr('id');
                var value = $("#txt" + i).attr('value');
                if (value == "") {
                    $("#txt" + i).attr("required", "required");
                }
            }
            var validation = $("#dynamicControlForm"); //Your form id.
            if (!validation.valid()) {
                $("input[type='text']").attr("required", "required");
                return false;
            }

        });
    });
</script>

查看

 <input type="button" name="CreateControl" value="AddControl" id="AddControls" />
    <form action="/" method="post" id="dynamicControlForm">
    <div id="dynamicControldiv">
    </div>
    <input type="submit" name="DynamicControl" id="btnDynamicSubmit" value="Submit" />
    </form>