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

I have a div with a partial inside somewhere on the page. I have a event on a button. How could I write a Javascript that takes the div and reloads it and also reloads the partial view.

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

I have this in another view. But I can't do it like this now. But I need the same thing to happen only execute by a jQuery not directly in the page. Can i run maybe simular ajax code in the jQuery script because its javascript too isn't it?.

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

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

I would help me if I could run the script above by start a click event or something like that

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

1 个解决方案

#1

Lets start with some basic controller actions:

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

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

}

So, EditFeiertag() is used to render your whole edit page, and that page will make a call to GetFeiertagTable() when it wants to asynchronously render your partial view.

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

Now, on your view, lets say you have something like:

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

<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>

This works fine and will load your table once. But you want to make the Feiertag table reload if you click a certain element (in our case the #ReloadLink).

这工作正常,将加载您的表一次。但是如果单击某个元素(在我们的例子中是#ReloadLink),您希望重新加载Feiertag表。

Add the following to portion of your page:

将以下内容添加到页面的一部分:

<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>

That will then add an event on the click event for your reload link that will call a jquery load() method. This method is a simplified ajax get request and it will replace the contents of the selected div (FeiertagTable), with what is returned.

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

Our GetFeiertagTable() controller action will return the partial view, which is then inserted into that div.

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

I hope this gets you pointed in the right direction!

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

#1