Question

方案：我有一个视图，在该视图中我也是一个局部视图。在主视图中，我有两个文本框和一个按钮。当用户输入数据并单击按钮时，数据会添加到数据库中，并在部分视图中以表格格式显示。

部分视图也有每行的删除链接。为了支持删除，我不得不使用“jquery.unobtrusive-ajax.min”。

问题：当我单击按钮保存数据时，视图上的所有内容都会变得疯狂。整个页面变成了两倍。请看图像。但是，如果我删除“jquery.unobtrusive-ajax.min”的引用，问题就不存在了（但删除不起作用）。

任何人都知道这种行为，如何解决？ enter image description here

主要观点：

<%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”??
你确定吗？
它将使用ProgramController.Create的结果替换CreateData div的内容，这是...包含完整表单的视图？
也许这是你的问题。

当你包含jquery.unobtrusive-ajax.min时，Ajax.BeginForm使用ajax。
如果你不包含它，它就是Html.BeginForm而没有ajax。

jquery.unobtrusive-ajax.min在视图上引起奇怪的行为

1 个答案: