个人中心
gpt4 book ai didi

asp.net - 单击按钮时呈现局部 View

转载 作者：行者123 更新时间：2023-12-04 01:42:53 25 4
gpt4 key购买 nike

我有索引 View :

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

和 Controller : 
 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);
        }
}

当我单击按钮之一只是部分 View 渲染时如何做到这一点，现在 Controller 想要将我移动到 BuyItem View ；/

最佳答案

首先要做的是引用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() 对这些按钮进行 AJAX 化。事件: 
$(function() {
    $(':button').click(function() {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#msmqpartial').html(result);
            }
        });
        return false;
    });
});

或者，如果您想依赖 Microsoft 不显眼的框架，您可以使用 AJAX 操作链接: 
@Ajax.ActionLink("Buy", "BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })
@Ajax.ActionLink("Sell", "SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })

如果你想要按钮而不是 anchor ，你可以使用 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脚本到您的页面，这应该可以工作。

关于asp.net - 单击按钮时呈现局部 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11961374/

25 4 0
文章推荐： tags - 这行代码有什么作用？构造 uint32_t goodguys = 0x1 << 0
文章推荐： groovy - 在 Groovy 中，如何将 map 中某个属性的值相加？
文章推荐： javascript - FullCalendar ListView - 如何隐藏 "all-day"
文章推荐： debugging - 如何调试包含在 libtool 脚本中的程序？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com