jquery.unobtrusive-ajax.min вызывает странное поведение на представлении

Question

Сценарий: у меня есть вид, и внутри этого вида я тоже частичный вид.На главном экране у меня есть два текстовых поля и кнопка.Когда пользователь вводит данные и нажимает на кнопку, данные добавляются в базу данных и отображаются в табличном формате в частичном представлении.

Частичное представление также имеет ссылку для удаления для каждой строки.Чтобы поддержать это удаление, мне пришлось использовать «jquery.unobtrusive-ajax.min».

Проблема: Когда я нажимаю кнопку для сохранения данных, все в представлении становится безумным.Вся страница становится двойной.Пожалуйста, смотрите изображение.Но если я удаляю ссылку на «jquery.unobtrusive-ajax.min», проблема не существует (удаление тогда не работает, хотя).

Кто-нибудь знает об этом поведении, как его решить ??

Основной вид:

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

Действие удаления:

        [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" ??
Вы уверены ??
Он заменит содержимое элемента CreateData на результат ProgramController.Create, который является ... представлением, содержащим полную форму?
Может быть, это твоя проблема.

Когда вы включаете jquery.unobtrusive-ajax.min, Ajax.BeginForm использует ajax.
Если вы не включите его, он будет работать как Html.BeginForm без ajax.