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

Posted 2023-05-08

【中文标题】消除部分视图 MVC 3 razor 中的重复 ID

【英文标题】：Eliminating Duplicate Id in partial view MVC 3 razor

【发布时间】：2013-09-11 09:42:26

【问题描述】：

我有一个基于用户交互添加动态局部视图的页面。同样的局部视图可以添加多次。每个局部视图都通过 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>

【参考方案1】：

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

用法：

@html.Partial("MyPartialView", new MyModel(), new ViewDataDictionary  TemplateInfo = new TemplateInfo  HtmlFieldPrefix = "PrefixGoesHere"  )

这将产生一个类似于此的 ID：YourPrefix_MyModelProperty。

避免了一大堆不必要的帮助方法和 javascript。

【讨论】：

现在我很高兴我查到了这个问题！感谢您提供有用的答案:-)

不幸的是，这对于 razor 表单效果不佳，它添加了前缀，但是当您点击提交时，您的请求负载结果为空，有什么想法吗？

【参考方案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。

【讨论】：

谢谢...这是我开始使用的方法。我觉得 MVC 中会有其他解决方案，因为在 ASP.net 中他们处理得非常巧妙。

【参考方案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

【讨论】：

谢谢。但是假设我有 100 个局部视图（这是我的情况，我将模块中的每个页面都视为局部视图）我需要集中主页中的每个 javascript，并且我必须一次性加载它们。而不是加载为和添加部分视图时动态添加它们时

【参考方案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>