7

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

4 回答 4

9

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

用法：

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

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

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

于 2014-02-11T00:28:19.383 回答
3

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

于 2013-09-07T10:38:05.787 回答
2

在这种情况下，如果您在页面上有 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
}
于 2013-09-07T11:04:31.280 回答
1

这只是一个示例，它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>
于 2013-09-07T11:31:10.260 回答