Json and Multiple PartialViews

Question

I'm going to re-ask this question in a slightly different way.

Say I have 2 or more of the [same] partial view on the page.

On this PartialView there is a text box and a button.

On the click of the button I need to take the contents of the textbox and do a Json postback, do some stuff and return a result set.

The problem I have is that I can make this all happen for the 1st PartialView but not for any subsequent ones.

The event is attached to each of the buttons but when I try to access the textbox I only seem to get the first text box and not the one that is in the PartialView with the button.

In the code below I have the Partial View twice. So two instances of the textbox and button.

The Json code is attached to each submit button but when I access the text box I only ever get the text from the first partial view.

Some code;

Partial View:

    <%= Html.TextArea("MyTextBox", Model.Text, 3, 50, new { onkeyDown="return CheckInputLength(this)" })%>
<input id="submitText" name="submitText" type="submit" value="Add text" class="clsTest" />

Some of the Json code:

$(document).ready(function() {
    $(".clsTest").each(
function() {

    $(this).unbind("click").click(function(evt) {
var commentText = jQuery.trim($("#MyTextBox").val());

Answer 1

Well, the problem is you have more than one textarea with the same ID (MyTextBox). Make sure your textareas have different IDs.

<%= Html.TextArea("MyTextBox", Model.Text, 3, 50, 
    new { onkeyDown="return CheckInputLength(this)", 
    id = "textBox-" + Model.ID })%>

Then, what I suggest is that you have a JS function which takes the textarea's ID as parameter :

function postComment(id) {
    var commentText = jQuery.trim($(id).val());
}

And have your submit buttons call that function :

<input id="submitText" name="submitText" type="submit" value="Add text" 
    class="clsTest" onclick="postComment('textBox-<%=Model.ID%>')" />