如何使用jQuery在ASP.NET MVC中使用PartialView重新加载div?

Mar*_*kus 3 ajax asp.net-mvc jquery partial-views

我有一个div在页面的某个部分内部.我在一个按钮上有一个事件.我怎么能写一个接受div并重新加载它的Javascript,并重新加载局部视图.

我在另一个视图中有这个.但我现在不能这样做.但我需要发生同样的事情,只能通过jQuery直接在页面中执行.我可以在jQuery脚本中运行可能的类似ajax代码,因为它的javascript也不是吗?

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

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

mmc*_*ole 8

让我们从一些基本的控制器动作开始:

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);
    }

}
Run Code Online (Sandbox Code Playgroud)

因此,EditFeiertag()用于渲染整个编辑页面,当该页面想要异步渲染局部视图时,该页面将调用GetFeiertagTable().

现在,在你看来,让我们说你有类似的东西:

<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>
Run Code Online (Sandbox Code Playgroud)

这工作正常,将加载您的表一次.但是如果单击某个元素(在我们的例子中是#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>
Run Code Online (Sandbox Code Playgroud)

然后,将在重新加载链接的click事件上添加一个事件,该事件将调用jquery load()方法.此方法是一个简化的ajax get请求,它将使用返回的内容替换所选div(FeiertagTable)的内容.

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

我希望这会让你指出正确的方向!