Question

i’m having a hard time dealing with MVC Ajax helper and trying to refresh certain part of the page. In my code, I have a situation like this:

<div id="ajaxLoadedContent">
<table>
    <tr>
        <th>
            <%: Html.Label("ProductId") %>
        </th>
        <th>
            <%: Html.Label("ProductName") %>
        </th>        
        <th>
        </th>
    </tr>
    <% foreach (var product in Model.Products)
       {
           %>
    <tr>
        <td>
            <%: direccion.ProductId %>
        </td>
        <td>
            <%: direccion.ProductName %>
        </td>

        <td>

            <% using (Ajax.BeginForm("EditProduct", "MyController", 
                    new { ContainerDiv = "ShowEditProducts" }, 
                    new AjaxOptions() { UpdateTargetId = "ShowEditProducts", OnSuccess = "updatePlaceholder" }))
               {%>
            <%: Html.Hidden("ProductId", product.ProductId)%>
            <input type="submit" value="Edit" />
            <%} %>
        </td>
    </tr>
    <% } %>
</table>

<script type="text/javascript">
        function updatePlaceholder(context) {
            var html = context.get_data();
            var placeholder = context.get_updateTarget();
            $(placeholder).html(html);
            return false;
        }
</script>

<div id="ShowEditProducts"></div>
</div>

Now, when I press the Edit button, then the ‘Editor View’ appears, but the problem is that when i Submit that form, then there are two options:

1. The data is OK, the changes are made, the form dissapears and the list is refreshed.
2. The data is NOT OK, the forms stays and the validation messages appear.

The problem is that the UpdateTargetId are different for each option.
Option 1 refreshes “ShowEditProducts”, while Option 2 refreshes “ajaxLoadedContent”. Also, ehe ‘Edit View’ contains JavaScript that is executed when the view is loaded using the “Edit” button but is not executed when the form contains errors and is re-rendered.

The code of the EditView looks like this:

<% using (Ajax.BeginForm("SubmitEdit", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv}))
{%>

<script type="text/javascript">
    // My JavaScript                 
</script>

<table>
    <tr>
        <td>
           <%: Html.Label("Id")%></br>
           <%: Html.TextBoxFor(x => x.Product.ProductId)%></br>
        </td>
        <td>
           <%: Html.Label("Name")%></br>
           <%: Html.TextBoxFor(x => x.Product.ProductName)%><
        </td>
    </tr>
</table>

<input type="submit" value="Save" />

<%: Ajax.ActionLink("Cancel", "EmptyView","Shared", new AjaxOptions() { UpdateTargetId = Model.ContainerDiv})%>
<% } %>

So, now my two big problems are:
1. The JavaScript of the ‘Edit View’ don’t get executed when the the view is re-renderd.
2. How can i update one target is there are errors and another one when there are not.

Thanks

Answer 1

The object being replaced is being set on this line:

var placeholder = context.get_updateTarget();

So instead, you should add a condition here. Eg, instead of returning HTML directly, if you return an object that looks like this:

public class Result
{
    public bool Success { get; set; }
    public string Html { get; set; }
}

Then you could do something like this:

var result = response.get_response().get_object();
if (result.Success)
    $("#ShowEditProducts").html(html);
else
    $("#ajaxLoadedContent").html(html);

Alternatively, instead of returning a Success boolean, you could have a property for the ID of the control to replace. This would be more reusable, and might make sense if you want the decision of which control to replace to be done server-side.