局部视图渲染上按一下按钮(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视图; /

Answer 1:

要做的第一件事是引用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文件AJAXify这些按钮通过订阅.click()事件：

$(function() {
    $(':button').click(function() {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#msmqpartial').html(result);
            }
        });
        return false;
    });
});

或者，如果你想依靠微软不显眼的框架，你可以使用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脚本您的页面，这应该工作。

Answer 2:

也许不是解决你要找的，但是，我会忘记泛音和使用JavaScript调用服务器，以获得所需的数据，然后将数据返回到客户端为JSON，并用它来呈现结果页面异步。

JavaScript函数;

var MyName = (function () {


//PRIVATE FUNCTIONS
var renderHtml = function(data){
   $.map(data, function (item) {
       $("<td>" + item.whateveritisyoureturn + "</td>").appendTo("#msmqpartial");
   });
};

//PUBLIC FUNCTIONS
var getData = function(val){
   // call the server method to get some results.
    $.ajax({ type: "POST",
        url: "/mycontroller/myjsonaction",
        dataType: "json",
        data: { prop: val },
        success: function (data) {
            renderHtml();
        },
        error: function () {
        },
        complete: function () {
        }
    });
};

//EXPOSED PROPERTIES AND FUNCTIONS
return {
    GetData : getData
};


})();

并在服务器上....

public JsonResult myjsonaction(string prop)
        {
            var JsonResult;

            // do whatever you need to do

            return Json(JsonResult);
        }

希望这可以帮助....

文章来源: Partial view render on button click