在ASP.NET MVC中使用AJAX加载/刷新页面的一部分(View)

时间:2016-09-21 03:59:22

标签: ajax asp.net-mvc

我试图获得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,并且想知道为什么我采取的方法不起作用? Dennis的第二个答案,在我引用的帖子中也提出了类似的方法。

有人可以告诉我我做错了什么吗? 感谢

2 个答案:

答案 0 :(得分:0)

这只是一个如何在没有页面刷新的情况下从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

答案 1 :(得分:0)

正如@StephenMuecke在他的评论中指出的那样,未正确加载库是问题所在。在创建所有库的新捆绑并将其添加到BundkeConfig.cs时,我错过了~/Scripts/jquery.unobtrusive-ajax.js*。现在就开始工作了。