Jquery 消除部分视图MVC 3中的重复Id

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

局部视图1

$（函数（）{
$（“我的按钮1”）
.按钮（）
。单击（函数（）{
警报（“从MyForm1单击MyButton1”）；
});
});
MyForm1

局部视图2

$（函数（）{
$（“我的按钮1”）
.按钮（）
。单击（函数（）{
警报（“从MyForm2单击MyButton1”）；
});
});
MyForm2

在服务器端或客户端创建一个生成随机id的助手或javascript代码

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

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

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

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

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

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

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

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

---

这样，每个局部视图都将生成自己的唯一id。

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

在您的情况下，这意味着处理submit按钮的click事件，并将post逻辑应用到它所在的表单中

可以使用不依赖于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>

---

这只是一个示例，它根据用户需要添加

TestBox

on按钮单击所有具有不同id的文本框。您应该在

部分视图中执行类似操作

脚本

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


$（文档）.ready（函数（）{
var计数=0；
$（“#添加控件”）。单击（函数（）{
计数++；
var elements=“

”；
$（“#dynamicControldiv”）.append（元素）；
//美元（“.required”）。规则（“添加“+count”，required”）；
});
$（“#btndynamicssubmit”）。在（“单击”上，函数（）{
var textlength=$（“输入[type='text']”）attr（“类”，“必需”）；
对于（var i=1；i我不确定它是否对您仍然有用，但在Razor中，当我发现引擎正在创建重复的ID时，我使用TemplateInfo作为局部视图ID的前缀

用法：

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

这将生成一个类似于以下内容的ID:YourPrefix\u MyModelProperty

避免了大量不必要的帮助程序方法和javascript。
谢谢……这是我开始使用的方法。我觉得MVC中会有其他解决方案，因为在ASP.net中，他们处理得非常巧妙。谢谢。但是假设我有100个部分视图（我的情况是，我将模块中的每个页面都视为部分视图）我需要集中主页中的每个javascript，并且我必须在一次快照中加载它们。而不是在添加部分视图时动态添加javascript。现在，我很高兴我找到了这个问题！感谢有用的答案：-）不幸的是，这对razor表单不太适用，它添加了前缀，但是当您点击submit时，您的请求负载变成了空的，有什么想法吗？
 <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>

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