在没有回发的情况下在 div 中渲染部分视图答案

【问题标题】：Render a PartialView in a div without postback在没有回发的情况下在 div 中渲染部分视图
【发布时间】：2020-02-06 12:55:50
【问题描述】：

我知道这个问题已被问过很多次，但无论我尝试什么，我都无法让它发挥作用。我有一个 actionResult 接受三个参数并返回一个局部视图。现在我要做的是获取三个元素的值并使用它们在 div 中重新渲染视图。我尝试使用捕获的数据成功呈现 div，但我无法弄清楚我在使用 jquery 时做错了什么

在脚本文件中包含了我最后尝试的东西（尽管每次尝试在放弃之前都有一些调整）

这是主视图中的 RenderAction（有效）

<div id="tables">
    @{ Html.RenderAction("_Tables", new { date = "5/10/2019", time = "13:00", seats = "1" });}
</div>

返回所述部分的动作结果

public ActionResult _Tables(string date, string time, int seats)
        {
            return PartialView("_Tables", checkTables(date,time,seats));
        }

最后是脚本（searchTable 是字段附近的一个按钮。它们的值被成功捕获但加载不起作用）

$('#searchTable').click(function () {
    var date = document.getElementById("datepicker").value;
    var time = document.getElementById("time").value;
    var seats = document.getElementById("seats").value;
    alert(date);
    //var data = JSON.stringify({
    //    'date': date,
    //    'time': time,
    //    'seats': seats
    //});
    //$.ajax({
    //    type: "POST",
    //    url: '/Home/_Table/',
    //    data: data,
    //    dataType: "html",
    //    success: function (result) { success(result); }

    //});
    //function success(result) {
    //    alert(result);
    //    $("#tables").html(result);
    //    $("#tables").load("#tables")
    //};
    //$.ajax({
    //    url: "/Home/_Table",
    //    type: "GET",
    //    contentType: "application/json; charset=utf-8",
    //    data: data,
    //    success: function (data) {
    //        $('#target').html(data); // loading partialView into div
    //    }
    //});
    //$('#tables').load('@{ Html.RenderAction("_Tables", new { date = "' + date + '", time = "' + time + '", seats = "' + seats + '" });}');
    $('#tables').load('@Url.Action("_Tables","Home")', { 'date': date, 'time': time, 'seats': seats });
    alert(time);
    //alert('@{ Html.RenderAction("_Tables", new { date = "' + date + '", time = "' + time + '", seats = "' + seats + '" });}');
});

我知道问题在于我缺乏了解，但我没有时间研究 ajax。我的实习是基于在最后期限内“搞清楚”

【问题讨论】：

标签： c# jquery html ajax asp.net-mvc

【解决方案1】：

我在您的代码中看到了注释行：

 $("#tables").html(result);

这就是你所需要的！您应该使用从控制器返回的所有部分视图 html 填充您的 div。

【讨论】：

感谢 Ilia，虽然 Nijin 稍后提供了更全面的答案，但您将我的思路引向了正确的方向。可悲的是，我还不能让任何人起床，所以我祝你有美好的一天
是的 Nijin 已经给出了完整的答案:) 祝你有美好的一天。

【解决方案2】：

假设您有一个div 和id 表

<div id="tables">

您可以使用以下方法根据您的参数附加部分视图内容

        $.ajax({
        url: "/Home/_Tables?date=" + val + "&time="+ val +"&seats="+seats,
        type: "POST",
        cache: false,
        success: function (result) {
            $("#tables").empty();
            $("#tables").html(result);
        },
        error: function () {
            $("#tables").empty();
        }
    });

这将是主视图 ajax 函数。在控制器中执行以下操作

public ActionResult _Tables(string date, string time,string seats)
{
 // here you can provide model,any viewbag values etc to the partial view and  you will get corresponding html result
   return PartialView("Yourpartial ViewName");
}

【讨论】：