如何使用 jQuery 在 ASP.NET MVC 中重新加载带有部分视图的 div？

2024-04-23

我有一个 div，其部分位于页面的某处。我在按钮上有一个事件。我如何编写一个 Javascript 来获取 div 并重新加载它，并重新加载部分视图。

我从另一个角度看这个问题。但我现在不能这样做。但我需要同样的事情发生，只由 jQuery 执行，而不是直接在页面中执行。我可以在 jQuery 脚本中运行类似的 ajax 代码吗，因为它的 javascript 也不是吗？

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>
<div id="feiertage">
    <% Html.RenderPartial("FeiertagTable"); %>
</div>
<%  } %>

如果我可以通过启动点击事件或类似的事情来运行上面的脚本，我会帮助我

让我们从一些基本的控制器操作开始：

public class FeiertagController
{
    IFeiertagService feiertagService = new FeiertagService();

    public ActionResult EditFeiertag()
    {
        // ... return your main edit view
        return View();
    }

    // Will be called by your jquery ajax call
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

因此，Edit Feiertag() 用于渲染整个编辑页面，当该页面想要异步渲染部分视图时，它将调用 Get Feiertag Table()。

现在，根据您的观点，假设您有类似的内容：

<div id="Container">
    <div id="LeftPanel">
        // ... Some menu items
    </div>
    <div id="RightPanel">
        <a id="ReloadLink" href="#">Reload Table</a>
        <div id="FeiertagTable>
            <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %>
        </div>
    </div>
</div>

这工作正常并且会加载你的表一次。但是，如果单击某个元素（在我们的示例中为#ReloadLink），您希望重新加载 Feiertag 表。

添加以下内容到您页面的一部分：

<head>
        <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stop the links default behavior
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });
        </script>
</head>

然后，这将为您的重新加载链接添加一个单击事件，该事件将调用 jquery load() 方法。该方法是一个简化的ajax get请求，它将用返回的内容替换所选div（FeiertagTable）的内容。

我们的 GetFeiertagTable() 控制器操作将返回部分视图，然后将其插入到该 div 中。

我希望这能为您指明正确的方向！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jQuery 在 ASP.NET MVC 中重新加载带有部分视图的 div？

jQuery

ASPNETMVC

AJAX

partialviews