ASP MVC - Editor Templates issue (Sends always data from only first template)

Question

I have a form/view which represents a strongly typed model which contains simple properties and an IEnumerable property. I use an editor template for the IEnumerable property of my model.

for (int i = 0; i < @Model.Items.Count(); i++)
                    {
                        @Html.EditorFor(model => @Model.Items[i])
                    }

Now, the template looks like the following:

 @using (Html.BeginCollectionItem("Items"))
{
            <table style="width: 100%">
                <tr>      
                <td>
                    @Html.TextBoxFor(model => @Model.ID, new {id = "ID" })
                </td>
                <td>
                    @Html.TextBoxFor(model => @Model.Description, readonly="readonly", new {id = "Description" })
                </td>
                <tr />
                         <a role="button" id=getDescBtn>
                    </a>
            </table>
}

And my template's script:

<script type="text/javascript">

$(document).ready(function() {
    $("#getDescBtn").on('click', function (event) {
        $.ajax({
            url: '@Url.Action("LoadDescription")',
            async: false,
            cache: false,
            data: {id: $("#ID").val()}
    }).success(function (partialView) {

        });
    });
});

Now, My controller action looks like:

public ActionResult LoadDescription(string id)
    {}

Now, Suppose I have two templates: In the first one, the ID textbox contains the value of "1". In the second one, the ID textbox contains the value of "2".

When I press the button in the first template, I get to the controller action twice, both with the value of "1" (from the first template). When I press the button in the second template, I get to the controller action once, with the value of "1" (from the first template, although I pressed the button of the second template).

Now, what I'm trying to achieve is quite simple logically: press button in first template, get to controller action once with value of "1".

press button in secondtemplate, get to controller action once with value of "2".

Also, the action in controller is responsible to calculate value for description and then fill in the description field. What should the action method return (I don't think I should perform a post for the whole form), and how do I receive it within the success function while using Ajax? Thanks for any help.

Answer 1

I think you need to use classes for your buttons and editors instead of ids. In your code you have multiple text boxes all with Id=ID and multiple buttons with id=getDescBtn. So $("#ID").val() will just give you the value of the first element with id="ID" which is your first textbox.

As for updating the description, you can have your action return the description value and then set the description text box on the success of your ajax call.

@using (Html.BeginCollectionItem("Items"))
{
        <table style="width: 100%">
            <tr>      
            <td>
                @Html.TextBoxFor(model => @Model.ID, new {@class = "ID" })
            </td>
            <td>
                @Html.TextBoxFor(model => @Model.Description, readonly="readonly", new {@class = "Description" })
            </td>
            <tr />
                     <a role="button" class="getDescBtn">
                </a>
        </table>
}
<script type="text/javascript">

$(document).ready(function() {
$(".getDescBtn").on('click', function (event) {
    $.ajax({
        url: '@Url.Action("LoadDescription")',
        async: false,
        cache: false,
        data: {id: $(this).parent().find(".ID").val()}
     })
    .success(function (data) {
     $(this).parent().find(".Description").val(data.description )
    });
});
});

public JsonResult LoadDescription(string id)
{
//your logic here
return Json(new {description )});
}