asp.net – 部分视图呈现按钮点击

发布时间：2020-12-15 20:15:18 所属栏目：asp.Net 来源：网络整理

导读：我有索引视图： @using System.Web.Mvc.Html@model MsmqTestApp.Models.MsmqData!DOCTYPE htmlhtmlhead script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"/script meta name="viewport" content="width=device

我有索引视图：

@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",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视图; /

解决方法

首先要做的是引用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",new { area = "Msmq" })" />
<input type="button" value="Sell" data-url="@Url.Action("SellItem",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",new { area = "Msmq" },new AjaxOptions { UpdateTargetId = "msmqpartial" })
@Ajax.ActionLink("Sell","SellItem",new AjaxOptions { UpdateTargetId = "msmqpartial" })

如果您想要按钮而不是锚点,您可以使用AJAX表单：

@using (Ajax.BeginForm("BuyItem",new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Buy</button>
}
@using (Ajax.BeginForm("SellItem",new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Sell</button>
}

从我可以看到,您已经将jquery.unobtrusive-ajax.min.js脚本包含在您的页面中,这应该是正常的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!