在 ASP.NET MVC 中使用 AJAX 仅加载/刷新页面的一部分（视图）答案

【问题标题】：Load/Refresh only part of a page (View) using AJAX in ASP.NET MVC在 ASP.NET MVC 中使用 AJAX 仅加载/刷新页面的一部分（视图）
【发布时间】：2016-09-21 20:59:21
【问题描述】：

我正在尝试实现与 OP in this post 提到的相同的结果但是当我尝试通过检查它是否是我的 Index 操作中的 AJAX 请求来呈现部分视图时，它的评估结果为 false。

我的索引视图：

    @using (Ajax.BeginForm("Index", "Home",
    new AjaxOptions()
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "restaurantList"
    }))
{
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
}

@Html.Partial("_Restaurant",Model)

我的部分观点：

<div id="restaurantList" style="border:2px dotted red; padding-left:2em; margin-top:4px;">
    @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>@item.CountOfReviews</div>
            <hr />
        </div>
    }
</div>

我的索引操作：

    public ActionResult Index(string searchTerm = null)
    {

        var model = ...//Building model object here

        if (Request.IsAjaxRequest())
        {
            return PartialView("_Restaurant", model);
        }

        return View(model);

我不想深入使用任何 jQuery 或 javascript，因为我正在学习 ASP.NET MVC，并且想知道为什么我采用的方法不起作用？丹尼斯在我引用的帖子中的第二个答案也提出了类似的方法。

谁能告诉我我做错了什么？谢谢

【问题讨论】：

您是否包含相关脚本以使用Ajax.BeginForm() - jquery-{version}.js 和jquery.unobtrusive-ajax.js？（你不能在没有 jquery 或 javascript 的情况下进行 ajax 调用）
还要注意你的<div id="restaurantList" ... > 元素应该在主视图中，而不是部分视图中。
@StephenMuecke 是的，我有。我已经捆绑了所有必需的库并将它们添加到 BundleConfig.cs 并在共享布局视图中引用。
如果 if (Request.IsAjaxRequest()) 评估为 false 则意味着您的脚本未正确加载并且您进行了正常提交
@StephenMuecke：我确实更改了主视图中的<div id="restaurantList"...> 元素，结果仍然相同。

标签： ajax asp.net-mvc

【解决方案1】：

这只是一个示例，您可以在不刷新页面的情况下从 AJAX 加载视图，它可能会对您有所帮助。

它通过 ajax 调用将文本值发送到控制器，并将该值加载到替换主视图的其他视图中，如果您不想替换主视图，则可以使用其他 div 而不是相同的 div 来加载内容。

控制器：

public ActionResult Index()
{            
    return View();
}

[HttpPost]
public PartialViewResult TestAjax(string Name)
{
    ViewBag.Name = Name;
    return PartialView();
}

Index.cshtml：

<input type="button" id="btnSearch" class="btn btn-warning" style="height:35px;width:120px" value="Search"/> 
<label>Name:</label><input type="text" id="txtName" name="txtName" />


<script>
$('#btnSearch').click(function () {
    $.ajax({
        url: '@Url.Action("TestAjax", "Home")',
        data: { Name: $("#txtName").val() },
        type: 'POST',
        success: function (data) {
            $("#divContent").html(data);
        }
    });
});
</script>

TestAjax.cshtml：

@ViewBag.Name

【讨论】：

谢谢桑迪普。我也会尝试这种方法。

【解决方案2】：

正如@StephenMuecke 在他的 cmets 中指出的那样，没有正确加载库是问题所在。在创建所有库的新包并将其添加到 BundkeConfig.cs 时，我错过了 ~/Scripts/jquery.unobtrusive-ajax.js*。现在可以使用了。

【讨论】：