Частичная загрузка из JQuery не отображается в MVC

Question

У меня проблема с получением моего частичного представления для рендеринга в ASP.Net MVC 1.0, когда я загружаю его с помощью JQuery.

У меня есть контроллер вроде:

    public ActionResult Index() {
        return View(_invoiceService.FindAllInvoices());
    }

    public ActionResult InvoiceSearchResults() {
        return PartialView("InvoiceSearchResults",_invoiceService.FindAllInvoices());
    }

У меня есть индексное представление:

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Script("/scripts/InvoiceSearch.js") %>

<h2>Search</h2>
<div class="SearchBar">
</div>

<div class="SearchResults"></div>

<p><%= Html.ActionLink("Create New", "Create") %></p>
</asp:Content>

У меня тогда есть PartialView:

<table>
    <tr>
        <th></th>
        <th>InvoiceId</th>
        <th>InvoiceNo</th>
        <th>SupplierId</th>
        <th>InvoiceDate</th>
        <th>TotalValue</th>
        <th>InputDate</th>
        <th>PaymentDueDate</th>
        <th>InvoiceStatusId</th>
        <th>AuthoriserId</th>
    </tr>

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%= Html.ActionLink("Edit", "Edit", new { id=item.InvoiceId }) %> |
            <%= Html.ActionLink("Details", "Details", new { id=item.InvoiceId })%>
        </td>
        <td><%= Html.Encode(item.InvoiceId) %></td>
        <td><%= Html.Encode(item.InvoiceNo) %></td>
        <td><%= Html.Encode(item.SupplierId) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.InvoiceDate)) %></td>
        <td><%= Html.Encode(String.Format("{0:F}", item.TotalValue)) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.InputDate)) %></td>
        <td><%= Html.Encode(String.Format("{0:g}", item.PaymentDueDate)) %></td>
        <td><%= Html.Encode(item.InvoiceStatusId) %></td>
        <td><%= Html.Encode(item.AuthoriserId) %></td>
    </tr>
<% } %>
</table>

У меня есть JQuery:

$(document).ready(function() {
    $("#InvoiceDropDown").change(function() {
        $("#SearchResults").load("/Invoice/InvoiceSearchResults/");      
    });
});

Я удалил часть кода, который, как я знаю, работает, чтобы облегчить чтение вопроса.

Когда я нажимаю на свой DropDownList, он вызывает JQuery, переходит к моему контроллеру и, кажется, запускает частичный класс, но он ничего не отображает.

Я попробовал ответ evilDonald's, и то же самое происходит, так что, может быть, я сделал что-то глупое?

Любая помощь или общие советы здесь очень ценятся.

Answer 1

У меня есть решение для вас:

Вместо использования

$("#SearchResults").load("/Invoice/InvoiceSearchResults/");

Попробуйте использовать $ .ajax () для запроса контроллера, а затем поместите ответ в HTML. У меня это работает успешно, и я постараюсь перефразировать ответ ниже:

Метод управления

Держите его таким же

public ActionResult InvoiceSearchResults()
{                        
    return PartialView("InvoiceSearchResults",_invoiceService.FindAllInvoices());
}

Ajax Call

$.ajax({
    url: "/Invoice/InvoiceSearchResults/",
    type: 'GET',
    dataType: 'html', // <-- to expect an html response
    success: doSubmitSuccess
});

Метод OnSuccess js

function doSubmitSuccess(result)
{
    $('div#MyDiv').html(result);
}

Answer 2

$("#SearchResults").load("/Invoice/InvoiceSearchResults/");   

должно было быть:

$(".SearchResults").load("/Invoice/InvoiceSearchResults/");     

проблемы с селектором - его не видно, если посмотреть на него.

Спасибо (EvilDonald - я проголосовал за ваш ответ)

Answer 3

Хмм ... хотя приведенный выше код должен работать (тоже $ .ajax.) Я использовал третий подход для рендеринга своих партиалов. Запрос $ .get.

Вот образец

$.get(postUrl, function(data) {
                $("#posts").append(data);
                $('#ajaxLdMore').addClass('hideElement');
                $('#ldMore').removeClass('hideElement');
            });

Так что, возможно, вам повезет в третий раз.