Question

Scenario:
I have a View and inside that view I also a partial view.
On the main view I have two textbox and a button. When user enters data and clicks on the button, data added to database and displays in a tabular format in the partial view.

The partial view also has a delete link for each row. To support that delete, I had to use “jquery.unobtrusive-ajax.min”.

Problem:
When I click the button to save data, everything on the view goes insane. The whole page becomes double. Please see the image.
But If I remove the reference of “jquery.unobtrusive-ajax.min”, the problem does not exists (delete doesnt work then though).

Anyone aware of this behavior, how to solve it??

The main view:

<%Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Create","Program",new AjaxOptions{UpdateTargetId="CreateData"}))
{ %>
<div id="CreateData">
    <div>
        <%:Html.LabelFor(m=>m.Year) %>
    </div>
    <div>
        <%:Html.TextBoxFor(m=>m.Year) %>
    </div>
    <div>
        <table>
            <tr>
                <td><%:Html.LabelFor(m=>m.Time) %></td>
                <td><%:Html.LabelFor(m=>m.Title) %></td>
                <td></td>
            </tr>
            <tr>
                <td><%:Html.TextBoxFor(m => m.Time)%></td>
                <td><%:Html.TextBoxFor(m=>m.Title) %></td>
                <td><input type="image" value="Register"     src="../../Content/images/btnAdd.png"/></td>
            </tr>
        </table>
    </div>
</div>
<div>
    <div id="result">

    </div>
</div>

<div class="clear"></div>
<script type="text/javascript">
    $(function () {
        var year = $("#Year").val();
        $('#result').load('/Program/Browse?year=2012');
    });
</script>
<%} %>

PartialView:

<table>
    <% foreach (var item in Model)
       {%>
       <tr>
            <td style="width:150px"><%:Html.Encode(item.Time) %></td>
            <td><%:Html.Encode(item.Title) %></td>
            <%--<td><%:Html.ActionLink("Delete","Delete",new {ID=item.ID}) %></td>--%>
            <td><%:Ajax.ActionLink("Delete", "Delete", new { id = item.ID }, new AjaxOptions
                                                                         {
                                                                            Confirm = "Are you sure you     want to delete?",
                                                                            OnComplete = "deleteCompleted",
                                                                            HttpMethod = "DELETE"
                                                                        })%></td>
            <%--<a onclick="deleteRecord(<%: item.ID %>)" href="JavaScript:void(0)">Delete</a></td>--%>
       </tr>

    <%} %>
 </table> 

Delete Action:

        [Authorize(Roles = "Admin")]
    [AcceptVerbs(HttpVerbs.Delete)]
    public ContentResult Delete(int id)
    {
        var query = (from p in dc.Programme
                     where p.ID == id
                     select p).First();
        if (query != null)
        {
            dc.Programme.DeleteObject(query);
            dc.SaveChanges();
        }
        /*  return RedirectToAction("Create");*/
        return this.Content(" ");
    }

Answer 1

UpdateTargetId=”CreateData” ??
Are you sure ??
It will replace the content of the CreateData div with the result of ProgramController.Create which is … the view containing the full form ?
Maybe this is your problem.

When you include jquery.unobtrusive-ajax.min, Ajax.BeginForm uses ajax.
If you do not include it, it is working as Html.BeginForm without ajax.