Eliminate duplicate identifier in partial view of MVC 3 razors

Question

I have a page that adds dynamic partial views based on user interaction. Also, the same partial view can be added as many times. Each partial view transmits through jQuery and AJAX. What is the best way to avoid duplication for identifiers across the page. This is very important because jQuery functions use an identifier selector. Please provide me a solution.

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

Partial 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

Create helper or javascript code that generates a random identifier on the server or client side.

C # Server-side function inside view example:

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

Client-side Javascript function inside view example:

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

Create a variable inside the partial view that contains the generated value and uses it.

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

Thus, each partial view will generate its own unique identifiers.

Answer 2

Not sure if it is still useful to you, but in Razor I use TemplateInfo to prefix my partial view identifiers when I discover that the engine creates duplicate identifiers.

Using:

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

This will create an identifier like this: YourPrefix_MyModelProperty.

Avoids many unnecessary helper methods and javascript.

Answer 3

In such cases, when you have N numbers of the same thing on the page, I think it is better to stop responding to id and use relative logic instead.

In your case, this would mean handling the send button press event and applying your message logic to the form in which it is located.

You can use the jQuery selector, which is independent of the ID, to do the binding. See the code below for a class selector.

HTML example

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

Click handler

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

Answer 4

This is just an example that it adds a TestBox when a user-based button is clicked, it requires an entire text field with a different identifier. You should do something like this in PartialView code

Script

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

View

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