net*_*jor 11 asp.net asp.net-mvc partial-views
我有索引视图:
@using System.Web.Mvc.Html
@model MsmqTestApp.Models.MsmqData
<!DOCTYPE html>
<html>
<head>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<title>MsmqTest</title>
</head>
<body>
<div>
<input type="submit" id="btnBuy" value="Buy" onclick="location.href='@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })'" />
<input type="submit" id="btnSell" value="Sell" onclick="location.href='@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })'" />
</div>
<div id="msmqpartial">
@{Html.RenderPartial("Partial1", Model); }
</div>
</body>
</html>
和部分:
@using System.Web.Mvc.Html
@model MsmqTestApp.Models.MsmqData
<p>
Items to buy
@foreach (var item in Model.ItemsToBuy)
{
<tr>
<td>@Html.DisplayFor(model => item)
</td>
</tr>
}
</p>
<p>
<a>Items Selled</a>
@foreach (var item in Model.ItemsSelled)
{
<tr>
<td>@Html.DisplayFor(model => item)
</td>
</tr>
}
</p>
和控制器:
public class MsmqTestController : Controller
{
public MsmqData data = new MsmqData();
public ActionResult Index()
{
return View(data);
}
public ActionResult BuyItem()
{
PushIntoQueue();
ViewBag.DataBuyCount = data.ItemsToBuy.Count;
return PartialView("Partial1",data);
}
}
当我点击其中一个按钮只是部分视图渲染时,如何做到这一点,现在控制器想要将我移动到BuyItem视图; /
Dar*_*rov 20
首先要做的是引用jQuery.现在你只引用了,jquery.unobtrusive-ajax.min.js但是这个脚本依赖于jQuery,所以不要忘记在它之前包含:
<script src="@Url.Content("~/Scripts/jquery.jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
现在回答您的问题:您应该使用带有HTML表单的提交按钮.在您的示例中,您没有表单,因此使用普通按钮在语义上更正确:
<input type="button" value="Buy" data-url="@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })" />
<input type="button" value="Sell" data-url="@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })" />
然后在单独的javascript文件中通过订阅.click()事件来AJAXify这些按钮:
$(function() {
$(':button').click(function() {
$.ajax({
url: $(this).data('url'),
type: 'GET',
cache: false,
success: function(result) {
$('#msmqpartial').html(result);
}
});
return false;
});
});
或者如果您想依赖Microsoft不显眼的框架,您可以使用AJAX actionlinks:
@Ajax.ActionLink("Buy", "BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })
@Ajax.ActionLink("Sell", "SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })
如果您想要按钮而不是锚点,您可以使用AJAX表单:
@using (Ajax.BeginForm("BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
<button type="submit">Buy</button>
}
@using (Ajax.BeginForm("SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
<button type="submit">Sell</button>
}
从我可以看到你已经将jquery.unobtrusive-ajax.min.js脚本包含在你的页面中,这应该工作.