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)
如果我可以通过启动点击事件或类似事件来运行上面的脚本,我会帮助我
让我们从一些基本的控制器动作开始:
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中.
我希望这会让你指出正确的方向!
| 归档时间: |
|
| 查看次数: |
8137 次 |
| 最近记录: |