Question

使用PartialViews和Ajax时遇到问题。我使用custim Helper创建一个具有Ajax属性的Imagelink（在互联网上找到它）。

问题是，当我点击图片时，在targetDiv中呈现相同页面而不是他应该加载的PartialView

这是我的代码：

视图中的更新功能

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        function updateTarget(data) {
            // the HTML output of the partial view
            var partialView = data.get_data();
            // the DOM element representing the targetDiv
            var targetDiv = data.get_UpdateTarget();
            // updates the target with the partialView
            $('"targetDiv').append(partialView)
            // return false to prevent the automatic update of the placeholder
            return false;
        }
    </script>

TagetDiv和Ajax自定义助手

<tr>
            <td><div id="create"></div></td>
            <td></td>
            <td></td>
        </tr>

        <% if (10 < 20) {%>
            <tr>
                <td><%= Ajax.ImageActionLink("/Content/Images/add_link.png","Add a new link", "Create", new AjaxOptions() { OnSuccess = "updateTarget", UpdateTargetId = "create" })%></td>
                <td></td>
                <td></td>
            </tr>
        <% } %>

自定义助手

public static string ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, AjaxOptions ajaxOptions)
        {
            //Creates the image
            var builder = new TagBuilder("img");
            builder.MergeAttribute("src", imageUrl);
            builder.MergeAttribute("alt", altText);
            builder.MergeAttribute("height", "24");
            builder.MergeAttribute("width", "24");

            //Creates the link
            var link = helper.ActionLink("[replaceme]", actionName, ajaxOptions);
            return link.ToString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing));
        }

创建功能

public ActionResult Create()
        {
            return PartialView("Create");
        }

Create.ascx（不在共享中）

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyLinks.ViewModels.LinkViewModel>" %>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) {%>

        <div class="editor-label">
            <%: Html.LabelFor(m => m.Link.Url) %>
        </div>
        <div class="editor-field">
            <%: Html.TextAreaFor(m => m.Link.Url) %>
            <%: Html.ValidationMessageFor(m => m.Link.Url) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(m => m.Link.Description) %>
        </div>
        <div class="editor-field">
            <%: Html.TextAreaFor(m => m.Link.Description)%>
            <%: Html.ValidationMessageFor(m => m.Link.Description)%>
        </div>

        <a href="javascript:document.form_name.submit();"><img src="/Content/Images/confirm_link.png" alt="Accept this link"/></a>

<% } %>

请帮助我，我现在正在寻找好几个小时的解决方案！

Answer 1

您可能还需要引用MicrosoftAjax.js：

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

同样在调用帮助程序时，您不需要OnSuccess和UpdateTargetId。以下内容应足够并指定插入模式：

<%= Ajax.ImageActionLink(
    Url.Content("~/Content/Images/add_link.png"),
    "Add a new link", 
    "Create", 
    new AjaxOptions { 
        UpdateTargetId = "create", 
        InsertionMode = InsertionMode.InsertAfter 
    }
) %>

现在您可以删除updateTarget功能，因为它不是必需的。

在asp.net中使用Ajax加载PartialView

1 个答案: