Загрузите PartialView с Ajax в asp.net

Question

У меня проблема при использовании PartialViews и Ajax.Я использую custim Helper для создания Imagelink со свойствами Ajax (нашел его в интернете).

Проблема в том, что когда я нажимаю на изображение, отображает ту же страницу в targetDivPartialView, который он должен загрузить

Вот мой код:

Функция обновления в представлении

    <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, так как она не нужна.