从 JQuery 加载部分视图未在 MVC 中显示答案

【问题标题】：Loading Partial View from JQuery not showing in MVC从 JQuery 加载部分视图未在 MVC 中显示
【发布时间】：2009-10-07 16:42:23
【问题描述】：

当我使用 JQuery 加载部分视图以在 ASP.Net MVC 1.0 中呈现时，我遇到了问题。

我有一个类似的控制器：

    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 的回答，同样的事情发生了，所以也许我在某个地方做了一些愚蠢的事情？

非常感谢这里的任何帮助或一般性建议。

【问题讨论】：

抱歉 - 这篇文章已经格式化了 :)。需要下线，稍后再发>
在 Fiddler 或 Firebug 的 Net 面板中查看来自服务器的响应。看起来对吗？
这是一个 xmlHHTPRequest 并且看起来不错 - 我应该在这里使用 JSON 还是其他东西，因为它不是 html？
您不需要使用 JSON 来执行此操作。

标签： asp.net jquery asp.net-mvc partial-views

【解决方案1】：

我有一个解决方案：

而不是使用

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

尝试使用 $.ajax() 请求控制器，然后将回复放入 html 中。我成功地完成了这项工作，我将尝试解释以下答案：

控制器方法

保持不变

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

Ajax 调用

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

OnSuccess js 方法

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

【讨论】：

谢谢 - 同样的事情正在发生。我错过了一些基本的东西吗？
这两个（load 和 ajax/success/html）做同样的事情。

【解决方案2】：

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

应该是：

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

选择器问题 - 看不到它。

谢谢（EvilDonald - 我投票赞成你的答案）

【讨论】：

感谢您向我展示您可以通过 load() 方法调用控制器！直到现在，我才意识到你可以做到这一点：D

【解决方案3】：

嗯...虽然上面的代码应该可以工作（$.ajax 也是）。我一直在使用第三种方法来渲染我的部分。 $.get 请求。

这是一个示例

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

所以也许你会得到第三次幸运。

【讨论】：