局部视图渲染上按一下按钮 [英] Partial view render on button click
问题描述
我有索引视图：
@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视图/
How to do that when i Click one of button just partial view render, now controller wants to move me to BuyItem view ;/
推荐答案
做的第一件事是引用jQuery的。现在你只引用 jquery.unobtrusive-ajax.min.js 但是这个脚本有jQuery的依赖，所以不要忘记在它之前包括还有：
The first thing to do is to reference jQuery. Right now you have referenced only jquery.unobtrusive-ajax.min.js but this script has dependency on jQuery, so don't forget to include as well before it:
<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表单提交按钮。在你的榜样，你没有一个形式，从而这将是语义上更正确使用正常的按键：
Now to your question: you should use submit buttons with an HTML form. In your example you don't have a form so it would be semantically more correct to use a normal button:
<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文件通过订阅。点击（）事件AJAXify这些按钮：
and then in a separate javascript file AJAXify those buttons by subscribing to the .click() event:
$(function() {
$(':button').click(function() {
$.ajax({
url: $(this).data('url'),
type: 'GET',
cache: false,
success: function(result) {
$('#msmqpartial').html(result);
}
});
return false;
});
});
如果你想依靠微软不显眼的框架，你可以使用AJAX actionlinks：
or if you want to rely on the Microsoft unobtrusive framework you could use 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形式：
and if you want buttons instead of anchors you could use AJAX forms:
@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 脚本到您的网页，这应该工作。
From what I can see you have already included the jquery.unobtrusive-ajax.min.js script to your page and this should work.
这篇关于局部视图渲染上按一下按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
