[英]Updating PartialView mvc 4
Ey! 安永! How I could refresh a Partial View with data out of the Model?
如何使用模型中的数据刷新部分视图? First time, when the page loads it's working properly, but not when I call it from the Action.
第一次,当页面加载它正常工作时,但不是当我从Action调用它时。 The structure I've created looks like:
我创建的结构如下:
Anywhere in my View: 在我看来的任何地方:
@{ Html.RenderAction("UpdatePoints");}
My PartialView "UpdatePoints": 我的PartialView“UpdatePoints”:
<h3>Your points are @ViewBag.points </h3>
At the Controller I have: 在控制器我有:
public ActionResult UpdatePoints()
{
ViewBag.points = _Repository.Points;
return PartialView("UpdatePoints");
}
Thanks for your help! 谢谢你的帮助!
UPDATE UPDATE
Thanks all for your help! 感谢你的帮助! Finally I used JQuery/AJAX as you suggested, passing the parameter using model.
最后我按照你的建议使用JQuery / AJAX,使用模型传递参数。
So, in JS: 所以,在JS中:
$('#divPoints').load('/Schedule/UpdatePoints', UpdatePointsAction);
var points= $('#newpoints').val();
$element.find('PointsDiv').html("You have" + points+ " points");
In Controller: 在控制器中:
var model = _newPoints;
return PartialView(model);
In View 在视图中
<div id="divPoints"></div>
@Html.Hidden("newpoints", Model)
So, say you have your View with PartialView, which have to be updated by button click: 所以,假设您有View with PartialView,必须通过按钮点击更新:
<div class="target">
@{ Html.RenderAction("UpdatePoints");}
</div>
<input class="button" value="update" />
There are some ways to do it. 有一些方法可以做到这一点。 For example you may use jQuery:
例如,您可以使用jQuery:
<script type="text/javascript">
$(function(){
$('.button').on("click", function(){
$.post('@Url.Action("PostActionToUpdatePoints", "Home")').always(function(){
$('.target').load('/Home/UpdatePoints');
})
});
});
</script>
PostActionToUpdatePoints
is your Action
with [HttpPost]
attribute, which you use to update points PostActionToUpdatePoints
是具有[HttpPost]
属性的Action
,用于更新点
If you use logic in your action UpdatePoints() to update points, maybe you forgot to add [HttpPost] attribute to it: 如果您在动作UpdatePoints()中使用逻辑来更新点,可能您忘记添加[HttpPost]属性:
[HttpPost]
public ActionResult UpdatePoints()
{
ViewBag.points = _Repository.Points;
return PartialView("UpdatePoints");
}
You can also try this. 你也可以试试这个。
$(document).ready(function () {
var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
setInterval(function () {
var url = "@(Html.Raw(Url.Action("ActionName", "ControllerName")))";
$("#PartialViewDivId").load(url);
}, 30000); //Refreshes every 30 seconds
$.ajaxSetup({ cache: false }); //Turn off caching
});
It makes an initial call to load the div, and then subsequent calls are on a 30 second interval. 它进行初始调用以加载div,然后后续调用以30秒为间隔。
In the controller section you can update the object and pass the object to the partial view. 在控制器部分中,您可以更新对象并将对象传递给局部视图。
public class ControllerName: Controller
{
public ActionResult ActionName()
{
.
. // code for update object
.
return PartialView("PartialViewName", updatedObject);
}
}
Thanks all for your help! 感谢你的帮助! Finally I used JQuery/AJAX as you suggested, passing the parameter using model.
最后我按照你的建议使用JQuery / AJAX,使用模型传递参数。
So, in JS: 所以,在JS中:
$('#divPoints').load('/Schedule/UpdatePoints', UpdatePointsAction);
var points= $('#newpoints').val();
$element.find('PointsDiv').html("You have" + points+ " points");
In Controller: 在控制器中:
var model = _newPoints;
return PartialView(model);
In View 在视图中
<div id="divPoints"></div>
@Html.Hidden("newpoints", Model)
Controller : 控制器:
public ActionResult Refresh(string ID)
{
DetailsViewModel vm = new DetailsViewModel(); // Model
vm.productDetails = _product.GetproductDetails(ID);
/* "productDetails " is a property in "DetailsViewModel"
"GetProductDetails" is a method in "Product" class
"_product" is an interface of "Product" class */
return PartialView("_Details", vm); // Details is a partial view
}
In yore index page you should to have refresh link : 在yore索引页面中,您应该有刷新链接:
<a href="#" id="refreshItem">Refresh</a>
This Script should be also in your index page: 此脚本也应该在您的索引页面中:
<script type="text/javascript">
$(function () {
$('a[id=refreshItem]:last').click(function (e) {
e.preventDefault();
var url = MVC.Url.action('Refresh', 'MyController', { itemId: '@(Model.itemProp.itemId )' }); // Refresh is an Action in controller, MyController is a controller name
$.ajax({
type: 'GET',
url: url,
cache: false,
success: function (grid) {
$('#tabItemDetails').html(grid);
clientBehaviors.applyPlugins($("#tabProductDetails")); // "tabProductDetails" is an id of div in your "Details partial view"
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.